【コピペOK】Contact Form 7をプロ級にカスタマイズする方法
コラム
2026/7/27
WordPressでお問い合わせフォームを作る際に、多くの方が利用している「Contact Form 7」。
しかし、初期状態ではシンプルすぎて、
デザインが味気ない…
ホームページの雰囲気に合わない…
もう少し見やすくしたい…
と感じることも多いのではないでしょうか。
そこで今回は、Contact Form 7をおしゃれなデザインにカスタマイズできるCSSをご紹介します。
コードはそのままコピー＆ペーストで使えるので、初心者の方でも簡単に導入できます。
完成イメージ
ここに完成後のフォーム画像を掲載
（PC・スマホ両方あると分かりやすい）
Contact Form 7のフォームコード
まずはContact Form 7のフォームに以下のコードを入力します。
<div class="custom-contact">
<div class="contact-item">
<div class="contact-label">
<label for="your-name">お名前</label>
<span class="contact-required">必須</span>
</div>
<div class="contact-field contact-field-name">
[text* your-name id:your-name autocomplete:name placeholder "山田 太郎"]
</div>
</div>
<div class="contact-item">
<div class="contact-label">
<label for="company-name">会社名</label>
</div>
<div class="contact-field contact-field-company">
[text company-name id:company-name autocomplete:organization placeholder "株式会社〇〇"]
</div>
</div>
<div class="contact-item">
<div class="contact-label">
<label for="your-email">メールアドレス</label>
<span class="contact-required">必須</span>
</div>
<div class="contact-field contact-field-email">
[email* your-email id:your-email autocomplete:email placeholder "example@example.com"]
</div>
</div>
<div class="contact-item">
<div class="contact-label">
<label for="your-tel">電話番号</label>
<span class="contact-required">必須</span>
</div>
<div class="contact-field contact-field-tel">
[tel* your-tel id:your-tel autocomplete:tel placeholder "090-1234-5678"]
</div>
</div>
<div class="contact-item contact-choice-item">
<div class="contact-label">
<label for="inquiry-type">お問い合わせ種別</label>
<span class="contact-required">必須</span>
</div>
<div class="contact-choice">
[radio inquiry-type use_label_element
"ホームページ制作"
"リニューアル"
"修正・保守"
"その他"]
</div>
</div>
<div class="contact-item contact-choice-item">
<div class="contact-label">
<label for="request-content">ご希望内容</label>
<span class="contact-required">必須</span>
</div>
<div class="contact-choice contact-checkbox">
[checkbox* request-content use_label_element
"デザイン"
"コーディング"
"スマホ対応"
"お問い合わせフォーム"
"公開作業"]
</div>
</div>
<div class="contact-item">
<div class="contact-label">
<label for="your-message">お問い合わせ内容</label>
<span class="contact-required">必須</span>
</div>
<div class="contact-field contact-field-message">
[textarea* your-message id:your-message placeholder "お問い合わせ内容をご入力ください"]
</div>
</div>
<div class="contact-privacy">
[acceptance privacy-policy]
<a href="/privacy-policy/" target="_blank" rel="noopener">
プライバシーポリシー
</a>に同意する
[/acceptance]
</div>
<div class="contact-submit">
[submit "お問い合わせする"]
</div>
</div>CSSを追加する
続いて、以下のCSSをコピーして追加してください。
CSSは
外観 → カスタマイズ → 追加CSS
または
子テーマのstyle.css
へ貼り付けます。
/* フォーム外側の背景 */
.wpcf7 {
padding: 70px 20px;
background:
radial-gradient(circle at top left, rgba(219, 235, 255, 0.85), transparent 30%),
radial-gradient(circle at bottom right, rgba(226, 239, 255, 0.9), transparent 28%),
#f6f9fd;
}
/* 白いカード */
.custom-contact {
width: min(100%, 960px);
margin: 0 auto;
padding: 70px 75px;
background: rgba(255, 255, 255, 0.96);
border: 1px solid rgba(215, 225, 238, 0.8);
border-radius: 28px;
box-shadow: 0 20px 60px rgba(35, 75, 125, 0.12);
box-sizing: border-box;
}
/* 見出し */
.contact-heading {
margin-bottom: 28px;
text-align: center;
}
.contact-heading-ja {
margin: 0;
color: #1c2c43;
font-family: "Yu Mincho", "Hiragino Mincho ProN", serif;
font-size: clamp(30px, 4vw, 44px);
font-weight: 500;
letter-spacing: 0.18em;
line-height: 1.5;
}
.contact-heading-en {
position: relative;
margin: 10px 0 0;
padding-bottom: 15px;
color: #506078;
font-size: 13px;
font-weight: 600;
letter-spacing: 0.25em;
}
.contact-heading-en::after {
position: absolute;
bottom: 0;
left: 50%;
width: 48px;
height: 2px;
background: #2c85df;
content: "";
transform: translateX(-50%);
}
/* 導入文 */
.contact-lead {
margin: 0 0 50px;
color: #596477;
font-size: 15px;
line-height: 2;
text-align: center;
}
/* 各項目 */
.contact-item {
margin-bottom: 32px;
}
.contact-label {
display: flex;
align-items: center;
gap: 10px;
margin-bottom: 11px;
}
.contact-label p{
display: flex;
align-items: center;
}
.contact-label label {
margin: 0;
color: #253248;
font-size: 16px;
font-weight: 700;
}
/* 必須ラベル */
.contact-required {
display: inline-flex;
align-items: center;
justify-content: center;
min-width: 42px;
height: 24px;
padding: 0 8px;
background: #ef5350;
border-radius: 5px;
color: #fff;
font-size: 11px;
font-weight: 700;
line-height: 1;
margin-left: 10px;
}
/* 入力欄外枠 */
.contact-field {
position: relative;
}
.contact-field .wpcf7-form-control-wrap {
display: block;
}
/* 入力欄共通 */
.contact-field input,
.contact-field textarea {
width: 100%;
margin: 0;
padding: 20px 22px 20px 68px;
background-color: #fff;
border: 1px solid #cbd9eb;
border-radius: 9px;
box-shadow: none;
color: #253248;
font-family: inherit;
font-size: 16px;
line-height: 1.7;
transition:
border-color 0.25s ease,
box-shadow 0.25s ease,
background-color 0.25s ease;
box-sizing: border-box;
}
.contact-field input {
min-height: 68px;
}
.contact-field textarea {
min-height: 210px;
padding-top: 20px;
resize: vertical;
}
/* プレースホルダー */
.contact-field input::placeholder,
.contact-field textarea::placeholder {
color: #9aa5b5;
opacity: 1;
}
/* フォーカス時 */
.contact-field input:focus,
.contact-field textarea:focus {
background: #fff;
border-color: #3182ce;
outline: none;
box-shadow: 0 0 0 4px rgba(49, 130, 206, 0.12);
}
/* 左側アイコン背景 */
.contact-field::before {
position: absolute;
top: 1px;
left: 1px;
z-index: 2;
display: block;
width: 52px;
/* height: calc(100% - 2px); */
left:1px;
width:52px;
height:66px;
border-radius:8px 0 0 8px;
background-color: #f4f8fd;
background-position: center;
background-repeat: no-repeat;
background-size: 22px 22px;
border-radius: 8px 0 0 8px;
content: "";
pointer-events: none;
}
.contact-field-message::before{
height:312px;
background-position:center 22px;
}
/* お名前アイコン */
.contact-field-name::before {
background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='none' stroke='%23859bb8' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M20 21a8 8 0 0 0-16 0'/%3E%3Ccircle cx='12' cy='7' r='4'/%3E%3C/svg%3E");
}
/* 会社アイコン */
.contact-field-company::before {
background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='none' stroke='%23859bb8' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M3 21h18'/%3E%3Cpath d='M6 21V5h12v16'/%3E%3Cpath d='M9 9h2M13 9h2M9 13h2M13 13h2M9 17h2M13 17h2'/%3E%3C/svg%3E");
}
/* メールアイコン */
.contact-field-email::before {
background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='none' stroke='%23859bb8' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='3' y='5' width='18' height='14' rx='2'/%3E%3Cpath d='m3 7 9 6 9-6'/%3E%3C/svg%3E");
}
/* 電話アイコン */
.contact-field-tel::before {
background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='none' stroke='%23859bb8' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M22 16.92v3a2 2 0 0 1-2.18 2 19.79 19.79 0 0 1-8.63-3.07 19.5 19.5 0 0 1-6-6A19.79 19.79 0 0 1 2.12 4.18 2 2 0 0 1 4.11 2h3a2 2 0 0 1 2 1.72c.12.9.33 1.78.62 2.63a2 2 0 0 1-.45 2.11L8 9.73a16 16 0 0 0 6 6l1.27-1.27a2 2 0 0 1 2.11-.45c.85.29 1.73.5 2.63.62A2 2 0 0 1 22 16.92z'/%3E%3C/svg%3E");
}
/* メッセージアイコン */
.contact-field-message::before {
align-items: flex-start;
background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='none' stroke='%23859bb8' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M12 20h9'/%3E%3Cpath d='M16.5 3.5a2.12 2.12 0 0 1 3 3L8 18l-4 1 1-4Z'/%3E%3C/svg%3E");
background-position: center 21px;
}
/* ========================================
ラジオボタン・チェックボックス
======================================== */
.contact-choice {
padding: 24px;
background: #f7faff;
border: 1px solid #d7e2ef;
border-radius: 12px;
}
.contact-choice .wpcf7-form-control {
display: grid;
grid-template-columns: repeat(2, minmax(0, 1fr));
gap: 12px;
}
.contact-choice .wpcf7-list-item {
width: 100%;
margin: 0;
}
/* 選択項目のカード */
.contact-choice .wpcf7-list-item label {
display: flex;
align-items: center;
gap: 12px;
min-height: 58px;
padding: 14px 16px;
background: #fff;
border: 1px solid #d4dfec;
border-radius: 10px;
color: #35445a;
font-size: 15px;
font-weight: 600;
cursor: pointer;
transition:
background-color 0.25s ease,
border-color 0.25s ease,
box-shadow 0.25s ease,
transform 0.25s ease;
box-sizing: border-box;
}
.contact-choice .wpcf7-list-item label:hover {
background: #f4f8ff;
border-color: #8cb8e8;
transform: translateY(-1px);
}
/* Contact Form 7側の余計な余白を解除 */
.contact-choice .wpcf7-list-item-label {
display: block;
flex: 1;
}
/* ========================================
ラジオボタン
======================================== */
.contact-choice input[type="radio"] {
appearance: none;
-webkit-appearance: none;
position: relative;
flex: 0 0 auto;
width: 22px;
height: 22px;
margin: 0;
background: #fff;
border: 2px solid #a9bad0;
border-radius: 50%;
cursor: pointer;
transition:
border-color 0.2s ease,
background-color 0.2s ease,
box-shadow 0.2s ease;
}
/* ラジオボタン選択時の中央点 */
.contact-choice input[type="radio"]:checked {
background: #2878da;
border-color: #2878da;
box-shadow: inset 0 0 0 5px #fff;
}
/* ========================================
チェックボックス
======================================== */
.contact-checkbox input[type="checkbox"] {
appearance: none;
-webkit-appearance: none;
position: relative;
flex: 0 0 auto;
width: 22px;
height: 22px;
margin: 0;
background: #fff;
border: 2px solid #a9bad0;
border-radius: 5px;
cursor: pointer;
transition:
border-color 0.2s ease,
background-color 0.2s ease,
box-shadow 0.2s ease;
}
/* 選択時の青い背景 */
.contact-checkbox input[type="checkbox"]:checked {
background: #2878da;
border-color: #2878da;
}
/* 選択時の白いチェックマーク */
.contact-checkbox input[type="checkbox"]:checked::after {
position: absolute;
top: 2px;
left: 6px;
width: 6px;
height: 11px;
border-right: 2px solid #fff;
border-bottom: 2px solid #fff;
content: "";
transform: rotate(45deg);
}
/* ========================================
選択されたカード全体を強調
======================================== */
.contact-choice .wpcf7-list-item label:has(input:checked) {
background: #eef6ff;
border-color: #2878da;
box-shadow: 0 0 0 3px rgba(40, 120, 218, 0.1);
color: #1d5fae;
}
/* キーボード操作時 */
.contact-choice input:focus-visible {
outline: 3px solid rgba(40, 120, 218, 0.3);
outline-offset: 3px;
}
/* エラー表示 */
.contact-choice-item .wpcf7-not-valid-tip {
display: block;
margin: 10px 0 0;
color: #e54848;
font-size: 14px;
font-weight: 500;
line-height: 1.6;
}
/* ========================================
スマートフォン
======================================== */
@media screen and (max-width: 767px) {
.contact-choice {
padding: 16px;
}
.contact-choice .wpcf7-form-control {
grid-template-columns: 1fr;
gap: 10px;
}
.contact-choice .wpcf7-list-item label {
min-height: 54px;
padding: 13px 14px;
font-size: 14px;
}
.contact-choice input[type="radio"],
.contact-checkbox input[type="checkbox"] {
width: 21px;
height: 21px;
}
.contact-checkbox input[type="checkbox"]:checked::after {
top: 1px;
left: 5px;
}
}
/* 同意欄 */
.contact-privacy {
margin-top: 5px;
padding: 2px 0 34px;
border-bottom: 1px dashed #d8e1ec;
color: #35445a;
font-size: 15px;
text-align:center;
}
.contact-privacy .wpcf7-list-item {
margin: 0;
}
.contact-privacy label {
display: flex;
align-items: center;
gap: 10px;
cursor: pointer;
}
.contact-privacy input[type="checkbox"] {
width: 20px;
height: 20px;
margin: 0;
accent-color: #2375d8;
cursor: pointer;
}
.contact-privacy a {
color: #2375d8;
font-weight: 600;
text-decoration: underline;
text-underline-offset: 3px;
}
/* 送信エリア */
.contact-submit {
position: relative;
margin-top: 42px;
text-align: center;
}
.contact-submit p {
margin: 0;
}
/* 送信ボタン */
.contact-submit input[type="submit"] {
width: min(100%, 460px);
min-height: 70px;
padding: 18px 55px;
background: linear-gradient(100deg, #2697e8 0%, #2456d4 100%);
border: none;
border-radius: 999px;
box-shadow: 0 12px 28px rgba(36, 95, 210, 0.25);
color: #fff;
font-family: inherit;
font-size: 18px;
font-weight: 700;
letter-spacing: 0.06em;
cursor: pointer;
transition:
transform 0.25s ease,
box-shadow 0.25s ease,
opacity 0.25s ease;
}
.contact-submit input[type="submit"]:hover {
box-shadow: 0 16px 34px rgba(36, 95, 210, 0.35);
opacity: 0.92;
transform: translateY(-3px);
}
.contact-submit input[type="submit"]:active {
transform: translateY(0);
}
/* スピナー */
.contact-submit .wpcf7-spinner {
position: absolute;
top: 50%;
margin: 0 0 0 12px;
transform: translateY(-50%);
}
/* 入力エラー */
.wpcf7-not-valid {
border-color: #e65b5b !important;
box-shadow: 0 0 0 3px rgba(230, 91, 91, 0.08) !important;
}
.wpcf7-not-valid-tip {
margin-top: 7px;
color: #d64545;
font-size: 13px;
}
/* 送信結果メッセージ */
.wpcf7 form .wpcf7-response-output {
padding: 16px 20px;
background: #f7faff;
border: 1px solid #bdd3ed;
border-radius: 8px;
color: #34445a;
font-size: 14px;
line-height: 1.8;
max-width: 1000px;
margin: 0 auto;
margin-top: 30px;
}
/* ========================================
スマートフォン
======================================== */
@media screen and (max-width: 767px) {
.wpcf7 {
padding: 35px 12px;
}
.custom-contact {
padding: 42px 20px;
border-radius: 18px;
}
.contact-heading-ja {
font-size: 29px;
letter-spacing: 0.1em;
}
.contact-lead {
margin-bottom: 38px;
font-size: 14px;
text-align: left;
}
.contact-lead br {
display: none;
}
.contact-item {
margin-bottom: 25px;
}
.contact-field input,
.contact-field textarea {
padding-left: 58px;
font-size: 16px;
}
.contact-field textarea {
min-height: 180px;
}
.contact-submit input[type="submit"] {
min-height: 62px;
padding: 16px 25px;
font-size: 16px;
}
}
.contact-field{
position:relative;
margin-bottom:28px;
}
.wpcf7-not-valid-tip{
display:block;
margin-top:10px;
margin-left:68px;
color:#e54848;
font-size:14px;
font-weight:500;
line-height:1.6;
position:relative;
z-index:5;
}
@media(max-width:767px){
.wpcf7-not-valid-tip{
margin-left:58px;
}
}今回のCSSはレスポンシブ対応となっています。
スマートフォンでは横幅いっぱいに表示されるため、
入力しやすく、見やすいフォームになります。
デザインを崩さないためのポイント
CSSを追加してもうまく反映されない場合は、以下を確認してみましょう。
キャッシュが残っていないか
クラス名が一致しているか
テーマ側のCSSが優先されていないか
CSSを追加する場所が正しいか
テーマによってはCSSの優先順位が異なるため、必要に応じて調整が必要になる場合があります。
Contact Form 7をもっと使いやすくするカスタマイズ例
Contact Form 7はCSSを追加することで、さらに使いやすいフォームにできます。
例えば、
必須・任意ラベルを追加
入力欄を横並びにする
アイコン付きフォームにする
ラジオボタンをカード型にする
エラーメッセージを見やすくする
など、さまざまなカスタマイズが可能です。
今後、こちらのブログでも詳しくご紹介していきます。
よくある質問
Q. Contact Form 7は無料で使えますか？
はい。基本機能は無料で利用できます。
Q. CSSを追加しても反映されません。
キャッシュやテーマ側のCSSが影響している可能性があります。
スーパーリロードやキャッシュ削除を試し、それでも解決しない場合はCSSの優先順位を確認してください。
Q. 他のWordPressテーマでも使えますか？
基本的には利用できます。
ただし、テーマ独自のデザインが適用されている場合は、一部調整が必要になることがあります。
まとめ
Contact Form 7は初期状態でも利用できますが、少しデザインを整えるだけでホームページ全体の印象が大きく変わります。
今回ご紹介したCSSはコピー＆ペーストで利用できますので、ぜひお試しください。
「もっとホームページに合ったデザインにしたい」
「思い通りのレイアウトにならない」
という場合は、お気軽にご相談ください。