HikoPro Blog

IT・テクノロジーで生活と仕事をもっと豊かに

【コピペOK】WordPressのお問い合わせフォーム カスタマイズデザイン集【Contact Form 7】

約14分
【コピペOK】WordPressのお問い合わせフォーム カスタマイズデザイン集【Contact Form 7】
HikoPro
HikoPro

こんにちは!大学生クリエイターでWebライター|エンジニア|YouTuberとして活動していますHikoProです! 最近は「若者のチャレンジを後押しするメディア」Z大学の編集長をしています!

WordPressのお問い合わせフォームにContact Form 7を使っているが、見た目がシンプルすぎておしゃれに、カッコよくカスタマイズしたい!

プログラミング知識がないので、できればコピペでカスタマイズしたい!

今回はWordPressでサイトを運営している方でプログラミング知識がない方向けに、コピペOKのお問い合わせフォームのカスタマイズ例をご紹介します。

WordPressの定番お問い合わせフォームプラグインのContact Form 7は簡単にフォームを作れますが、デザインをカスタマイズしないと、とてもシンプルすぎてサイトの外観を壊してしまいます。

今回はサイトの雰囲気にあったカスタマイズ例を3つご紹介します。

  • どんなサイトでも万能なデザイン
  • コーポレートサイト用のきっちりとしたデザイン
  • 可愛いポップなデザイン

この3つが幅広く対応できると思うので、この3つのデザインにします。

こんな方におすすめ
  • WordPressのお問い合わせフォームをカスタマイズしたい方
  • コピペでサクッとカスタマイズしたい方

Contact Form 7をインストールする

まず始めにWordPressにContact Form 7プラグインをインストールしましょう。

Contact Fromのインストールから基本的な使い方はこちらの記事を参考にしてください。

→ 【Contact Form 7完全ガイド】WordPressサイトにお問い合わせフォームを作る方法【初心者向け】

編集する箇所

お問い合わせフォームをカスタマイズする場合は、「Conatct Form 7」の編集画面と、投稿管理画面の「カスタムCSS」この2つを編集する必要があります。

あとでHTMLのカスタムコードをご紹介しますが、コードを貼り付ける場所は

  1. お問い合わせをクリック
  2. 編集したいお問い合わせフォームを選択
  3. フォームをクリック
  4. 下のボックスに貼り付ける
  5. 保存を忘れないように!

このような手順でOKです。

カスタムCSSコードは、、、

  1. 固定ページ
  2. お問い合わせフォームを設置しているページ
  3. 下にスクロール
  4. カスタムCSSのボックスに貼り付け
  5. 更新をお忘れなく!

この手順で貼り付けてみてください!

これだけでカスタマイズができます!

