【コピペOK】WordPressお問い合わせフォームの作り方｜Contact Form 7の設定・デザイン・入力チェックまで

<section class="cf_section">
    <div class="inner">
        <div class="item detail"><span class="description">法人名</span><span class="any_label">任意</span></div>
        <div class="item value">[text your-company autocomplete:organization]</div>
    </div>
    <div class="inner">
        <div class="item detail"><span class="description">お名前</span><span class="required_label">必須</span></div>
        <div class="item value">[text* your-name autocomplete:name]</div>
    </div>
    <div class="inner">
        <div class="item detail"><span class="description">メールアドレス</span><span class="required_label">必須</span></div>
        <div class="item value">[email* your-email autocomplete:email]</div>
    </div>
    <div class="inner">
        <div class="item detail"><span class="description">電話番号</span><span class="required_label">必須</span></div>
        <div class="item value">[tel* your-tel autocomplete:tel]</div>
    </div>
    <div class="inner selectlist">
        <div class="item detail"><span class="description">お問い合わせ事項</span></div>
        <div class="item value">[checkbox checklist use_label_element "〇〇について" "△△について" "××について" "その他"]</div>
    </div>
    <div class="inner message">
        <div class="item detail"><span class="description">お問い合わせ内容</span><span class="any_label">任意</span></div>
        <div class="item value">[textarea message]</div>
    </div>

    <div class="privacy">[acceptance privacy-agree]<a href="/privacy-policy/" target="_blank">プライバシーポリシー</a>に同意する[/acceptance]</div>
    <div class="send_btn">[submit "送信"]</div>
</section>

.cf_section {
    max-width: 900px;
    margin: 0 auto;
    padding: 0 1rem;
}
.cf_section .inner {
    display: flex;
    align-items: center;
    gap: 1rem;
    margin-bottom: 2rem;
}
.cf_section .inner.message {
    align-items: flex-start;
}
.cf_section .item.detail {
    flex: 1;
}
.cf_section .item.value {
    flex: 1.3;
}

/* 必須・任意ラベル */
.required_label,
.any_label {
    font-size: 0.75rem;
    padding: 0.3rem 0.3rem 0.1rem;
    margin-left: 0.5rem;
    color: #fff;
}
.required_label { background: #e51a1a; }
.any_label { background: #a9a9a9; }

/* 入力欄 */
.cf_section input[type="text"],
.cf_section input[type="email"],
.cf_section input[type="tel"],
.cf_section textarea {
    width: 100%;
    padding: 0.6em 0.8em;
    border: 1px solid #ccc;
    border-radius: 4px;
    font-size: 1rem;
    box-sizing: border-box;
}
.cf_section input:focus,
.cf_section textarea:focus {
    outline: none;
    border-color: #03183f;
    box-shadow: 0 0 0 3px rgba(3, 24, 63, 0.15);
}

/* エラー表示 */
.cf_section .wpcf7-not-valid {
    border-color: #e51a1a;
}
.cf_section .wpcf7-not-valid-tip {
    color: #e51a1a;
    font-size: 0.85rem;
    margin-top: 0.3em;
}

/* 同意チェックと送信ボタン */
.cf_section .privacy {
    text-align: center;
    margin-bottom: 1.5rem;
}
.send_btn input[type="submit"] {
    display: block;
    width: min(380px, 100%);
    margin: 0 auto 1rem;
    padding: 0.8em;
    color: #fff;
    background: #03183f;
    border: none;
    font-size: 1.2rem;
    cursor: pointer;
    transition: opacity 0.2s;
}
.send_btn input[type="submit"]:hover {
    opacity: 0.8;
}
.send_btn input[type="submit"]:disabled {
    opacity: 0.4;
    cursor: not-allowed;
}

/* スマホでは縦並び */
@media screen and (max-width: 781px) {
    .cf_section .inner {
        flex-direction: column;
        align-items: stretch;
        gap: 0.5rem;
    }
}

サイトからお問い合わせがありました。

法人名：[your-company]
お名前：[your-name]
メールアドレス：[your-email]
電話番号：[your-tel]
お問い合わせ事項：[checklist]

お問い合わせ内容：
[message]

[your-name] 様

お問い合わせいただき、ありがとうございます。
以下の内容で受け付けました。
3営業日以内にご返信いたしますので、少々お待ちください。

---
お問い合わせ内容：
[message]
---

[_site_title]
[_site_url]