やりたいこと：フォーム項目をクライアントに更新管理させたい
個人的によく使う手法をご紹介。
WordPress案件でよくあるのが、
- 年に何回かだけあるセミナーや講座などのイベント（指定日付）の予約をContactForm7でさせたい
など、フォーム項目が変動的でかつ、それをこまめに更新管理していく必要があるというケースがかなり多くあります。
しかし、一般人であるクライアントがContactForm7のフォーム項目を編集するのはかなり難しいです。
かといって毎回都度制作会社に更新を依頼するのも、クライアントにしてみたらせっかくのCMSなのにコスパ面で最悪・不親切ですよね。
そこで、私がよくやるカンタンな解決策としては、該当する情報を、カスタムフィールド（ACFプラグインなど使用して）でフォーム項目をクライアントに更新管理させる方法です。
そしてこの項目を、リンクを通してContactForm7のテキスト空項目へ、リンクで値を受け渡せるようになると非常に便利。
＜今年もセミナー開催中！＞
「1月10日13時セミナー」←リンクA
「2月20日13時セミナー」←リンクB
「3月15日13時セミナー」←リンクC
↑例えば、このようなセミナーリンクがあったとします。
こまめに変わるであろうセミナー日付をカスタムフィールドで管理してもらい、リンクのクリックを通じてフォームへ値を渡せたら良いですよね。
↓↓↓↓
希望日時のリンクを押すとフォームへ遷移し、自動的にreadonlyの＜inut type=”text”＞に渡されるので、ユーザーの希望日付の申込みが可能になります。
…とこんなイメージです。
この方法だと、クライアント側でContactForm7を管理していく必要はないので、運用はとっても簡単。
そして、これを応用すると、様々な予約フォームや注文フォームとして扱うこともでき便利です♪
以下に、方法を紹介します。（カスタムフィールド設定部分は除きます）
別ページからのリンクならGET/POSTで渡す
HTML側の設定
別ページから値を渡す場合は、超・カンタン！
ContactForm7のGET/POSTの仕組みを利用するだけです。
<a href="href="/form?check=●月●日▲時セミナー#midashi2">?check=の前は、飛ばしたいフォームのURLを書いてください。
?check=の後は、渡したい値を記入します。
最後に#midashi2とアンカーをつけているのは、該当する部分に飛ばしたいためです。
不要な方は削除して問題ありません。
ContactForm7側の設定
[text* check class:disabled default:get readonly]とこんな感じです。
default:getは必須ですので、必ず設定してください。
readonlyを指定しておくと、ユーザーが勝手に編集できなくなるため、間違えて消されてしまったり、無鉄砲な内容を入れられないための安心のおまじないです。入れたほうが良いと思います。
なお、個人的にclass:disabledというclassをつけているのは、見た目に「ここは編集できない」といったグレーアウト感をCSSで別途出すために設定してあります。この指定はお好みでどうぞ。
同ページ内ならJavaScriptで渡す
フォームとリンクが同ページ内にあると、前項のGET/POST方法で値を渡したいリンクを押すと、画面全体が再読み込みされてしまい、ユーザーが途中まで入力していた他の入力項目が消えてしまう恐れがあります。
これは、ユーザーにとってかなりイライラの種になってしまい、コンバージョンに繋がらない原因ともなり得ます。
そのため、同ページの場合はなるべくJavaScriptで渡すのをおすすめします。
HTML側の設定
ページのヘッダーなどに以下を追加
<script>
(function() {
var links = document.getElementsByClassName("myLink"); //リンクにつけるclass
var inputElement = document.getElementById("myInput"); //渡し先につけるID
var anchorElement = document.getElementById("midashi"); // アンカーに飛ぶ場合
for (var i = 0; i < links.length; i++) {
links[i].addEventListener("click", function(event) {
event.preventDefault();
var inputValue = this.getAttribute("data-value");
inputElement.value = inputValue;
anchorElement.scrollIntoView({ behavior: 'smooth' }); // アンカーにスクロール
});
}
})();
</script>↑アンカーに飛ばすのが不要な方は、該当する行の値を「空」にしてください。
そして値を渡すHTMLリンクの指定は下記のようになります。
<a href="#" class="myLink" data-value="1月10日13時セミナー">1月10日13時セミナー</a>
<a href="#" class="myLink" data-value="2月20日13時セミナー">2月20日13時セミナー</a>
<a href="#" class="myLink" data-value="3月15日13時セミナー">3月15日13時セミナー</a>
data-valueの値が渡されます。
ここの部分をカスタムフィールドで出力されるようにテンプレートやショートコード等で自動化しておくと、クライアントは簡単なカスタムフィールドの更新管理だけで済みます♪
下記のページにて、繰り返しフィールドをブロックエディタ内にショートコードで出力する方法がありますので参考までにご覧ください。
ContactForm側の設定
[text* check class:disabled id:myInput readonly]id:myInputを必ず追加してください。
class=”myLink”のdata-valueがmyInputというIDのテキスト項目に受け渡されるスクリプトなためです。
この記事を書いた人
パリスタデザイン事務所のWebデザイナー。
得意分野は、使い勝手についてきめ細やかに考えられたCMS設計・構築。
3児の母でもあります。ゲーム・パソコンが趣味。
好きが高じてEC事業部でPCや自作PCパーツ・ゲーミング関連グッズの販売も行っています。
お仕事のご依頼はこちらまで
パリスタデザイン事務所は、WordPressの構築/カスタマイズを得意としています。
Web制作に関するお仕事は、パリスタデザイン事務所までお気軽にお問い合わせください。
