contact form 7・WP MW Formのaction urlを動的に変更する

contact form 7・WP MW Formのaction urlを動的に変更する

かなりニッチな市場、という感じの案件ですが、入力画面からクライアントが自分でフォームを作成し、フォームをsalesforceなどにつなぐ為、form actionをフォームごとに書き換える必要があり、さんざん悩んだ挙げ句、以外に簡単な方法で実現可能だったことに気がつきましたので、メモしておきます。

1.Contact Form 7を非Ajax送信にする

下記のURLを参照しました。
https://contactform7.com/ja/faq/rest-api-is-deactivated-on-my-site-can-i-use-contact-form-7/
要するに、Contact Form7のJSを読み込まないというだけの話ですが、クライアントからも送信時にajax送信だと繋げないと言われていたのですが、actionを書き換えることが出来ても、ajax送信を使っているとContact Form7側に送信されてしまうことに気が付きました。

WP MW Formの場合は、この手順は不要でした。

方法1:functions.phpを書き換える

調べたところ、add filterを利用して書き換える方法が最も一般的でした。条件分岐を入れて、作動しなかった場合、元のURLに戻す処理などを入れたパタンもありました。下記が最も基本の形です。

全てのフォームを同じaction設定にする場合はこれで良いのですが、フォームごとに変更したい場合、この方法では不便です。(ポストIDなどを渡して吐き出すactionを変更すればできそうですが・・面倒)

方法2:HTML5のformactionを利用する

Contact Form 7・WP MW Formは、フォーム作成欄にそのままhtmlを記述することができますので、送信ボタンを直接HTMLで書き足せば良いです。TML5にこんな便利が機能があったとは知りませんでした・・・WP MW Formでは、確認画面がついていますので、バリデーション用に確認ボタンはWP MW Formを動かし、送信ボタンのみ直接HTMLで記載します。

<input type="submit" formaction="http://gorgeous.jp/mailform.php">

顧客はACFを利用して作成したカスタム入力欄でページを作成していますので、フォーム側にはボタンを付けずに、投稿欄でこのボタンを吐き出す入力欄を作ればOK。この方法なら様々なフォームに応用できそうです。

おまけ:html不要で簡単にフォームを作成する

この案件は、上記にプラスしてhtmlの記述なしで、簡単に担当者がメールフォームを作成したいという要望がありました。ポイントは、1行に2つの項目を入れたい場合がある、という点で、以外にこの点の実現が難しく、多数のプラグインを試しました。

ドラッグ&ドロップでフォームが作成出来るもの。

(1)Ninja Forms
GUIとしては、Ninja Formsが無料で使える上に非常に扱いやすい。actionボタンの動的変更ができなかった。
(2)WP Forms
GUIは使いやすいが、欲しい機能(1行に2つの項目)は有料版が必要
(3)Elementer + Addon
Elementerが大掛かりなので、手軽に使えるとは言い難い。フォームだけのためにElementerを使ってもらうのは無駄か・・・

なかなかピタッと来るものがなかったことと、GUIが便利になるほどカスタマイズしにくいということもあり、これらの導入は諦めました。

Contact Form 7 Skins

Contact Form 7のフォームを簡単に作成出来るもの、無料版でも結構使えますが、入力方法に癖がある。日本語化されていないので、私が独自に日本語化しても良いのですが、Add ons(CF7 Skins Ready)を購入しないと1行に2つの項目配置は実現できません。自分でCSSを使って実現を試みましたが、吐き出されるHTMLがCSSを適用させにくい構造でした。

MW WP Form Generator

有料のAdd onsですが、買い切りなので有力です。(年度更新のない買い切りアドオンなら顧客サイトに使用しやすい)ただし、1行に2つの項目配置はできないと購入ページに書かれています。