WordPressでホームページを作るには

【コピペ】WordPress、Contact Form7のカスタマイズ、作成する方法

投稿日:2022年1月21日 更新日:

コピペでできる、【コピペ】WordPress、Contact Form7のカスタマイズ、チェック項目に合わせて次の項目を表示させる方法の解説です。

なぜ必要か?

  • 問い合わせ項目のより具体的な取得をしたい。
  • フォーム自体が冗長せず短くスッキリさせたい。
  • フォームが冗長だと、離脱率が高まる傾向があるので、EFO(入力フォーム最適化)視点

といったときのピッタリのカスタマイズです。

今回のフォームイメージ

【コピペ】WordPress、Contact Form7のカスタマイズ、チェック項目に合わせて次の項目を表示させる方法_07

動きのイメージ

Web365とは

本題のまえに、自己紹介です。
クライアントの外部・外注のWeb担当としてWebサイトを集客売上増を目的に、分析・改善・実行まで一貫体制で運用代行しております。

Web365の詳細

WordPressサイトの改善やWebマーケティングの個別講座も実施しております。

個別講座

フォームカスタマイズ、チェック項目に合わせて次の項目を表示させる

チェック項目に合わせて次の項目を表示させる場合のカスタマイズ例です。

環境

  • WordPress
  • お問合せフォームプラグイン「contact form 7」
  • カスタムの言語、jQuery(JavaScriptのライブラリー)

カスタマイズの流れ

  • contact form 7でフォーム作成
  • フォームのhtmlの修正、jQuery用にクラス名も付与
  • 該当ページにフォームを設置
  • 該当ページにjQueryを記述

