Contact Form 7カスタマイズ方法
2021年04月21日
ヒロックラボの竹村です。Contact Form 7のカスタマイズの一例としてヒロックラボのお問い合わせフォームのhtmlとcssのコードを紹介します。ヒロックラボのようなお問い合わせフォームを作りたいという方は参考にしてみてください。今回、お問い合わせページを作成するにあたってContact Form 7の使い方を説明したサイトはたくさんあるのに、カスタマイズ方法のバリエーションが少ないなと感じました。同じように困っている方の一例になればいいなと思います。
ヒロックラボのお問い合わせフォームのリンクです。
フォームに以下のコードをペースト。
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| <dt><span>会社名</span><span class="must">必須</span></dt> | |
| <dd>[text* company-name placeholder"例：株式会社ヒロックラボ"]</dd> | |
| <dt><span>お名前</span><span class="must">必須</span></dt> | |
| <dd>[text* your-name placeholder"例：山田 太郎"]</dd> | |
| <dt><span>メールアドレス</span><span class="must">必須</span></dt> | |
| <dd>[email* your-email placeholder"例：abcd@example.jp"]</dd> | |
| <dt><span>お電話番号</span></dt> | |
| <dd>[tel your-tel placeholder"例：090-1234-5678"]</dd> | |
| <dt><span>郵便番号</span></dt> | |
| <dd>[text postal-code placeholder"123-4567"]</dd> | |
| <dt><span>都道府県</span></dt> | |
| <dd>[select prefectures "選択してください" "北海道" "青森県" "岩手県" "宮城県" "秋田県" "山形県" "福島県" "茨城県" "栃木県" "群馬県" "埼玉県" "千葉県" "東京都" "神奈川県" "新潟県" "富山県" "石川県" "福井県" "山梨県" "長野県" "岐阜県" "静岡県" "愛知県" "三重県" "滋賀県" "京都府" "大阪府" "兵庫県" "奈良県" "和歌山県" "鳥取県" "島根県" "岡山県" "広島県" "山口県" "徳島県" "香川県" "愛媛県" "高知県" "福岡県" "佐賀県" "長崎県" "熊本県" "大分県" "宮崎県" "鹿児島県" "沖縄県"]</dd> | |
| <dt><span>ご住所</span></dt> | |
| <dd>[text your-address placeholder"例：港区南青山2-8-27"]</dd> | |
| <dt><span>業種</span></dt> | |
| <dd>[checkbox your-work "デザイン" "IT・システムエンジニア" "流通・小売" "アパレル" "不動産・建設" "飲食・サービス業" "メディア" "エンタメ" "製造・メーカー" "弁護士・税理士" "人材（派遣・紹介）" "金融（銀行・保険・ファンド）" "教育" "医療・病院・介護" "美容（サロン・エステ）" "その他"] | |
| <dt><span>題名</span><span class="must">必須</span></dt> | |
| <dd>[text* your-subject placeholder"例：webサイト制作の依頼をしたい"]</dd> | |
| </dl> | |
| <dt><span>お問い合わせ内容</span><span class="must">必須</span></dt> | |
| <dd>[textarea your-message]</dd> | |
| </dl> | |
| [acceptance acceptance-799 class:acceptance] サイト規約に同意・承諾の上で送信します。 [/acceptance] | |
| <p class="btn_contact7">[submit "この内容で送信する"]</p> |
by 任意のcssに以下のコードをペースト
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| .wpcf7 { | |
| max-width: 100%; | |
| box-sizing: border-box; | |
| position: relative; | |
| height: 1300px; | |
| } | |
| .wpcf7-form { | |
| position: absolute; | |
| top: 50%; | |
| left: 50%; | |
| transform: translateY(-50%) translateX(-50%);/* コンタクトフォームを中央よせ */ | |
| height: auto; | |
| width: 80%; | |
| } | |
| .wpcf7 dd { | |
| margin: 0 0 30px 0; | |
| } | |
| .wpcf7 dt { | |
| font-weight: normal; | |
| display: flex; | |
| align-items: center; | |
| margin-bottom: 10px; | |
| } | |
| .wpcf7 input, | |
| .wpcf7 textarea { | |
| width: auto; | |
| box-sizing: border-box; | |
| width: 100%; | |
| border: 1px solid #ccc; | |
| line-height: 1.2; | |
| padding: 8px; | |
| } | |
| .wpcf7 select,.wpcf7 input[type=checkbox], .wpcf7 input[type=radio] { | |
| width: auto; | |
| max-width: 97%; | |
| border: 1px solid #ccc; | |
| padding: 8px; | |
| } | |
| /* 必須マーク */ | |
| .wpcf7 .must { | |
| color: #FFF; | |
| border-radius: 3px; | |
| font-size: 10px; | |
| margin-left: 10px; | |
| padding: 5px 10px; | |
| letter-spacing: 2px; | |
| background: #ed6d46; | |
| } | |
| /* 同意チェック */ | |
| .accept-this{ | |
| text-align: center; | |
| } | |
| /* 送信ボタン */ | |
| .btn_contact7 { | |
| margin-top: 5%; | |
| text-align: center; | |
| position: relative; | |
| } | |
| .btn_contact7 input { | |
| width: 70%; | |
| padding: 2% 0%; | |
| background-color: #27A6AF; | |
| color: #FFF; | |
| font-size: 1.1em; | |
| font-weight: bold; | |
| letter-spacing: 0.2em; | |
| border: 1px solid #27A6AF; | |
| -webkit-transition: 0.3s; | |
| -moz-transition: 0.3s; | |
| -o-transition: 0.3s; | |
| -ms-transition: 0.3s; | |
| transition: 0.3s; | |
| position: absolute; | |
| left: 50%; | |
| transform: translateX(-50%); | |
| } | |
| .btn_contact7 input:hover { | |
| background-color: #FFF; | |
| color: #27A6AF; | |
| } |
このコードをコピペしたのにcssが適用されていないという方はcssの「wpc7」の部分に別のclassが適用されていないか検証ツールで確認してみてください。場合によっては「contact7」になっていることがあります。
