SSGFormフォームの確認画面をポップアップアラートで表示させる方法

これまでWordPressでサイトを制作する際には、MW WP Formを使用していましたが、かなり前に開発が止まり、何を使ってフォームを作り直そうかと考えていた時に、SSGFormというものを見つけたので、こちらを使う事にしました。

今回は、SSGFormを使った、お問い合わせフォームの作り方と合わせて、確認画面をポップアップアラートで作成方法をご紹介したいと思います！

SSGFormとは

SSGFormは、htmlの知識があれば簡単に作成ができるサービスです。
静的なサイトやWordPressでもお使い頂けます。
URL：https://ssgform.com/

無料プランについて

無料プランの機能は以下の通りです。

• フォームURL数無制限
• 月間100フォーム送信
• メンバー数無制限
• 送信通知メール
• 送信後転送
• reCAPTCHA機能
• 自動応答メール
• その他豊富な機能

機能面も充実していて無料でも充分に使えます

無料のメールフォームにありがちな広告やクレジット表示が無く、簡易なスパム対策からreCAPTCHA設定やその他Saas系アプリとの連携も可能です。

SSGFormの使い方

新規アカウント登録

まずはSSGFormのサイトでアカウントを作成します。

上記の項目を入力して新規登録を行います。
※有料プランはアカウント作成後に変更が可能です。

フォームの追加と項目を入力

アカウントの作成が出来たら次に管理画面からフォームの登録を行います。

「+追加」のボタンをクリックしてフォームを追加します。
「状態」という項目がONになっていますが、このままで大丈夫です。

必要な項目を入力してフォームの作成を行います。
この時、フォームのaction属性に追加するURL（送信先URL）が発行されますのでコピーをしておきます。

完了画面がある時は、完了画面のURLを入力

SSGFormはデフォルトの状態だと、送信完了後にデフォルトの送信完了画面が表示されます。

送信完了ページを用意している場合は、以下の部分に送信完了ページのURLを入力します。

html側に発行されたurlを記述

次に、HTMLのformタグのaction属性に先程発行されたURLを記述します。

※method属性を追加し、値は「post」にして下さい。

<form action="ここにコピーしたURLを貼り付けます" method="post">

無事に送信がされていれば設定は完了です。
次は、確認画面をポップアップアラート表示させる方法をご紹介いたします。

確認画面をポップアップ表示させる方法

SSGFormはデフォルトの状態では、入力確認画面は用意されていません。
今回は、確認画面をポップアップアラートで表示させる方法で確認画面を作りたいと思います。

htmlのinputタグ等にIDを付与

まずは、フォームで取得したいタグにID属性を付与します。
ここではinputタグとtextareaタグにidを付与します。

 <form action="ここにコピーしたURLを貼り付けます" method="post">
  <table>
    <tr>
      <td>
        <label for="names">お名前<span class="required">必須</span></label>
        <input id="names" type="text" name="names" required>
      </td>
    </tr>
    <tr>
      <td>
        <label for="tel">お電話番号<span class="required">必須</span></label>
        <input id="tel" type="tel" name="tel" required>
      </td>
    </tr>
    <tr>
      <td>
        <label for="email">メールアドレス<span class="required">必須</span></label>
        <input id="email" type="email"  name="email" required>
      </td>
    </tr>
    <tr>
      <td>
        <label for="content">お問い合わせ内容</label>
        <textarea id="content" name="content" id="form-content"  name="content"></textarea>
      </td>
     </tr>
   </table>
   <p class="c-button"><button type="submit" required>入力内容を確認して送信</button></p>
</form>

javascriptで、ポップアップアラートを出すコードを記述

次に、ポップアップアラートを表示させるためのコードを記述します。

function checkSubmit() {
    const name = document.getElementById('names');
    const tel = document.getElementById('tel');
    const email = document.getElementById('email');
    const content = document.getElementById('content');

    return window.confirm('以下の内容で送信します。\nよろしいですか？\n\n' + name.value + '\n' + tel.value + '\n' + email.value + '\n' + content.value);
    
}

ここでは、html側に付与したid属性を取得し、ポップアップアラートに呼び出すコードを記述しています。

formタグにonsubmit属性を記述

ここまでが出来たら、先程のformタグに「onsumit属性」を記述します。
以下のように記述します。

 <form onsubmit="return checkSubmit()" action="" method="post">

ここまで出来ましたら、フォーム画面で入力し、以下のようにアラートが表示されていたら完成です。

まとめ

SSGFormを使ったお問い合わせフォームの作成と、確認画面の作成方法についてご紹介いたしましたが、いかがだったでしょうか？
SSGForm自体はhtmlが理解できていれば、簡単に扱う事ができますので、表示画面は自由度が高く作れますので、重宝しそうですね。
御興味があれば是非、お試し下さい！