それぞれ、ざっくり詳しく解説します。

    contact form 7でフォーム作成

    まず、プラグイン「contact form 7」でフォーム作成します。

    プラグインのインストール、ある程度の使い方はご理解ある前提で割愛します。

    フォームのhtmlの修正、jQuery用にクラス名も付与

    フォームのhtmlは下記にコード貼ってます。

    フォームの項目は

    1. 名前
    2. アドレス
    3. 回答1
    4. 回答1の選択肢によって出し分ける回答1-1
    5. 回答1の選択肢によって出し分ける回答2
    6. メッセージ

    です。

    3-5の部分をチェック項目選択肢次第で、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">回答サンプル1</span><span class="required-contactform7">必須</span></th>
    <td>[radio checkbox-desired-training-form id:show_info1 default:0 "サンプル1" "サンプル2" "サンプル3"]</td>
    </tr>

    <tr>
    <th><span class="title-contactform7">回答サンプル1-1</span><span class="required-contactform7">必須</span></th>
    <td class="td-block info0"><span>1つ前の項目「希望の講義」をお選びください</span></td>
    <td id="info1" class="td-block info1"><strong>サンプル1</strong>[checkbox checkbox-desired-training-name-e "サンプル1ー1" "サンプル1ー2" "サンプル1ー3" ]</td>
    <td id="info2" class="td-block info2"><strong>サンプル2</strong>[checkbox checkbox-desired-training-name-e "サンプル2ー1" "サンプル2ー2" "サンプル2ー3" ]</td>
    <td id="info3" class="td-block info3"><strong>サンプル3</strong>[checkbox checkbox-desired-training-name-e "サンプル3ー1" "サンプル3ー2" "サンプル3ー3" ]</td>
    </tr>

    <tr>
    <th><span class="title-contactform7">回答サンプル2</span></th>
    <td class="td-block"><strong>全員回答項目</strong>[checkbox checkbox-hope-at-this-point-all "回答1" "回答2" "回答3"]</td>
    <td id="info1" class="td-block info1-1"><strong>上記に加えてサンプル1を選択している方</strong>[checkbox checkbox-hope-at-this-point-e "サンプル1の回答1" "サンプル1の回答2" "サンプル1の回答3"]</td>
    <td id="info2" class="td-block info2-1"><strong>上記に加えてサンプル2を選択している方</strong>[checkbox checkbox-hope-at-this-point-w "サンプル2の回答1" "サンプル2の回答2" "サンプル2の回答3"]</td>
    <td id="info3" class="td-block info3-1"><strong>上記に加えてサンプル3を選択している方</strong>[checkbox checkbox-hope-at-this-point-w "サンプル3の回答1" "サンプル3の回答2" "サンプル3の回答3"]</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>

    クラス名や、ネーム名などは適宜変更してください。

    該当ページにフォームを設置

    フォームができたら、ブロックエディタ、クラシックエディタで若干違いますが、任意のページにショートコードで、貼ります。

    【コピペ】WordPress、Contact Form7のカスタマイズ、チェック項目に合わせて次の項目を表示させる方法_01

    このページに張ってみると下記フォームのように埋め込まれます。

    【コピペ】WordPress、Contact Form7のカスタマイズ、チェック項目に合わせて次の項目を表示させる方法_07

    該当ページにjQueryを記述

    次に、jQueryのコードを書き、フォームをカスタマイズします。

    やりたいことは、

    • チェック項目に合わせて次の項目を表示させる
    • 回答1の選択肢によって出し分ける回答

    です。

    ■補足 特定ページにJavaScriptなどのファイルを記述する方法

    その前に、

    特定ページにJavaScriptなどのファイルを記述する方法は、今回事例、当方サイトの場合ですと、編集画面に下記のように記述場所(カスタムフィールド)を設けております。

     【コピペ】WordPress、Contact Form7のカスタマイズ、チェック項目に合わせて次の項目を表示させる方法_03

    こちらのカスタムフィールドの作り方は、下記コードを、functio.phpに記述しています。

    //Custom JS Widget
    add_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記述する作りにします。

    【コピペ】WordPress、Contact Form7のカスタマイズ、チェック項目に合わせて次の項目を表示させる方法_06

    こちらのカスタムフィールドの作り方は、下記コードを、functio.phpに記述しています。

    //Custom CSS Widget
    add_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");

    // 回答1のラジオボタンをクリックしたら、イベントがおきる
    $("#show_info1").click(function(){

    // チェック前の項目の情報を非表示させる
    $(".info0").css("display", "none");

    // 回答1のラジオボタンでチェックした項目(name属性のcheckbox-desired-training-form)のバリュー(サンプル1、サンプル2,サンプル3のどれか?)を取得し、変数valueに格納する
    let value = $("input[name*=checkbox-desired-training-form]:checked").val();

    // 変数valueの中身次第(サンプル1、サンプル2,サンプル3のどれか?)で、次の処理をする
    switch (value) {
    // サンプル1の場合、次の処理をする、スウィッチ構文
    case "サンプル1":
    // クラス名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 "サンプル2":
    $('.info1').hide('fast');
    $('.info1-1').hide('fast');
    $('.info2').show('fast');
    $('.info2-1').show('fast');
    $('.info3').hide('fast');
    $('.info3-1').hide('fast');
    break;
    case "サンプル3":
    $('.info1').hide('fast');
    $('.info1-1').hide('fast');
    $('.info2').hide('fast');
    $('.info2-1').hide('fast');
    $('.info3').show('fast');
    $('.info3-1').show('fast');
    break;
    }

    });

    });

    カスタマイズ完了です。完成イメージフォームを再掲します。

    お名前必須
    必須メールアドレス
    回答サンプル1必須 サンプル1サンプル2サンプル3
    回答サンプル1-1必須 1つ前の項目「回答サンプル」をお選びください サンプル1サンプル1ー1サンプル1ー2サンプル1ー3 サンプル2サンプル2ー1サンプル2ー2サンプル2ー3 サンプル3サンプル3ー1サンプル3ー2サンプル3ー3
    回答サンプル2 全員回答項目回答1回答2回答3 上記に加えてサンプル1を選択している方サンプル1の回答1サンプル1の回答2サンプル1の回答3 上記に加えてサンプル2を選択している方サンプル2の回答1サンプル2の回答2サンプル2の回答3 上記に加えてサンプル3を選択している方サンプル3の回答1サンプル3の回答2サンプル3の回答3
    メッセージ本文必須

    以上です。

      ■お気軽にご相談ください

      お問合せを増やすために、Webサイトを改善したい場合、まずは改善する場所は「フォーム」です。

      理由は、お問合せに近いページ、機能だからです。

      フォームのカスタマイズの制作対応や、作り方、コードの書き方などのレクチャーなども承っております。お気軽にご相談ください。

      Webサイトの細かい改善は担当をつけて継続的に対応することをおすすめします。
      Webサイトの分析提案や改善実行など相談したい方はこちらよりお気軽にご連絡ください。

      必須お名前
      必須メールアドレス
      必須ご相談内容
      必須メッセージ本文






      Web制作+Webマーケティングの個別講座開講中

      Web365はWeb担当者のスキルセットである
      サイトを変更する「提案力」と「技術力」について個別指導しております


      ・Webで集客するための「考え方」を知りたい方
      ・サイトの制作改善のセオリーを知りたい方
      ・自身のサイトでケーススタディをしたい方
      ・サイトの制作改善の「技術的なスキル」を習得したい方
      ・分析から改善運用まで自身でしたい方


      どうぞWeb365の「自社のWebサイトを自身で作りたい、改善したい人のオーダーメイド個別講座」をご覧ください。






      外注のWeb担当者として「制作」と「マーケティング」で単発/継続でサポートします。

      Web365は貴社のWeb担当者として、制作改善運用をワンストップサポートしています

      ・成果にこだわるサイト制作改善をお望みの方
      ・良いweb制作会社、コンサル会社がいないとお困りの方
      ・分析から改善運用まで一括で依頼したい方


      是非Web365までご相談ください。

      WordPressでホームページを作るには

      執筆者:

      関連記事

      イメージ01_ヒートマップの分析改善方法

      【事例】ヒートマップ分析でWebサイト改善、1ヶ月で有効熟読率が4.5倍向上した分析と改善方法を解説

      Webサイトの改善で、ユーザーの閲覧具合をみて、改善をはかりたいとき、「ヒートマップ」での分析はひとつの選択肢です。 今回は、ヒートマップでWebサイト改善、1ヶ月で有効熟読率が4.5倍向上した分析と …

      【コピペ】WordPress、プラグインなしで、関連記事を同じか指定したカテゴリーで作成する方法

      【コピペ】WordPress、プラグインなしで、関連記事を同じカテゴリーか、指定したカテゴリーで作成する方法

      【コピペ】WordPress、プラグインなしで、関連記事を同じカテゴリーか、指定したカテゴリーで作成する方法の解説です。   【クライアント対応した実例】 必要性としては、 同じカテゴリーの記事を関連 …

      webサイトの問合せを増やすためのサイト運用方法の解説

      【資料配布】Webサイトの問合せを増やすための運用・改善方法の解説

      【5分で読めます】 自身のビジネス用のWebサイトを作る上での最終的な目標は、2つ、 問い合わせを増や 購入を増やす がゴールではないでしょうか。 最終的なゴールの数字を増やす上でサイトを、下記の2つ …

      【提案事例】運営リソースが割けない場合のECサイトの展開案

      【5分で読めます】 クライアント事例として、ECサイト(eコマース、つまりオンラインショップ)を開設したいけれど「運営リソースがほぼない」条件での展開案ついての提案事例を解説します。   Web365 …

      【完全網羅】Word Pressの保守運用・セキュリティ59の対策一覧

      Word Pressのセキュリティ対策の一覧と情報収集ソースを59ほどリストアップしました。自身のサイトのセキュリティ対策にご活用ください。   Web365とは Web365は、外部Web担当者とし …

      aタグカット、下層要素残し、jQueryでの方法

      【コピペ】aタグだけをカットして、その下層の要素は残したいときのjQueryで対応方法

      aタグだけをカットして、その下層の要素は残したいときのjQuerで対応方法です。 用途としては、 ・aタグが勝手に挿入されていたバグ などで取り急ぎ対応しました。 Web365とは 本題のまえに、自己 …

      【解説】WordPressの保守、バックアップのプラグイン BackWPupをいれておこう

      【解説】WordPressの保守、バックアップのプラグイン BackWPupのいれ方、バックアップ方法の一例を解説します。 クライアントサイトで対応例です。   Web365とは Web365は、外部 …