コピペでできる、【コピペ】WordPress、Contact Form7のカスタマイズ、チェック項目に合わせて次の項目を表示させる方法の解説です。
なぜ必要か？
- 問い合わせ項目のより具体的な取得をしたい。
- フォーム自体が冗長せず短くスッキリさせたい。
- フォームが冗長だと、離脱率が高まる傾向があるので、EFO（入力フォーム最適化）視点
といったときのピッタリのカスタマイズです。
今回のフォームイメージ
動きのイメージ
Web365とは
本題のまえに、自己紹介です。
クライアントの外部・外注のWeb担当としてWebサイトを集客売上増を目的に、分析・改善・実行まで一貫体制で運用代行しております。
WordPressサイトの改善やWebマーケティングの個別講座も実施しております。
この記事でわかること
フォームカスタマイズ、チェック項目に合わせて次の項目を表示させる
チェック項目に合わせて次の項目を表示させる場合のカスタマイズ例です。
環境
- WordPress
- お問合せフォームプラグイン「contact form 7」
- カスタムの言語、jQuery（JavaScriptのライブラリー）
カスタマイズの流れ
- contact form 7でフォーム作成
- フォームのhtmlの修正、jQuery用にクラス名も付与
- 該当ページにフォームを設置
- 該当ページにjQueryを記述
それぞれ、ざっくり詳しく解説します。
contact form 7でフォーム作成
まず、プラグイン「contact form 7」でフォーム作成します。
プラグインのインストール、ある程度の使い方はご理解ある前提で割愛します。
フォームのhtmlの修正、jQuery用にクラス名も付与
フォームのhtmlは下記にコード貼ってます。
フォームの項目は
- 名前
- アドレス
- 回答１
- 回答１の選択肢によって出し分ける回答１－１
- 回答１の選択肢によって出し分ける回答２
- メッセージ
です。
３－５の部分をチェック項目選択肢次第で、jQueryで変更させるというイメージです。
フォームのhtml
<table class="table table-bordered table-striped table-contactform7"> <tr> <th><span class="title-contactform7">お名前</span><span class="required-contactform7">必須</span></th> <td>[text* your-name akismet:author watermark"山田太郎"] </td> </tr> <tr> <th><span class="required-contactform7">必須</span><span class="title-contactform7">メールアドレス</span></th> <td>[email* your-email akismet:author_email watermark"例：×××@×××.com"]</td> </tr> <tr> <th><span class="title-contactform7">回答サンプル１</span><span class="required-contactform7">必須</span></th> <td>[radio checkbox-desired-training-form id:show_info1 default:0 "サンプル１" "サンプル２" "サンプル３"]</td> </tr>
<tr> <th><span class="title-contactform7">回答サンプル１－１</span><span class="required-contactform7">必須</span></th> <td class="td-block info0"><span>１つ前の項目「希望の講義」をお選びください</span></td> <td id="info1" class="td-block info1"><strong>サンプル１</strong>[checkbox checkbox-desired-training-name-e "サンプル１ー１" "サンプル１ー２" "サンプル１ー３" ]</td> <td id="info2" class="td-block info2"><strong>サンプル２</strong>[checkbox checkbox-desired-training-name-e "サンプル２ー１" "サンプル２ー２" "サンプル２ー３" ]</td> <td id="info3" class="td-block info3"><strong>サンプル３</strong>[checkbox checkbox-desired-training-name-e "サンプル３ー１" "サンプル３ー２" "サンプル３ー３" ]</td> </tr>
<tr> <th><span class="title-contactform7">回答サンプル２</span></th> <td class="td-block"><strong>全員回答項目</strong>[checkbox checkbox-hope-at-this-point-all "回答１" "回答２" "回答３"]</td> <td id="info1" class="td-block info1-1"><strong>上記に加えてサンプル１を選択している方</strong>[checkbox checkbox-hope-at-this-point-e "サンプル１の回答１" "サンプル１の回答２" "サンプル１の回答３"]</td> <td id="info2" class="td-block info2-1"><strong>上記に加えてサンプル２を選択している方</strong>[checkbox checkbox-hope-at-this-point-w "サンプル２の回答１" "サンプル２の回答２" "サンプル２の回答３"]</td> <td id="info3" class="td-block info3-1"><strong>上記に加えてサンプル３を選択している方</strong>[checkbox checkbox-hope-at-this-point-w "サンプル３の回答１" "サンプル３の回答２" "サンプル３の回答３"]</td> </tr>
<tr> <th><span class="title-contactform7">メッセージ本文</span><span class="required-contactform7">必須</span></th> <td class="message-100">[textarea* your-message]</td> </tr>
</table>
クラス名や、ネーム名などは適宜変更してください。
該当ページにフォームを設置
フォームができたら、ブロックエディタ、クラシックエディタで若干違いますが、任意のページにショートコードで、貼ります。
このページに張ってみると下記フォームのように埋め込まれます。
該当ページにjQueryを記述
次に、jQueryのコードを書き、フォームをカスタマイズします。
やりたいことは、
- チェック項目に合わせて次の項目を表示させる
- 回答１の選択肢によって出し分ける回答
です。
■補足 特定ページにJavaScriptなどのファイルを記述する方法
その前に、
特定ページにJavaScriptなどのファイルを記述する方法は、今回事例、当方サイトの場合ですと、編集画面に下記のように記述場所（カスタムフィールド）を設けております。
こちらのカスタムフィールドの作り方は、下記コードを、functio.phpに記述しています。
//Custom JS Widgetadd_action( 'admin_menu', 'custom_js_hooks' );add_action( 'save_post', 'save_custom_js' );add_action( 'wp_head','insert_custom_js' );function custom_js_hooks() {add_meta_box( 'custom_js', 'Custom JS', 'custom_js_input', 'post', 'normal', 'high' );add_meta_box( 'custom_js', 'Custom JS', 'custom_js_input', 'page', 'normal', 'high' );}function custom_js_input() {global $post;echo '<input type="hidden" name="custom_js_noncename" id="custom_js_noncename" value="'.wp_create_nonce('custom-js').'" />';echo '<textarea name="custom_js" id="custom_js" rows="5" cols="30" style="width:100%;">'.get_post_meta($post->ID,'_custom_js',true).'</textarea>';}function save_custom_js($post_id) {if (!wp_verify_nonce($_POST['custom_js_noncename'], 'custom-js')) return $post_id;if (defined('DOING_AUTOSAVE') && DOING_AUTOSAVE) return $post_id;$custom_js = $_POST['custom_js'];update_post_meta($post_id, '_custom_js', $custom_js);}function insert_custom_js() {if ( is_page() || is_single() ) {if ( have_posts() ) : while ( have_posts() ) : the_post();echo '<script type="text/javascript">' . get_post_meta(get_the_ID(), '_custom_js', true) . '</script>';endwhile; endif;rewind_posts();}}
■補足 特定ページにCSSなどのファイルを記述する方法
続いて、フォーム自体のCSSも少しいじります。
することは、
tdを複数設けると横並びになるので、ブロックにして縦並びにする
です。
こちらもこのページだけでCSS記述する作りにします。
こちらのカスタムフィールドの作り方は、下記コードを、functio.phpに記述しています。
//Custom CSS Widgetadd_action( 'admin_menu', 'custom_css_hooks' );add_action( 'save_post', 'save_custom_css' );add_action( 'wp_head','insert_custom_css' );function custom_css_hooks() {add_meta_box( 'custom_css', 'Custom CSS', 'custom_css_input', 'post', 'normal', 'high' );add_meta_box( 'custom_css', 'Custom CSS', 'custom_css_input', 'page', 'normal', 'high' );}function custom_css_input() {global $post;echo '<input type="hidden" name="custom_css_noncename" id="custom_css_noncename" value="'.wp_create_nonce('custom-css').'" />';echo '<textarea name="custom_css" id="custom_css" rows="5" cols="30" style="width:100%;">'.get_post_meta($post->ID,'_custom_css',true).'</textarea>';}function save_custom_css($post_id) {if ( !wp_verify_nonce( $_POST['custom_css_noncename'], 'custom-css' ) ) return $post_id;if ( defined( 'DOING_AUTOSAVE' ) && DOING_AUTOSAVE) return $post_id;$custom_css = $_POST['custom_css'];update_post_meta( $post_id, '_custom_css', $custom_css );}function insert_custom_css() {if ( is_page() || is_single() ) {if ( have_posts() ) : while ( have_posts() ) : the_post();echo '<style type="text/css">' . get_post_meta(get_the_ID(), '_custom_css', true) . '</style>';endwhile; endif;rewind_posts();}}
出来たカスタムフィールドに書きを記述します。
// フォームのlistタグ(ラジオボタンやチェックボックスのインプットタグの上層にあるlist)の調整、横並びから、ブロックにし、縦並びする、マージンを左に1emつけるCSS
span.wpcf7-list-item {display: block;margin: 0 0 0 1em;}
// フォームのtdタグの調整、横並びから、ブロックにし、縦並びする、CSS.td-block{display: block;}
■フォームをカスタマイズするコード
それでは、フォームをカスタマイズするコードです。下記です。
$(function() {
// チェック前の項目の情報をグレーの字で案内するCSS$(".info0 span").css({color:"#888888",margin:"1em"});
// 最初に、チェック項目次第で表示される全チェック項目のhtmlタグを非表示する$(".info1").css("display", "none");$(".info2").css("display", "none");$(".info3").css("display", "none");$(".info1-1").css("display", "none");$(".info2-1").css("display", "none");$(".info3-1").css("display", "none");
// 回答１のラジオボタンをクリックしたら、イベントがおきる$("#show_info1").click(function(){
// チェック前の項目の情報を非表示させる$(".info0").css("display", "none");
// 回答１のラジオボタンでチェックした項目（name属性のcheckbox-desired-training-form）のバリュー（サンプル１、サンプル２，サンプル３のどれか？）を取得し、変数valueに格納するlet value = $("input[name*=checkbox-desired-training-form]:checked").val();
// 変数valueの中身次第（サンプル１、サンプル２，サンプル３のどれか？）で、次の処理をするswitch (value) {// サンプル１の場合、次の処理をする、スウィッチ構文case "サンプル１":// クラス名info1-1がついてるhtmlタグを表示させる、速さは早め$('.info1').show('fast');// クラス名info1-1がついてるhtmlタグを表示させる、速さは早め$('.info1-1').show('fast');// クラス名info2がついてるhtmlタグを非表示させる、速さは早め$('.info2').hide('fast');// クラス名info2-1がついてるhtmlタグを非表示させる、速さは早め$('.info2-1').hide('fast');$('.info3').hide('fast');$('.info3-1').hide('fast');break;case "サンプル２":$('.info1').hide('fast');$('.info1-1').hide('fast');$('.info2').show('fast');$('.info2-1').show('fast');$('.info3').hide('fast');$('.info3-1').hide('fast');break;case "サンプル３":$('.info1').hide('fast');$('.info1-1').hide('fast');$('.info2').hide('fast');$('.info2-1').hide('fast');$('.info3').show('fast');$('.info3-1').show('fast');break; }
});
});
カスタマイズ完了です。完成イメージフォームを再掲します。
以上です。
■お気軽にご相談ください
お問合せを増やすために、Webサイトを改善したい場合、まずは改善する場所は「フォーム」です。
理由は、お問合せに近いページ、機能だからです。
フォームのカスタマイズの制作対応や、作り方、コードの書き方などのレクチャーなども承っております。お気軽にご相談ください。
Webサイトの細かい改善は担当をつけて継続的に対応することをおすすめします。
Webサイトの分析提案や改善実行など相談したい方はこちらよりお気軽にご連絡ください。
Web制作+Webマーケティングの個別講座開講中
Web365はWeb担当者のスキルセットである
サイトを変更する「提案力」と「技術力」について個別指導しております
・Webで集客するための「考え方」を知りたい方
・サイトの制作改善のセオリーを知りたい方
・自身のサイトでケーススタディをしたい方
・サイトの制作改善の「技術的なスキル」を習得したい方
・分析から改善運用まで自身でしたい方
・Googleアナリティクスの設定、分析から改善施策の立案、レポート作成まで自身でしたい方
どうぞWeb365の「Webサイト制作、Webマーケティングの知識スキル習得するためのオーダーメイド個別講座」をご覧ください。
外注のWeb担当者として「制作」と「マーケティング」で単発/継続でサポートします。
Web365は貴社のWeb担当者として、制作改善運用をワンストップサポートしています
・成果にこだわるサイト制作改善をお望みの方
・自社にとって最適なweb制作会社、コンサル会社がいないとお困りの方
・分析から改善運用まで一括で依頼したい方
是非Web365までご相談ください。
【パートナー募集】
Web制作、Webコンサル、広告代理店、フリーランスの方々へのWeb改善プランの提供
Web365は同業他社/フリーランスの方々にも当方のWeb改善プランを提供し、クライアントサイトの改善プランのサポートや社内担当者へのレクチャーをサポートしています
・クライアントへのWebマーケティング、Web改善のプラン検討している方
・社内のWebマーケティングのリテラシーを高めたい方
・分析から改善運用まで一括でサポート依頼したい方
Web365は同業他社/フリーランスの方々にも当方のWeb改善プランを提供し、クライアントサイトの改善プランのサポートや社内担当者へのレクチャーをサポートしています
・クライアントへのWebマーケティング提案がしたいプラン作成をサポート
・クライアントへのWeb改善プラン実行のディレクションサポート
・社内のGoogleアナリティクスなどのレクチャー
・クライアントへのサイト分析から改善運用企画のアドバイザリーサポート
・Web系フリーランスへのWeb改善プランの提案企画書の作成サポート
・クライアントへのWeb広告運用代行
・クライアントへの計測ツール設定代行（Googleアナリティクス、eコマース、ヒートマップClarityなど）
まずは、お気軽にMTGでれきばと思いますので、Web365までご相談ください。
