ポートフォリオ・実績はこちら!!▶︎▶︎▶︎

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

WordPress
この記事を書いた人
HikoPro

大学生フリーランスエンジニア|ライター|Webディレクター

【海外経験0の普通の大学生→世界を旅する→GoPro Awards受賞→バンコク不動産でインターン(売り上げ100万達成)→インドでIT留学(PHP,Laravel)→ベトナムでWebディレクター兼エンジニア】

HikoProをフォローする
スポンサーリンク
11月29日まで!!
Adobeの期間限定セール開催中

Web制作者に必須のAdobeのソフトをいますぐ手に入れよう!

セールの詳細はこちら!

HikoPro
HikoPro

こんにちは!大学生フリーランスエンジニアのHikoProです!

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

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

Twitterで記事の更新、フリーランスに関する情報を発信しているので、ぜひフォローお願いします!

WordPressの学習にオススメの本

WordPressの基礎知識がある程度ある方向けの参考書で、HTMLファイルをWordPressのテーマ化にするまでの過程が詳しく書かれているので、実務にも使えるスキルが身につきます。

また、お客様のニーズで多い、カスタムフィールドの導入方法や、プラグインの開発方法や、管理画面の編集など実務でよく使う技術がよく学べます!

これからWordPressで高単価な案件を取りたい方は必ず読んでおきたい1冊です!

スポンサーリンク
スポンサーリンク
この記事を書いた人
HikoPro

大学生フリーランスエンジニア|ライター|Webディレクター

【海外経験0の普通の大学生→世界を旅する→GoPro Awards受賞→バンコク不動産でインターン(売り上げ100万達成)→インドでIT留学(PHP,Laravel)→ベトナムでWebディレクター兼エンジニア】

HikoProをフォローする
WordPress
HikoPro Blog

コメント

タイトルとURLをコピーしました