WordPress サイトで、MW WP Form で作成した問い合わせフォームを、固定ページ & Kwes Forms へ移行してみる。

０．はじめに

AWS EC2 AMIMOTO で WordPress サイトを構築して、

• AMIMOTO AMI を使って、WordPress を立ち上げて、接続先を RDS に変更してみる - Qiita

CloudFront やら ALB やら AWS WAF を適用したりして…、

• SSL 化済みの WordPress サイトに CloudFront を適用してみる - Qiita
• CloudFront 適用済みの WordPress サイトに ALB を適用してみる - Qiita
• CloudFront 適用済みの WordPress サイトに ALB を適用後、ALB - WordPress 間を HTTP(80番) で通信させてみる - Qiita
• CloudFront 適用済みの WordPress サイトに AWS WAF も適用してみる - Qiita
• CloudFront と AWS WAF 適用済みの WordPress (AMIMOTO) サイトで、ウェブモニタリング (Site24x7 & StatusCake) からのポーリングをブロックさせない様にしてみる - Qiita

色々やってたんですが…、

どうも運用が非常に面倒臭くなってきちゃいまして…、

😫😫😫

「ええーぃ、Shifter へ移行しちゃろうかい！」と思ってですね。

で、

WordPress を Shifter へ移行する前に、問い合わせページ を 固定ページ へ移行してみました。

今回、MW WP Form で作成した問い合わせフォームを移行するにあたり、ページは固定ページへ移行し、問い合わせの機能は Kwes Forms を利用することにします。

１．Kwes Forms のサインアップと各種設定

いったん、こちらの記事の手順通りに進めます。

• Creating contact form with Kwes | Shifter Documentation

２．MW WP Form で作成した問い合わせフォームの内容を固定ページへ反映

1. 移行元のページをソースコードで開き、MW WP Form で作成された問い合わせフォームの部分 (<div class="entry-content">〜</div>) をコピーします。
   • 参考 : ページのソースの取得方法を教えてください。
2. １．で作成した固定ページに、コピーしたソースコードを貼り付けます。この際、エディターは、コードエディターを選択しておきます。
   • 参考 : WordPressで固定ページを作成する方法【超初心者向け】 | TechAcademyマガジン

3. Kwes Forms の kwes-form タグ、Action Endpoint URL、リダイレクト先パスを追加する。

   <div class="entry-content">
   <div id="mw_wp_form_mw-wp-form-***" class="mw_wp_form mw_wp_form_input">
   <form method="post" action="" enctype="multipart/form-data"><div class="form-item">
   〜〜〜
   <input type="hidden" id="mw_wp_form_token" name="mw_wp_form_token" value="**********" /> 
   <input type="hidden" name="_wp_http_referer" value="/xxxx" /><input type="hidden" name="mw-wp-form-form-id" value="***" /><input type="hidden" name="mw-wp-form-form-verify-token" value="****" />
   </form>
   <!-- end .mw_wp_form --></div>
   </div><!-- .entry-content -->
   

   ↓↓↓

   <div class="entry-content">
   <div id="mw_wp_form_mw-wp-form-***" class="mw_wp_form mw_wp_form_input">
   <div class="kwes-form">
   <form method="post" action="[Kwes Forms の Action Endpoint URL]" redirect="[リダイレクト先パス]" enctype="multipart/form-data"><div class="form-item">
   〜〜〜
   </form>
   </div>
   <!-- end .mw_wp_form --></div>
   </div><!-- .entry-content -->
   

4. ドロップダウンリスト

   <div class="form-content">
   <select name="XXXX" id="XXXX" >
   <option value="○○○○">○○○○</option>
   〜〜〜
   </select>
   <input type="hidden" name="__children[XXXX][]" value="{****}" />
   </div>
   

   ↓↓↓

   <div class="form-content">
   <select name="XXXX" id="XXXX" >
   <option value="○○○○">○○○○</option>
   〜〜〜
   </select>
   </div>
   

