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、リダイレクト先パスを追加する。

〜〜〜

``` ↓↓↓

```html

〜〜〜

```

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

○○○○ 〜〜〜

``` ↓↓↓

```html

○○○○ 〜〜〜

```

1. チェックボックス

○○○○ 〜〜〜

``` ↓↓↓

```html

○○○○ 〜〜〜

```

1. ラジオボタン

○○○○ 〜〜〜

``` ↓↓↓

```html

○○○○ 〜〜〜

```

1. 「同意する」

○○○○

同意する

``` ↓↓↓

```html

○○○○

同意する

```

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

メールアドレス※

メールアドレス再確認※

``` ↓↓↓

```html

メールアドレス※

メールアドレス再確認※

```

９９．ハマりポイント

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

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

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

😭😭😭

ＸＸ．まとめ

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

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

👋👋👋

---

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