【contact form 7】cssのカスタマイズ方法5選｜コピペでおしゃれなフォームに変身

contact form 7を使用してアンケートフォームの作成をしている方も多いのではないでしょうか。

アンケートフォームの作成をする際に、カスタマイズをしたいと思うけど、方法がわからないことはありませんか？

本記事では、contact form 7でアンケートフォームの作成をする際、CSSでカスタマイズをする方法を紹介します。

また、記事の中でプログラミングスキルがなくても簡単にアンケートフォームの作成が可能な「formrun」の特徴もまとめてみました。

有料プランが終了しても自動で請求が始まることはないので安心してご利用してみてください。

【contact form 7】cssでおしゃれなデザインにカスタマイズする方法5選（コピペ可能）

contact form 7でアンケートフォームの作成をする際、自社のトーンに合わせておしゃれなデザインにカスタマイズをしたいと感じたことがある方もいるのではないでしょうか。

CSSでおしゃれなデザインにカスタマイズが可能です。ここでは、以下の5つのカスタマイズ方法を解説していきます。

• 記入必須項目を目立たせる
• 入力に不備がある項目を目立たせる
• ボタンの色を変更させる
• ユーザーが入力している項目を目立たせる
• チェックボックスやラジオボタンを表示させる

記入必須項目を目立たせる

CSSでカスタマイズをして、記入必須項目を目立たせることができます。contact form 7のデフォルトデザインでは、入力必須項目を目立たせることができません。

そのため、入力にエラーが出た場合、ユーザーが入力漏れの箇所を見つけることができなくなってしまいます。
入力エラーにより再度同じ情報を入力する手間は離脱率向上につながるため、なるべく入力不足箇所が事前に発見しやすい状態にしておくのが理想です。

下記のコードをコピペすれば、カスタマイズできるので、ぜひご活用ください。

.required {
font-size: 0.8em;
padding: 3px;
background: #cc0000;
color: #ffffff;
border-radius: 2px;
margin-right: 10px;
margin-bottom: 2px;
display: inline-block;
}

入力に不備がある項目を目立たせる

入力に不備がある項目を目立たせるカスタマイズもCSSで行えます。前述した記入必須項目を目立たせるカスタマイズと同様に、ユーザーがスムーズに入力を進められるためのカスタマイズです。

文章の内容を変更したり、太文字や文字の色を変えたりするカスタマイズ方法もおすすめです。

下記のコードをコピペすれば、カスタマイズできるので、ぜひご活用ください。

