WordPress お問い合わせフォーム作り方｜コンタクトフォーム7

2025年1月25日2025年2月4日

URLをコピーしました！

こんにちはrey( @reydesign8376) です
都内の勤務生活を辞めてWebデザイナーに。今は趣味のサーフィンなどしながら海沿いでのんびり暮らしています。

お問い合わせフォームのカスタマイズ最終形態版です！コピペで繰り返し使えるので保存してね！

そんな感じでWordPressのプラグインContact Form 7を作ってきます〜。

フォームコードのサンプル

カスタマイズしたお問い合わせフォームのコードです。これをフォームに入力

HTMLコード

<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:company]</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="send_btn">[submit "送信"]</div>
</section>

CSSコード

.cf_section {
    max-width: 900px;
    padding: 0 1rem;
}
.cf_section .inner {
    display: flex;
    align-items: center;
    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 {
    background: #e51a1a;
    font-size: 0.75rem;
    padding: 0.3rem 0.3rem 0.1rem;
    color: #fff;
}

.any_label {
    background: #a9a9a9;
    font-size: 0.75rem;
    padding: 0.3rem 0.3rem 0.1rem;
    color: #fff;
}

.send_btn input[type="submit"] {
    width: 380px;
    padding: 8px;
    color: #fff;
    background: #03183f;
    border: none;
    margin: auto;
    display: flex;
    justify-content: center;
    font-size: 1.2rem;
    margin-bottom: 1rem;
}

@media screen and (max-width: 781px) {
    .cf_section .inner {
        flex-direction: column;
        align-items: normal;
    }
}