お問い合わせフォームにSSGformを採用してサクッと実現する-ミズイロスキー

## この記事について

こんにちは。この度、このブログに[お問い合わせフォーム](https://www.00bbff.net/p/contact.html)を作成したのですが、その際に利用したサービスについて紹介していきます。

実は、別のリノベーションサイトを知り合いから依頼された際にこのサービスを利用したのですが、その使い勝手の良さに感動しました。ぜひ皆さんにもこのサービスをお勧めしたいと思います。

お問い合わせフォームを探している方にとって、きっと参考になる内容です。興味を持っていただき、試していただければ幸いです。
  
<a name='more'></a>

今回は、実際のコード例を交えながら、Bloggerでお問い合わせフォームを実装する手順も紹介していきます。

## お問い合わせフォームにオススメのサービス

WordPressを利用している場合、「[Contact Form 7](https://ja.wordpress.org/plugins/contact-form-7/)」という有名なプラグインを使用している方も多いでしょう。

では、Bloggerではどうでしょうか？ Bloggerには標準的な問い合わせフォームの機能がないため、困っている方も多いのではないでしょうか。Googleフォームを埋め込む方法もありますが、デザインの自由度に限界を感じている方もいるかもしれません。

そんな方にぴったりのサービスがあります！

## SSGformとは？

SSGformは、メールフォームを簡単に実現できるサービスです。

> SSGform（エスエスジーフォーム）は、フォームを簡単に設置できるサービスです。SSG（Static Site Generator=静的サイトジェネレーター）をお使いの方はもちろん、WordPressや各種Webサイト、Webアプリケーションのフォーム送信先としても利用できます。もう、フォームの設置で悩む必要はありません。

引用: [メールフォームサービス/API/ASP/Saas \| SSGform](https://ssgform.com/)

このサービスを利用すれば、お問い合わせフォームやアンケートフォームなど、様々な用途に対応可能です。

フォームの送信先をこのサービスで発行されるURLに設定するだけで、どこでも使えるようになります。HTMLが使える環境ならば、WordPressやWebサイトなど様々な場所で利用できるのが、SSGformの大きな魅力です。

利用の手順としては、

1. SSGformでメールフォームを作成および設定
    - 通知先メールアドレス、通知メールの件名、送信後の転送先URLなどを設定
    - フォーム送信先のURLが発行される
2. HTMLでフォームを作成
    - このフォームの項目はユーザーが自由に作成可能

手順はどれもシンプルで分かりやすく、フォームの内容は設定したメールアドレスに送信されます。

また、グループで利用している場合、通知先のメールアドレスをメーリングリストに設定したり、チャットと連携することも可能で、安心して利用できます。

## SSGformの特徴

私が特に気に入っているポイントは以下の通りです。

- **国産サービス**
- **フォーム内容が見られない**
    - 内容にはセンシティブな情報を含む場合もあるため、内容がアプリ側に残らないのは安心です。
- **機能制限なしで月間送信数に応じた明瞭な料金体系**
    - 他のサービスでは、有料でないと使えない機能や広告が入るケースが多いですが、SSGformではそのような制限がありません。
- **月100件まで無料で使用可能（クレカ登録不要）**
    - 他のサービスでは厳しい制限がある場合もありますが、SSGformはその点で非常に良心的です。プランの詳細は[こちら](https://ssgform.com/plans)をご覧ください。

さらに、SSGformではフォーム送信後に表示されるサンキューページのURLまで自由に設定できます。この機能により、ユーザーの遷移先ページを自由に指定でき、一貫したユーザビリティを提供できます。

## お問い合わせフォームの実装

ここまでSSGformについて紹介しましたが、実際にBloggerでお問い合わせフォームを作成してみましょう。
この例ではBloggerを使用していますが、他のサービスでも基本的に同様の手順で実現できます。

### SSGform側の手順

1. [SSGformに会員登録](https://ssgform.com/user/registrations/new)
2. Blogger用のフォームを作成
3. 作成したフォームの設定を行う
    1. 送信制限設定を推奨します！

SSGformではreCAPTCHAにも対応していますが、このブログのお問い合わせフォームでは簡易スパム対策を採用しています。将来的には変更するかもしれませんが、現時点ではこの設定で十分と感じています。必要に応じて対応することをお勧めします。

特に設定しておきたい項目は「送信制限設定」です。
- **許可ホスト**
    - お問い合わせフォームを設置するサイトのドメインを入力
    - サブドメインがある場合は、それも忘れずに入力してください。
- **NG（禁止）ワード**

これらを設定することで、いたずら目的の送信を防ぎ、安心して利用できるようになります。
  
私は以下のように設定をしています。 
  
![SSGform - 送信制限設定](https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjHK0x8l8u4FIK6IzHQ6xqSjGwbqq2V77vmCCAPJVgmqvYoAqQWDrIcXACifIFecB09_gWqDl2lg1j6LakvdybE9JBZCYdDB5IQ7c3o9fu6YANMSn4h7e9z8FzEDTBikkr8kW9ha0nI1aV_hFpSlHCIdGl4G3WW3_2fP_4HW1LJ4WeQ2g/s1600/2024-08-11_10.36.03.png)

### Blogger側の手順

1. お問い合わせ用の固定ページを作成
    - Blogger管理画面の「ページ」から新しいページを作成します。
    - URLが正しく生成されるように、最初は「contact」などの名前でページを公開し、その後「お問い合わせ」に名前を変更することをお勧めします。
2. 作成した固定ページにHTMLでフォームを記述します。

```html
<div style="margin: 0 auto; padding: 20px; border-radius: 8px;">
    <form action="URL_OF_SSG_FORM" method="post">
        <div style="display: none;"><input type="text" name="wana" /></div>
        
        <label style="display: block; margin-bottom: 10px;">お名前 (*必須項目)</label>
        <input type="text" name="お名前" required="required" style="width: 100%; padding: 10px; margin-bottom: 20px; border: 1px solid #ddd; border-radius: 4px;">
        
        <label style="display: block; margin-bottom: 10px;">メールアドレス (*必須項目)</label>
        <input type="email" name="メールアドレス" required="required" style="width: 100%; padding: 10px; margin-bottom: 20px; border: 1px solid #ddd; border-radius: 4px;">
        
        <label style="display: block; margin-bottom: 10px;">お問い合わせ内容 (*必須項目)</label>
        <textarea name="お問い合わせ内容" rows="16" required="required" style="width: 100%; padding: 10px; border: 1px solid #ddd; border-radius: 4px;"></textarea>
        
        <label style="display: block; margin-top: 20px;">
            <input type="checkbox" name="プライバシーポリシーに同意" value="はい" required="required" style="margin-right: 10px;">
            <a href="URL_OF_PRIVACY_POLICY" target="_blank" style="color: #00bbff;">プライバシーポリシー</a>に同意する
        </label>

<button type="submit" style="display: inline-block; background: #00bbff; color: #fff; padding: 10px 20px; border: none; border-radius: 4px; cursor: pointer; margin-top: 20px;">送信する</button>
    </form>
</div>
```

これでお問い合わせフォームが完成します。

- `URL_OF_SSG_FORM`
- `URL_OF_PRIVACY_POLICY`

は、ご自身のものに変更することをお忘れなく！

この例は、公式サイトの[コード例](https://ssgform.com/samples)を基にしていますが、フォーム側のインラインスタイルを使用してデザインを調整しています。簡単に実装できますので、ぜひお試しください。

重要なポイントとして、各 `input` 要素に "name" 属性を必ず設定してください。これが、送信されたメールでの項目になります。

実際のお問い合わせページは[こちら](https://www.00bbff.net/p/contact.html)からご覧いただけます。
  
ここから入力したお問合わせはこんな感じでメールに送られてきます。
  
![問い合わせメールサンプル](https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEg3OOz5cuOzya8enY-RURHl0fXEFi7ZnqS1zqa3SPxVKo-LtfgBqRcyeLkJHkncDj-BkeNoRUiEdPPQiyFPJrhgA6Sc8JfcrcCkhkUiiJUntvembzOiBNUQigmQlrkqnrxDK6dddObYo7ZUton3Wtr50On85VdlHBJs3CgHAhFiEoOHAg/s1600/2024-08-11_10.42.50.png)

## Tips: 複数の選択項目を可能にする方法

ここで一つ、皆さんにTipsを共有したいと思います。  
SSGformでアンケートフォームを作成する場合や、お問い合わせ内容の種別を選択させたい場合に、複数の選択肢を選択できるようにする方法です。
  
公式ドキュメントでは触れられていないようでしたのでこちらで紹介してみます。

例として、好きな果物を選択してもらうフォームを作る場合には以下のようにしましょう。

```html
<form action="URL_OF_SSG_FORM" method="post">
    <label style="display: block; margin-bottom: 10px;">好きな果物は？</label>
    
    <label for="apple" style="display: inline-block; width: 150px;">
        <input type="checkbox" id="apple" name="好きな果物[]" value="リンゴ"> リンゴ
    </label>
    
    <label for="banana" style="display: inline-block; width: 150px;">
        <input type="checkbox" id="banana" name="好きな果物[]" value="バナナ"> バナナ
    </label>
    
    <label for="orange" style="display: inline-block; width: 150px;">
        <input type="checkbox" id="orange" name="好きな果物[]" value="オレンジ"> オレンジ
    </label>
    
    <label for="strawberry" style="display: inline-block; width: 150px;">
        <input type="checkbox" id="strawberry" name="好きな果物[]" value="イチゴ"> イチゴ
    </label>
    
    <label for="other" style="display: block; margin-top: 10px;">
        その他:
        <input type="text" id="other" name="好きな果物[]" style="margin-left: 5px;">
    </label>
    
    <button type="submit" style="display: block; margin-top: 20px; padding: 10px 20px;">送信する</button>
</form>
```
  
この場合、まとめたい項目の `name` 属性を `[]` にすることで、複数の選択肢を同じ名前で送信できるようです。(きちんと配列としてまとめられます)  
`value` 属性には選択した項目の値を入力しましょう。  
こうすることで、送信されたメールには、同じ `name` 属性がカンマ区切りで送られてきます。
  
![複数項目選択サンプルメール](https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEihApvjZA6yM3MKJCwpq3kFAZo7LT-J0GO2H4Id3zfcmLcAWlKkApmH6Eshkqg98eldlJNiPO8oJXQlM4KF0U-GZHnndlj74YWSnuZwHYtv_gGhrj9qLVd4MBxlw1HXB2dCVTjBGJeURc09DSIHCjuNfWHyF5mybz22Rg83UTpCWzx-xg/s1600/2024-08-11_11.20.10.png)

## まとめ

SSGformは、お問い合わせフォームやアンケートフォームの実装を非常にシンプルにしてくれる便利なサービスです。
特にBloggerなど、フォームの標準機能がないプラットフォームでの利用に最適だと感じています。

日本製で信頼性が高く、デザインの自由度も高いSSGformをぜひ試してみてはいかがでしょうか？

無料プランから気軽に始められるので、お問い合わせフォームを探している方に強くおすすめします！

お問い合わせフォームにSSGformを採用してサクッと実現する

0 件のコメント:

コメントを投稿

このブログを検索

プロフィール

人気の投稿

ラベル

ブログアーカイブ

ページ一覧