.wpcf7-not-valid-tip,.wpcf7-response-output.wpcf7-validation-errors { color: #cc0000; font-weight: bold; }

ボタンの色を変更させる

CSSでカスタマイズをして、ボタンの色を変更させることも可能です。contact form 7のデフォルトのボタンデザインは、グレーで控えめな印象のある設定になっています。

色を変更するだけでも、クリック率が向上したり、自社のトーンに合ったオリジナル感を出せます。

下記のコードをコピペすれば、カスタマイズできるので、ぜひご活用ください。

.wpcf7 input[type=”submit”] {
background: #FF1493;
color: #ffffff;
border-radius: 4px;
font-size: 1.4em;
padding: 10px 20px;
}
.wpcf7 input[type=”submit”]:hover {
background: #FFC0CB;
font-weight: bold;
color: #ff1493;
}

ユーザーが入力している項目を目立たせる

入力している欄の色が変わるようにカスタマイズしておくと、ユーザーが入力している箇所を一目で確認できるため入力がスムーズになります。

下記のコードをコピペすれば、カスタマイズできるので、ぜひご活用ください。

.wpcf7 input[type=”text”]:focus
{
background: #FFC0CB;
border: 2px solid #FF1493;
outline: 0;
}

チェックボックスやラジオボタンを表示させる

複数の選択肢の中から回答をしてもらう場合にチェックボックスとラジオボタンを表示できます。

デフォルトのデザインでは、横のみの設定になっていますが、CSSでカスタマイズをすると縦並びにカスタマイズができます。

下記のコードをコピペすれば、カスタマイズできるので、ぜひご活用ください。
span.wpcf7-list-item {display: block;}

contact form 7のカスタマイズ方法について詳しく知りたい方はこちらを合わせてご覧ください。
>> 【コピペ可】Contact Form 7のデザインをCSS・HTMLカスタマイズ！

【contact form 7】活用しやすいデザインテンプレート5選

contact form 7のカスタマイズ方法には実際にCSSといったプログラムを記載する方法があります。
中にはcontact form 7のデザインテンプレートを活用して簡単に実装したい方もいるのではないでしょうか。

contact form 7に活用しやすいデザインテンプレートは、主に以下の5種類です。

• デフォルトフォーム
• 商品・サービスのお問い合わせフォーム
• 採用のお問い合わせフォーム
• 資料請求のお問い合わせフォーム
• 説明会の情報入力フォーム

デフォルトフォーム

ユーザーがすぐに入力を開始できるフォームを作成するのであれば、デフォルトのフォームテンプレートを活用するのがおすすめです。

名前・メールアドレス・本文など一般的に必要とされている入力項目が含まれています。

下記のコードをコピペするだけで、デフォルトフォームの作成ができます。

Your Name (required)
[text* your-name]
Your Email (required)
[email* your-email]
Subject
[text your-subject]
Your Message
[textarea your-message]
[submit "Send"]

商品・サービスのお問い合わせフォーム

ECサイトやランディングページなどを制作するのであれば、商品・サービスのお問い合わせフォームテンプレートを活用するのがおすすめです。

ユーザーの名前や連絡先に加え、お問い合わせ内容を入力するテキストエリアが設置されているテンプレートになっています。

下記のコードをコピペするだけで、商品・サービスのお問い合わせフォームの作成ができます。

Your Name (required)
[text* your-name]
Your Email (required)
[email* your-email]
Product or Service
[text your-product-service]
Order Number
[text your-order-number]
Inquiry Type
[radio inquiry-type use-label-element "General Inquiry" "Product Support" "Billing" "Returns"]
Message
[textarea your-message]
[submit "Send"]

採用のお問い合わせフォーム

採用プロセスをスムーズに進めるためには、採用のお問い合わせフォームテンプレートを活用するのが便利です。

名前やメールアドレスなどの応募者の連絡先の入力欄が設置されているので、情報企業が求職者からの情報を効率よく集められるメリットがあります。

下記のコードをコピペするだけで、採用のお問い合わせフォームの作成ができます。

Your Name (required)
[text* your-name]
Your Email (required)
[email* your-email]
Phone Number
[tel your-phone]
Position Applied For (required)
[text* your-position]
Cover Letter
[textarea your-cover-letter]
Upload Resume
[file your-resume]
Upload Portfolio (optional)
[file your-portfolio]
Work Experience
[textarea your-experience]
Education
[textarea your-education]
[submit "Submit Application"]

資料請求のお問い合わせフォーム

資料請求用のお問い合わせフォームテンプレートを活用すれば、ユーザーの名前やメールアドレス・電話番号など、必要とする情報を迅速に集められるように設計されているのが特徴です。

フォームテンプレートを活用すると、資料の送付先が正確に把握できるようになるメリットがあります。

下記のコードをコピペするだけで、資料請求のお問い合わせフォームの作成ができます。

Your Name (required)
[text* your-name]
Your Email (required)
[email* your-email]
Your Phone Number
[tel your-phone]
Company Name
[text your-company]
Postal Address
[text your-address]
City
[text your-city]
State/Province
[text your-state]
Zip/Postal Code
[text your-zip]
Country
[text your-country]
Requested Materials (required)
[checkbox* requested-materials use_label_element "Product Brochure" "Service Guide" "Case Studies" "Pricing Information"]
Additional Information or Requests
[textarea your-additional-info]
[submit "Request Information"]

説明会の情報入力フォーム

説明会の情報入力フォームテンプレートを活用すれば、説明会の出席者リストもスムーズに作成できるようになるため便利です。

名前やメールアドレス、電話番号など出席者リストを作成する際に必要な基本情報は、すべて入力できるフォームになっています。

下記のコードをコピペするだけで、説明会の情報入力フォームの作成ができます。

<label> お名前
[text* your-name]
</label>
<label> メールアドレス
[email* your-email]
</label>
<label> 電話番号
[tel your-phone]
</label>
<label> 参加希望日時
[select* event-date "2023-07-01" "2023-07-08" "2023-07-15"]
</label>
<label> 質問や要望
[textarea your-message]
</label>
[submit "送信"]

contact form 7のテンプレートについて詳しく知りたい方はこちらを合わせてご覧ください。
>> contact form 7を活用したテンプレートの種類｜設定方法やカスタマイズ方法も解説

【contact form 7】cssでカスタマイズをするメリット・デメリット

機能面でもデザイン面でも多様なカスタマイズが可能なcontact form 7です。contact form 7はデフォルト状態でも活用できるものの、利用する方の多くがカスタマイズをしています。

ここでは、contact form 7をCSSでカスタマイズをするメリットとデメリットをそれぞれ解説していきます。

 【contact form 7】cssでカスタマイズをするメリット3選

contact form 7をCSSでカスタマイズをするメリットは、主に以下の3点です。

• デザイン性を向上させられる
• コンバージョン率を向上させられる
• メンテナンス性を向上させられる

デザイン性を向上させられる

CSSでカスタマイズをするメリットは、デザイン性を向上できる点です。contact form 7は、デフォルトのフォームだと詳細な装飾を付与する機能はほとんどありません。

シンプルなデザインで問題があるわけではありませんが、サイトのデザインに合わせたり記入必須項目を目立たせたりと見た目にこだわると回答率も向上します。

また、サイトの見た目やイベントの内容とフォームのデザイン性にギャップがあると、入力するユーザーに違和感を与えてしまい離脱率が上がる可能性もあります。

フォームの送信率を上げたいのであれば、カスタマイズは必須でしょう。

コンバージョン率を向上させられる

カスタマイズをすればコンバージョン率が向上できる点もメリットの1つです。

何を入力したらいいの具体的な指示が分かりにくいフォームや、入力箇所わかりにくいフォームは、入力が途中で面倒に感じ離脱するユーザーが増加します。

CSSでカスタマイズも行いフォームのデザインや見やすさを整えることで、フォーム入力の離脱率を下げ、コンバージョン率を向上させられます。

メンテナンス性を向上させられる

CSSをHTMLから切り離してカスタマイズすればメンテナンス性が向上できるメリットがあります。

また一度CSSでカスタマイズしやすいコードを作成しておけば、再利用も手軽に可能なのが特徴です。

例えば、フォーム全体の色を変更したい場合でもCSSでカスタマイズをしたコードを一箇所変更するだけで、全体に変更を反映できるようになります。

【contact form 7】cssでカスタマイズをするデメリット

CSSでカスタマイズするメリットと合わせてデメリットも理解しておく必要があります。CSSでカスタマイズをする際に考えられるデメリットは「使用するブラウザによって表示が変わること」です。

CSSのカスタマイズは万能でないことから、使用するブラウザによって表示が異なることがあります。

CSSの処理方法やサポートしている機能が微妙に異なることが原因です。CSSでカスタマイズをする際には、複数のブラウザで表示をしてみて、できるだけ多くのユーザーに同じ見た目でフォームが表示されるような工夫をするべきでしょう。

Contact Form 7で作ったフォームにCSSが効かない時の対処法

contact form 7にCSSが効かないことがあります。その場合は、操作してる環境が本番環境ではなく、テスト環境になっている可能性が考えられます。

HTMLファイル内にCSSの記述も可能ですが、一般的にはCSSファイルを外部に作成します。

HTMLファイルでCSSファイルを読み込む設定ですので、Contact Form 7で作ったフォームにCSSが効かない時には、CSSファイルへのリンクが正しいか確認しましょう。

contact form 7の基本の使い方が知りたい方はこちらを合わせてご確認ください。
>> 【完全版】Contact Form 7の基本と使い方まとめ｜WordPressに問い合わせフォームを設置しよう

フォーム作成ツール「formrun」もおすすめ！

formrunには以下の特徴があります。formrunを利用するメリットは下記の4点です。

• テンプレートが豊富
• EFO（フォーム最適化）に役立つ
• セキュリティが高い

テンプレートが豊富

formrun（フォームラン）は、120種類以上のテンプレートが用意されています。

アンケートフォームで使えるテンプレートは16種類あり、主に顧客アンケート、イベント・セミナーアンケート、社内アンケートなど用途に合わせたテンプレートが選べます。

formrunのテンプレートはそのまま利用できるリッチな見た目で、用途に合わせて必要な設問が最適な順番で配置されているため、設問タイトルを少し修正するだけで簡単に高クオリティのフォームの作成が可能です。

テンプレートの設問に項目の追加・削除・順番の変更等もワンクリックで簡単に修正できます。

EFO（フォーム最適化）に役立つ

送信する際のエラーや、項目数が表示されていない、ブラウザを間違えて閉じてしまうなど、フォームにまつわるよくある上記のようなストレスが原因でフォームから離脱するユーザーは7割を超えると言われています。

それらの離脱を防ぐため、回答者が便利にフォームを利用できる取り組みとして、残項目数表示や、ページ分割機能、入力途中保存、リアルタイムでのエラー表示機能などがあります。

そのためユーザーは、「自分の入力内容に間違いがないか」「あと何分で完了するか」などを常に把握できるため、回答負担が大幅に減らせるのがメリットです。

EFO機能を導入するには約30,000円の費用がかかることが一般的ですが、formrunでは、わずか3,000円〜EFO機能を導入できます。

ぜひformrunでEFO機能を導入し、フォームの通過率が上がる経験をしてみてください。

セキュリティ対策が万全

セキュリティが高いのもformrun(フォームラン)の魅力のポイントです。

「ISO 27001 (ISMS)」の認証取得やプライバシーマークの付与認定、SSL/ TLSによる暗号化通信、24時間365日のサーバー監視体制などさまざまな対策がとられています。

フォームは、名前や住所、メールアドレスなど重要な個人情報を取り扱います。
ユーザーに安心してフォームを利用してもらうためにも、フォームのセキュリティはとても重要です。

安全なフォーム運用や個人情報の取り扱いは、顧客からの信用に大きく影響するため、セキュリティーを重視している方にはformrunの利用がおすすめです。

【contact form 7】cssを活用しておしゃれなデザインにカスタマイズしよう！

contact form 7は、プログラミングスキルのスキルがなくても、フォームを作成できるツールです。

しかし、デフォルトのデザインだと詳細な装飾がほとんどなく、シンプルなデザインになってしまうのが難点でもあります。

オリジナルのデザインにカスタマイズする場合はCSSでカスタマイズを直接変更するようにしましょう。

また、アンケートフォーム作成ツール「formrun」ではプログラミングの知識がない方でも、フォームの作成ができ、テーマに合わせて多数のテンプレートの中から選択ができるのもformrunだからこそです。

アンケートの回答の集計が自動でできることや、自動返信メールでサンクスメールや回答内容のメールを送れることも、魅力のポイントです。

マトリクス形式の回答が採用されていて、さらに条件分岐で回答数を変えないまま回答者に合った質問を出し分けることもできます。

共有や埋め込みも簡単にできるので、多くのユーザーにアンケートを回答してもらうことが可能です。

有料プランは14日間無料で使用できるため、まずはFREEプランや有料プランを無料で試してみるのがおすすめです。

自動で請求が始まることはないので安心してご利用してみてください。

formrunのことをもう少し詳しく知りたい方は、こちらの公式ホームページをご参照ください。

formlab編集部

formrunやフォーム作成や顧客管理に関する情報を発信しております。

EFO（エントリーフォーム最適化）や問い合わせ対応など、
フォームに関するお悩みを解決します。