ContactForm7を使用してメールを送信する際に、お問い合わせ内容に応じて自動的に計算を行なうフォームを作成しました。

プラグインの追加

ContactForm7は標準でhiddenのフォームを作成できないのでプラグインをインストールする必要があります。

Contact Form 7 Modules

こちらのプラグインをインストールするだけでhiddenのフォームを使用できるようになります。

ContactForm7のidとname属性

ContactForm7は[text text-1]という記述を基本として引数に必要なオプションを追加していきます。
例えばテキストフォームにクラスをつけたい場合は[text text-1 class:text_class]という感じです。
IDならば[text text-1 id:text_id]です。

上記の記述をすることで<input type=”text” name=”text-1″ id=”text_id”>というフォームが生成されます。

このテキストフォームに何か値を挿入したいときはIDを取得し値を代入します。
下記のコードではページの読み込み直後にtext-1に100が挿入されます。

window.onload = function insertForm(){
　　　　document.getElementById("text_id").value = 100;
}

Javascriptはclassやnameでもフォームを取得できますが、classは他とかぶっている可能性があるため、nameはフォーム名を指定しなければいけないため今回は使用しておりません。
ContactForm7ではフォーム名を標準で指定できません。

CheckBoxにidをつけることができない問題

[checkbox checkbox-1 id:checkbox_1]と記述してもチェックボックス自体にidは付与されずチェックボックスを囲んでいる要素にidがつきます。

<span class="wpcf7-form-control-wrap checkbox-1">
<span class="wpcf7-form-control wpcf7-checkbox" id="checkbox_1">
<span class="wpcf7-list-item first"><input type="checkbox" name="checkbox-1[]" value="1"> <span class="wpcf7-list-item-label">1</span></span>
<span class="wpcf7-list-item"><input type="checkbox" name="checkbox-1[]" value="2"> <span class="wpcf7-list-item-label">2</span></span>
<span class="wpcf7-list-item last"><input type="checkbox" name="checkbox-1[]" value="3"> <span class="wpcf7-list-item-label">3</span></span>
</span>
</span>

これでは上記のJavascriptの方法でフォームを取得できません。
その場合は多少強引ですが手作業で対応しましょう。[checkbox checkbox-1 id:checkbox_1]の記述で出力されたフォームをコンタクトフォーム7に直書きします。
そして<input type=”checkbox” name=”checkbox-1[]” value=”1″ id=”checkbox_1″>というようにidを追記します。

これでidをつけることができたのでJavascriptで操作できます。

直書きするとメールで送信する際に空白とならない問題

直書きした項目をContactForm7のメールタブで送信されるメールテンプレートの一部とすることはできますが、値が空白であった場合にメールに[checkbox-1]の様にそのまま送信されてしまいます。

そうならないためにhiddenを使用します。

[hidden hidden-259 id:checkbox_1_hidden]というフォームを作成し、このフォームに直書きしたフォームの内容を挿入してからメールで送信します。

フォームにonChageなどのイベントを記述

例えばinput/textフォームに文字が挿入された時に呼び出したい関数がある場合、<input type=”text” onKeyup=”insertForm()”>の様に記述しますがContactForm7ではそれができません。

したがって今回もcheckboxの時と同じようにContactForm7に直書きしてからhiddenフォームに値を挿入し、メールで送信するという処理が必要です。

 jQueryを使用すればもっと簡単に？

jQueryを使用して、JavaScript側から全て呼び出すことができればhiddenなどを使用せずにフォームの値を動的に変更することができます。

jQuery('#text_1').keyup(function(event){
ShowLength('test', jQuery(this).val());
});