5. チェックボックス

   <div class="form-content">
   <span class="mwform-checkbox-field horizontal-item">
   <label >
   <input type="checkbox" name="media-genre[data][]" value="○○○○" />
   <span class="mwform-checkbox-field-text">○○○○</span>
   </label>
   </span>
   〜〜〜
   <input type="hidden" name="media-genre[separator]" value="," />
   <input type="hidden" name="__children[media-genre][]" value="{****}" />
   </div>
   

   ↓↓↓

   <div class="form-content">
   <div class="kw-checkbox-group">
   <label for="checkbox_XXXX_01" style="margin-right:8px;">
   <input type="checkbox" id="checkbox_XXXX_01" name="XXXX" value="○○○○" style="margin:4px;">○○○○</label>
   〜〜〜
   </div>
   </div>
   

6. ラジオボタン

   <div class="form-content">
   <span class="mwform-radio-field horizontal-item">
   <label >
   <input type="radio" name="XXXX" value="○○○○" checked='checked' />
   <span class="mwform-radio-field-text">○○○○</span>
   </label>
   </span>
   〜〜〜
   <input type="hidden" name="__children[XXXX][]" value="{****}" />
   </div>
   

   ↓↓↓

   <div class="form-content">
   <div class="kw-radio-group">
   <label for="radio_XXXX_01" style="margin-right:8px;">
   <input type="radio" id="radio_XXXX_01" name="XXXX" value="○○○○" style="margin:4px;">
   <span class="mwform-radio-field-text">○○○○</span>
   </label>
   〜〜〜
   </div>
   </div>
   

7. 「同意する」

   <div class="form-content"><p>○○○○</p>
   <p>
   <span class="mwform-radio-field horizontal-item">
   <label for="privacy-confirm-1">
   <input type="radio" name="privacy-confirm" value="同意する" id="privacy-confirm-1"/>
   <span class="mwform-radio-field-text">同意する</span>
   </label>
   </span>
   <input type="hidden" name="__children[privacy-confirm][]" value="{****}" />
   </p>
   </div>
   

   ↓↓↓

   <div class="form-content">○○○○
   <div class="kw-checkbox-group" rules="required">
   <label for="privacy-confirm-1" style="margin-right:8px;">
   <input type="checkbox" name="privacy-confirm" value="同意する" id="privacy-confirm-1" style="margin:4px;"/>
   <span class="mwform-radio-field-text">同意する</span>
   </label>
   </div>
   </div>
   

8. メールアドレスの再確認

   <div class="form-item">
   <div class="form-ttl must-ttl">メールアドレス<span class="must">※</span></div>
   <div class="form-content"><code><input type="email" name="your-mail" size="60" value="" data-conv-half-alphanumeric="true"/>
   </code></div>
   </div>
   <div class="form-item">
   <div class="form-ttl must-ttl">メールアドレス再確認<span class="must">※</span></div>
   <div class="form-content"><code><input type="email" name="your-mail-confirm" size="60" value="" data-conv-half-alphanumeric="true"/>
   </code></div>
   </div>
   

   ↓↓↓

   <div class="form-item">
   <div class="form-ttl must-ttl">メールアドレス<span class="must">※</span></div>
   <div class="form-content"><input type="email" name="your-mail" size="60" value="" rules="required|email"/></div>
   </div>
   <div class="form-item">
   <div class="form-ttl must-ttl">メールアドレス再確認<span class="must">※</span></div>
   <div class="form-content"><input type="email" name="your-mail-confirm" size="60" value="" rules="required|email|same:your-mail"/></div>
   </div>
   

９９．ハマりポイント

• name 属性に [] は使えないみたいで、ちょっとハマりました。

• ただ、Kwes Forms のサポートの対応が優しくて、非常に助かりました。

• どうもありがとうございました !!

😭😭😭

ＸＸ．まとめ

今回、あまり頑張りたくなかったので、MW WP Form のスタイルを使ってますが、本来であれば、改めてちゃんとしたスタイルを作成して、MW WP Form は削除する様にした方が良いと思います。

以上、ご参考になれば ♪♪♪

👋👋👋

---

• ※参考 :
  • Getting Started with Kwes Form Builder