コピペで完成！Elementorで出来る！Contact Form7のデザインからサンクスページ

<dl>
　<dt class="required">氏名</dt>
　<dd>[text* your-name class:text placeholder "山田　太郎"]</dd>

　<dt class="required">貴社名</dt>
　<dd>[text* your-company class:text placeholder "株式会社〇〇〇"]</dd>

　<dt id="sources1_top" class="required">役職</dt>
　<dd>[select* your-position class:select include_blank "経営者／役員" "部長" "課長／マネージャー" "主任" "一般社員" "その他／学生"]</dd>

　<dt class="required">メールアドレス</dt>
　<dd>[email* your-email class:text placeholder "yamada@example.com"]</dd>

　<dt class="required">電話番号<span class="annotation">半角数字と半角ハイフンで入力してください</span></dt>
　<dd>[tel* your-number class:text placeholder "080-1234-5678"]</dd>

　<dt id="required_top" class="required">お問い合わせの種類（複数選択可）</dt>
　<dd>[checkbox* your-subject class:check use_label_element "選択1" "選択2" "選択3"]</dd>

　<dt class="notrequired">お問い合わせ内容</dt>
　<dd>[textarea your-details class:textarea]</dd>

　[acceptance acceptance-127 class:check optional] <a href="">プライバシーポリシー</a>に同意する<span class="require-mark">*</span> [/acceptance]

　[submit class:submit-btn "送信する"]

</dl>

.required::before {
    color: #fff;
    font-size: 12px;
    content: "必須";
    margin-right: 0.5em;
    margin-bottom:0.7em;
    padding: 0.1em 0.7em;
    background-color: #D9544F;
    display: inline-block;
}

.notrequired::before {
    color: #fff;
    font-size: 12px;
    content: "任意";
    margin-right: 0.5em;
    margin-bottom:0.7em;
    padding: 0.1em 0.7em;
    background-color: #2C7AB5;
    display: inline-block;
}

dt {
    padding-bottom: 10px;
}

dd {
    margin-left: 0;
    margin-bottom: 1.5rem;
    margin-right: 0;
}


.annotation {
    font-size: 12px;
}

.wpcf7-form-control.has-spinner.wpcf7-submit.submit-btn {
    display: block;
    margin: auto;
    margin-top: 30px;
    font-size: 16px;
}

.text {
    background-color: #fff;
}

.select {
    color: #333;
}

.require-mark {
    color: red;
}

.form-control, .form-group .form-control, .woocommerce form .form-row input.input-text, .woocommerce form .form-row textarea {
    background-color: #fff !important;
}

.wpcf7-list-item {
    display: block
}

textarea.wpcf7-form-control.wpcf7-textarea.wpcf7-validates-as-required.textarea.form-control {
    height: 100px;
}

.optional .wpcf7-list-item {
    margin: auto;
    font-size: 14px;
    text-align: center;
}

.br-sp {
    display: contents;
}

@media screen and (max-width: 767px) {
    .br-sp {
        display: block;
    }
}

【至急対応】公式HPからのお問い合わせ

差出人: [your-name] <[your-email]>
会社名：[your-company]
役職；[your-position]
電話番号：[your-number]

問い合わせ種別：[your-subject]

問い合わせ本文:
[your-details]

【〇〇へお問い合わせありがとうございます。】

※このメールはシステムからの自動返信です

[your-name] 様

お世話になっております。
お問い合わせ頂きありがとうございました。

以下の内容でお問い合わせを受け付けております。
2営業日以内に、担当者よりご連絡いたしますので
今しばらくお待ちくださいませ。

--------お問い合わせ内容--------
差出人: [your-name] <[your-email]>
会社名：[your-company]
役職；[your-position]
電話番号：[your-number]

問い合わせ種別：[your-subject]

問い合わせ本文:
[your-details]

Contact

お問い合わせ
この度はお問い合わせ頂き誠にありがとうございます。
5営業日以内に、担当者よりご連絡いたします。

サイトへ戻る