トップ > ウェブ制作 > WordPress > 【コピペOK】ContactForm7を企業サイトみたいな感じでカスタマイズする方法

【コピペOK】ContactForm7を企業サイトみたいな感じでカスタマイズする方法

 
最新更新日：2018年11月25日(日曜日)
公開日：2014年1月9日(木曜日)
Pocket
このエントリーをはてなブックマークに追加

・Ajax3をGoogleCodeからGitHubに変更しました
・IEでのtableのwidth不具合を修正いたしました

contactform7

この記事はbootstrap4導入を前提に記載しています。bootstrap4を導入後、お試し下さい。

ContactForm7は言わずと知れたWordPressで1番有名なプラグインです。

カスタマイズしやすいように、まったく装飾がないのもContactForm7の良いところです。

ただカスタマイズを前提にしてあるため、いちいちフォームをデザインするのは面倒になってきました。

今回は日頃からコピーしているチートシートをお披露目します。

最後まで読んでいただくと↓↓↓こんな企業サイトっぽいメールフォームが出来ます。

    必須お名前

    必須メールアドレス

    必須郵便番号

    必須都道府県

    必須ご住所

    必須お電話番号

    必須ご相談内容

    必須メッセージ本文

    このフォームのポイント

    • 入力しやすいデザイン
    • AjaxZipを実装して郵便番号から自動住所入力
    • スマホ対応(レスポンシブに対応しています)

    html,cssチートシート

    まずContactform7をインストールして、html部分に

    以下のTextをtextに変換してご使用ください。

    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    13
    14
    15
    16
    17
    18
    19
    20
    21
    22
    23
    24
    25
    26
    27
    28
    29
    30
    31
    32
    33
    34
    35
    <table class="table table-bordered table-striped table-contactform7">
        <tr>
            <th><span class="required-contactform7">必須</span><span class="title-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="required-contactform7">必須</span><span class="title-contactform7">郵便番号</span></th>
            <td>[Text* zip id:zip watermark"例：840-0015"] </td>
        </tr>
        <tr>
            <th><span class="required-contactform7">必須</span><span class="title-contactform7">都道府県</span></th>
            <td>[Text* pref id:pref watermark"例：佐賀県"]</td>
        </tr>
        <tr>
            <th><span class="required-contactform7">必須</span><span class="title-contactform7">ご住所</span></th>
            <td class="address-100">[Text* addr id:addr watermark"例：佐賀市木原２丁目２５-１０ UTビル２F東号室"]</td>
        </tr>
        <tr>
            <th><span class="required-contactform7">必須</span><span class="title-contactform7">お電話番号</span></th>
            <td>[Text* text-17 watermark"例：0952-60-6240"]</td>
        </tr>
        <tr>
            <th><span class="required-contactform7">必須</span><span class="title-contactform7">ご相談内容</span></th>
            <td>[radio radio-256 use_label_element "月額3,000円HP" "月額9,800円HP" "ウェブ広告代行" "その他のご相談"]</td>
        </tr>
        <tr>
            <th><span class="required-contactform7">必須</span><span class="title-contactform7">メッセージ本文</span></th>
            <td class="message-100">[textarea* your-message watermark"業種・目的・デザインイメージなど"]</td>
        </tr>
    </table>
    <p class="text-xs-center">[submit class:btn class:btn-success class:btn-lg "送信する"]</p>

    そしてstyle.cssに

    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    13
    14
    15
    16
    17
    18
    19
    20
    21
    22
    23
    24
    25
    26
    27
    28
    29
    30
    31
    32
    33
    34
    35
    36
    37
    38
    39
    40
    41
    42
    43
    44
    45
    46
    47
    48
    49
    50
    51
    52
    53
    54
    55
    56
    57
    58
    59
    60
    61
    62
    63
    64
    65
    66
    67
    68
    69
    70
    71
    72
    73
    /***** コンタクトフォーム *****/
    .table-contactform7{
      overflow: hidden;
    table-layout: fixed;
    }
     
    .required-contactform7{
      padding: 5px;
      background: #DE8686;
      color: #fff;
      border-radius: 3px;
      margin-right: 3px;
    }
     
    .unrequired-contactform7{
      padding: 5px;
      background: #BDBDBD;
      color: #fff;
      border-radius: 3px;
      margin-right: 3px;
    }
     
    .table-contactform7 th{
      font-weight:bold;
    }
     
    .table-contactform7 input,
    .table-contactform7 textarea{
      max-width: 90% !important;
      margin: 5px 10px 10px 5px;
    }
     
    .address-100 input{
      max-width: 90% !important;
      margin: 5px 10px 10px 5px;
    }
     
    .message-100 textarea{
      width: 100%;
      margin: 5px 10px 10px 5px;
    }
     
    @media screen and (min-width: 900px){
      .table-contactform7 th{
        width:28%;
      }
        }
         
    @media screen and (max-width: 900px){
    .table-contactform7{
      display:block;
    }    
           
      .table-contactform7 tbody,
      .table-contactform7 tr{
        display: block;
        width: 100%;
      }
      .table-contactform7 th{
      width:100%;
      display:block;
      margin: 0 auto;
      border:none;
    }
    .table-contactform7 td{
      display: list-item;
      list-style-type:none;
      margin:0;
      padding:0;
      width: 100%;
      border-top: none !important;
    }
    }

    これでデザインは完成です。

    メッセージを受け取るコードは

    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    13
    14
    差出人: [your-name] <[your-email]>
    題名: ホームページからのお問い合わせ
     
    お電話番号
    [text-17]
     
    郵便番号/ご住所
    [zip][pref][addr]
     
    ご相談内容
    [radio-256]
     
    メッセージ本文:
    [your-message]

    こんな感じで。

    Ajaxzipの自動入力を実装する方法

    これはつまづく方がいると思いますが、

    1
    2
    3
    4
    5
    6
    7
    8
    9
    <!-- ajaxzip -->
    <script src="https://ajaxzip3.github.io/ajaxzip3.js" charset="UTF-8"></script>
    <script type="text/javascript">
    jQuery(function(){
      jQuery('#zip').keyup(function(event){
        AjaxZip3.zip2addr(this,'','pref','addr');
      })
    })
    </script>

    をheader.phpに挿入します。駄目だったらfooter.phpの＜/body＞直前にいれてみてください。

     

    地方で集客するために知っておくべき27の集客方法

    色んな広告を試したけど、さんざんな結果だった。どうやって集客していいか分からないという方のために書きました。

    実は業態・業種によって集客方法は全然違います。例えば以下の法則を知って居ましたか？

    • LINE@の運用次第で反応率◯％以上になる
    • FAXDMという古典的な方法が通用する業界がある
    • 集客におけるホームページの役割って？

    本書では、全業種の集客経験を元に実際の反応率を公開しています。
    是非無料でダウンロードして、今後の集客にご活用ください。

    Ebookを受け取る

    関連記事