Help us understand the problem. What is going on with this article?

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

0.はじめに

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

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

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

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

😫😫😫

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

で、

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

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

1.Kwes Forms のサインアップと各種設定

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

FireShot Capture 001 - Kwes Forms - A Form Service For Developers - kwes.io.png

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

  1. 移行元のページをソースコードで開き、MW WP Form で作成された問い合わせフォームの部分 (<div class="entry-content"></div>) をコピーします。
  2. 1.で作成した固定ページに、コピーしたソースコードを貼り付けます。この際、エディターは、コードエディターを選択しておきます。
  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>
    

99.ハマりポイント

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

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

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

😭😭😭

XX.まとめ

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

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

👋👋👋


kusokamayarou
鹿児島市の企業に勤めて、枕崎でテレワークしてる IT エンジニアです。 最近、自分で事業をしようとちょっとずつ動き始めました。
http://kusokamayarou.hatenablog.com/
genbasupport
建設業を支えるコミュニケーション&マネジメントのサービスを開発・運営するエンジニアチーム
http://www.genbasupport.com/
Why not register and get more from Qiita?
  1. We will deliver articles that match you
    By following users and tags, you can catch up information on technical fields that you are interested in as a whole
  2. you can read useful information later efficiently
    By "stocking" the articles you like, you can search right away