どんなサイトでも万能なデザイン

    氏名必須
    電話番号必須
    Email必須
    お問い合わせ内容

    まずはこのようなシンプルなお問い合わせフォームを作ってみたいと思います。

    • 表組みのレイアウトで分かりやすい
    • 必須項目が一目でわかる
    • どんなサイトにも合う優しい色合い(色は変更可能)

    ↓このコードを編集ページの「フォーム」に貼り付けてください↓

    <table>
        <tbody>
            <tr>
               <th>
                 <div>氏名<span class="need">必須</span></div>
                </th>
                <td>
                  [text* username id:name  placeholder "例)山田 太郎"]
                </td>
             </tr>
             <tr>
                <th>
                  <div>住所<span class="need">必須</span></div>
                </th>
                <td>
                  [text* street_address id:street_address  placeholder "例)東京都品川区"]
                </td>
             </tr>
              <tr>
                <th>
                  <div>電話番号<span class="need">必須</span></div>
                </th>
                <td>
                  [tel* phone_number id:phone_number  placeholder "例)090-1234-5678"]
                </td>
              </tr>
              <tr>
                 <th>
                    <div>Email<span class="need">必須</span></div>
                 </th>
                 <td>
                    [email* email id:email  placeholder "sample@sample.com"]
                 </td>
              </tr>
              <tr>
                 <th>
                   <div>お問い合わせ内容</div>
                 </th>
                 <td>
                   [textarea comment id:comment 100x5 placeholder "具体的にご記入ください"]
                 </td>
              </tr>
        </tbody>
    </table>
     <div>
        <div id="agreebox">
           <label id="contactagree">
              [acceptance acceptance-253 optional] 当サイトのプライバシーに同意する [/acceptance]
           </label>
         </div>
         <div class="submitbt">  
           [submit id:submit "送信"]
         </div>
    </div>

    ↓このコードを投稿ページの「カスタムCSS」に貼り付けてください↓

    .wpcf7 th{
      border:1px solid #ccc;
      padding: 10px 30px;
      font-size: 16px;
      background:rgb(82, 180, 201);
      color: #fff;
      position: relative;
    }
    .wpcf7 td{
      border:1px solid #ccc;
      padding: 10px 30px;
    }
    .wpcf7 th, td {
      vertical-align: middle;
    }
    .wpcf7 table{
      border-collapse: collapse;
      margin-bottom:0;
    }
    .wpcf7 input{
      height: 30px;
    }
    #comment{
      width: 549px;
    }
    .wpcf7 #submit{
      background:rgb(82, 180, 201);
      color: #fff;
      border: none;
      font-size: 20px;
      height: auto;
    }
    #agreebox{
      text-align:center;
      margin-bottom:5px;
    }
    .wpcf7 .need{
      font-size: 7px;
      background: rgb(241, 54, 82);
      color: #fff;
      padding: 3px 5px;
      position:absolute;
      right: 10px;
    }

    色を変える場合

    • 氏名や住所の青色の背景色を自分好みにカスタマイズしたい場合
    .wpcf7 th{
      background: 背景色コードを書く;
      color: 文字の色のコードを書く;
    }
    • 送信ボタンの色を変えたい場合
    .wpcf7 #submit{
      background:送信ボタンの背景色コード;
      color: 文字の色のコード;
    }

    色のコードはこちらのサイトを参考にコピペして使用してください。

    コーポレートサイト用のきっちりとしたデザイン

      氏名*
      住所*
      電話番号*
      Email*
      お問い合わせ内容

      きっちりとした、コーポレートサイトのお問い合わせフォームは無駄な装飾はないので、シンプルに白と黒で作りました。

      無駄な装飾を全部取り除き、必須項目には*マークをつけています。

      • 無駄な装飾を全て取り除いたデザイン
      • 必須項目にはシンプルに*マークを
      • 白と黒できっちりした企業サイトに合う

      ↓このコードを編集ページの「フォーム」に貼り付けてください↓

      <table>
          <tbody>
              <tr>
                 <th>
                   <div>氏名<span class="need">*</span>:</div>
                  </th>
                  <td>
                    [text* username id:name  placeholder "例)山田 太郎"]
                  </td>
               </tr>
               <tr>
                  <th>
                    <div>住所<span class="need">*</span>:</div>
                  </th>
                  <td>
                    [text* street_address id:street_address  placeholder "例)東京都品川区"]
                  </td>
               </tr>
                <tr>
                  <th>
                    <div>電話番号<span class="need">*</span>:</div>
                  </th>
                  <td>
                    [tel* phone_number id:phone_number  placeholder "例)090-1234-5678"]
                  </td>
                </tr>
                <tr>
                   <th>
                      <div>Email<span class="need">*</span>:</div>
                   </th>
                   <td>
                      [email* email id:email  placeholder "sample@sample.com"]
                   </td>
                </tr>
                <tr>
                   <th>
                     <div>お問い合わせ内容</div>
                   </th>
                   <td>
                     [textarea comment id:comment 100x5 placeholder "具体的にご記入ください"]
                   </td>
                </tr>
          </tbody>
      </table>
       <div>
          <div id="agreebox">
             <label id="contactagree">
                [acceptance acceptance-253 optional] 当サイトのプライバシーに同意する [/acceptance]
             </label>
           </div>
           <div class="submitbt">  
             [submit id:submit "送信"]
           </div>
      </div>

      ↓このコードを投稿ページの「カスタムCSS」に貼り付けてください↓

      .wpcf7 th{
        text-align: right;
        border-bottom: 1px solid #ccc;
        border-top: 1px solid #ccc;
        padding: 10px 30px;
        font-size: 16px;
        position: relative;
      }
      
      .wpcf7 td{
         border-bottom: 1px solid #ccc;
         border-top: 1px solid #ccc;
        padding: 10px 30px;
      }
      .wpcf7 .need{
        color: red;
      }
      #comment{
        width: 549px;
      }
      .wpcf7 th, td {
        vertical-align: middle;
      }
      .wpcf7 table{
        border-collapse: collapse;
      }
      .wpcf7 textarea{
        width: 247px;
      }
      .wpcf7 .submit{
        text-decoration: center;
      }
      .wpcf7 #agree{
        text-align: center;
      }
      

      可愛いポップなデザイン

        Contact

        マテリアルなデザインを意識したデザインで、女性ブログやポートフォリオサイトにも使えるお問い合わせフォームになっています。

        柔らかな印象を与え、堅苦しいお問い合わせフォームの印象を無くし心地いいデザインです。

        • 背景色がある
        • テキストボックスを丸くして優しい印象に
        • 無駄なテキストは全て削除

        ↓このコードを編集ページの「フォーム」に貼り付けてください↓

        <h3>Contact</h3>
            [text text-498 placeholder "Name"]
        
        
            [email email-12 placeholder "E-mail"]
        
        
            [text text-498 placeholder "Subject"]
        
        
            [textarea textarea-621 placeholder "Message"]
        
        [submit "Submit"]

        ↓このコードを投稿ページの「カスタムCSS」に貼り付けてください↓

        .wpcf7-form{
          background-color: rgba(93, 133, 201, 0.25);
        }
        
        .wpcf7-form input{
          border: none;
          border-radius: 15px;
          height: 30px;
          padding: 0 0 0 10px;
          background: rgb(255, 192, 134);
        }
        .wpcf7-form textarea{
          border: none;
          border-radius: 15px;
          padding: 10px 0 0 10px;
          background: rgb(255, 192, 134);
        }
        
        .wpcf7-form input[type="submit"]{
          background:  #da6b64;
          color: #fff;
          border-radius: 5px;
          width: 100px;
          text-align: center;
          margin: 0 auto;
          display: block;
          padding: 0;
          font-weight: bold;
        }
        

        色を変える場合

        • 背景色を変えたい場合
        .wpcf7-form{
          background-color:好きなカラーコードを書く;
        }
        • テキストボックスの背景色を変えたい場合
        .wpcf7-form input{
          background-color:好きなカラーコードを書く;
        }
        • 送信ボタンの背景色を変えたい場合
        .wpcf7-form input[type="submit"]{
         background-color:好きなカラーコードを書く;
        }
        

        WordPressのお問い合わせフォーム カスタマイズまとめ

        ネコ君
        ネコ君

        コピペでカスタマイズできるからとっても便利だね!

        いかがでしたでしょうか!

        お問い合わせフォームはサイトのコンバージョン率を高める重要な場所なので、必ず設置するようにし、サイトにあったデザインを適用させるようにしましょう!

        ぜひこの記事を参考にお問い合わせフォームをカスタマイズしてみてはいかがでしょうか!

        最後までご覧いただきありがとうございました。

        HikoPro
        HikoPro

        Leave A Reply

        *
        *
        * (公開されません)

        日本語が含まれない投稿は無視されますのでご注意ください。(スパム対策)