0.はじめに
AWS EC2 AMIMOTO で WordPress サイトを構築して、
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 を利用することにします。
1.Kwes Forms のサインアップと各種設定
いったん、こちらの記事の手順通りに進めます。
2.MW WP Form で作成した問い合わせフォームの内容を固定ページへ反映
- 移行元のページをソースコードで開き、MW WP Form で作成された問い合わせフォームの部分 (
<div class="entry-content">
〜</div>
) をコピーします。 - 1.で作成した固定ページに、コピーしたソースコードを貼り付けます。この際、エディターは、コードエディターを選択しておきます。
-
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 -->
-
ドロップダウンリスト
<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>
-
チェックボックス
<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>
-
ラジオボタン
<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>
-
「同意する」
<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>
-
メールアドレスの再確認
<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>
99.ハマりポイント
name 属性に
[]
は使えないみたいで、ちょっとハマりました。ただ、Kwes Forms のサポートの対応が優しくて、非常に助かりました。
どうもありがとうございました !!
😭😭😭
XX.まとめ
今回、あまり頑張りたくなかったので、MW WP Form のスタイルを使ってますが、本来であれば、改めてちゃんとしたスタイルを作成して、MW WP Form は削除する様にした方が良いと思います。
以上、ご参考になれば ♪♪♪
👋👋👋