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

# ０．はじめに

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

* [AMIMOTO AMI を使って、WordPress を立ち上げて、接続先を RDS に変更してみる \- Qiita](https://qiita.com/kusokamayarou/items/58d550b82b960c321c3a)

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

* [SSL 化済みの WordPress サイトに CloudFront を適用してみる \- Qiita](https://qiita.com/kusokamayarou/items/21e4bcdaa7c8dd8523ab)
* [CloudFront 適用済みの WordPress サイトに ALB を適用してみる \- Qiita](https://qiita.com/kusokamayarou/items/1229bed12462eee48e68)
* [CloudFront 適用済みの WordPress サイトに ALB を適用後、ALB \- WordPress 間を HTTP\(80番\) で通信させてみる \- Qiita](https://qiita.com/kusokamayarou/items/edffa0f1159f60a2ce82)
* [CloudFront 適用済みの WordPress サイトに AWS WAF も適用してみる \- Qiita](https://qiita.com/kusokamayarou/items/099a97fc0edc493e22fb)
* [CloudFront と AWS WAF 適用済みの WordPress \(AMIMOTO\) サイトで、ウェブモニタリング \(Site24x7 & StatusCake\) からのポーリングをブロックさせない様にしてみる \- Qiita](https://qiita.com/kusokamayarou/items/9b1093c922b6642fc26f)

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

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

😫😫😫

「ええーぃ、[Shifter](https://go.getshifter.io) へ移行しちゃろうかい！」と思ってですね。

で、

[WordPress](https://ja.wordpress.org/) を [Shifter](https://go.getshifter.io) へ移行する前に、問い合わせページ を 固定ページ へ移行してみました。

今回、[MW WP Form](https://ja.wordpress.org/plugins/mw-wp-form/) で作成した問い合わせフォームを移行するにあたり、ページは固定ページへ移行し、問い合わせの機能は [Kwes Forms](https://kwes.io/) を利用することにします。

# １．[Kwes Forms](https://kwes.io/) のサインアップと各種設定

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

* [Creating contact form with Kwes \| Shifter Documentation](https://support.getshifter.io/en/articles/3852805-creating-contact-form-with-kwes)

![FireShot Capture 001 - Kwes Forms - A Form Service For Developers - kwes.io.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/161939/4b2936c7-6581-73bf-943c-547bef27a85f.png)

# ２．[MW WP Form](https://ja.wordpress.org/plugins/mw-wp-form/) で作成した問い合わせフォームの内容を固定ページへ反映

1. 移行元のページをソースコードで開き、[MW WP Form](https://ja.wordpress.org/plugins/mw-wp-form/) で作成された問い合わせフォームの部分 (`<div class="entry-content">`〜`</div>`) をコピーします。
    * 参考 : [ページのソースの取得方法を教えてください。](https://faq.cybozu.info/alphascope/cybozu/web/office10/Detail.aspx?id=2143&isCrawler=1)
1. １．で作成した固定ページに、コピーしたソースコードを貼り付けます。この際、エディターは、コードエディターを選択しておきます。
    * 参考 : [WordPressで固定ページを作成する方法【超初心者向け】 \| TechAcademyマガジン](https://techacademy.jp/magazine/1895)
1. [Kwes Forms](https://kwes.io/) の kwes-form タグ、Action Endpoint URL、リダイレクト先パスを追加する。

    ```html
<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 -->
```
↓↓↓

    ```html
<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 -->
```

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

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

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

1. チェックボックス

    ```html
<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>
```
↓↓↓

    ```html
<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>
```

1. ラジオボタン

    ```html
<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>
```
↓↓↓

    ```html
<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>
```

1. 「同意する」

    ```html
<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>
```
↓↓↓

    ```html
<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>
```

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

    ```html
<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>
```
↓↓↓

    ```html
<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](https://kwes.io/) のサポートの対応が優しくて、非常に助かりました。

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

😭😭😭

# ＸＸ．まとめ

今回、あまり頑張りたくなかったので、[MW WP Form](https://ja.wordpress.org/plugins/mw-wp-form/) のスタイルを使ってますが、本来であれば、改めてちゃんとしたスタイルを作成して、[MW WP Form](https://ja.wordpress.org/plugins/mw-wp-form/) は削除する様にした方が良いと思います。

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

👋👋👋

---

* ※参考 :
    * [Getting Started with Kwes Form Builder](https://kwes.io/docs/getting-started)