Skip to content

Contact Form 7 – Multistep を使用してフォーム内容確認画面・HTMLでフォーム見本

ラップトップ、Gmail

お問い合わせフォーム ステップ1 - 入力フォーム

    <table class="-w-table -w-font_title2">
    <tr class="-w-table__col">
        <th class="-w-table__ttl">
            お問い合わせ種別
        </th>
        <td class="-w-table__input">
            [radio contact_type use_label_element default:1 "お問い合わせ" "資料請求" "業務提携" "その他"]
            [group other-selected][text type_other][/group]
            
        </td>
    </tr>
    <tr class="-w-table__col">
        <th class="-w-table__ttl">
            社名・店名<span class="-w-require">必須</span>
        </th>
        <td class="-w-table__input">
            [text* company]
            <div class="input-sample">(個人様の場合は「個人」と記載してください。)</div>
        </td>
    </tr>
    <tr class="-w-table__col">
        <th class="-w-table__ttl">
            お名前<span class="-w-require">必須</span>
        </th>
        <td class="-w-table__input td-align-horiz">
            <span class="v-chousei">姓</span>[text* name-sei class:input-name-sei]
            <span class="v-chousei">名</span>[text* name-mei class:input-name-mei]
        </td>
    </tr>
    <tr class="-w-table__col">
        <th class="-w-table__ttl">
            メールアドレス<span class="-w-require">必須</span>
        </th>
        <td class="-w-table__input">
            [email* email]
            <div class="input-sample">携帯メールへは送信できない事がございます。
                設定をご確認ください。</div>
        </td>
    </tr>
    <tr class="-w-table__col">
        <th class="-w-table__ttl">
            メールアドレス(確認)<span class="-w-require">必須</span>
        </th>
        <td class="-w-table__input">
            [email* email_confirm]
        </td>
    </tr>
    <!-- //ボタン -->
    <tr class="-w-table__col">
        <th class="-w-table__ttl">
            電話番号<span class="-w-require">必須</span>
        </th>
        <td class="-w-table__input td-align-horiz">
            [tel* tel1 class:input-tel1 minlength:3 maxlength:3]
            <span class="v-chousei">-</span>[tel* tel2 class:input-tel2 minlength:3 maxlength:4]
            <span class="v-chousei">-</span>[tel* tel3 class:input-tel3 minlength:3 maxlength:4]
        </td>
    </tr>
    <tr class="-w-table__col">
        <th class="-w-table__ttl">
            お問い合わせ内容
        </th>
        <td class="-w-table__input">
            [textarea textarea]
        </td>
    </tr>
<tr class="button-area">
<td colspan="2">
    <div class="-w-btn-wrap">
        <div class="-w-btn-wrap__col -w-form-btn">
            <button class="-w-form-btn__body arrow move" type="submit">確認</button>
            [multistep step-01 first_step "/contact/confirm" skip_save]
        </div>
    </div>
</td>
</tr>
</table>   
            
                    
        

入力内容の確認画面 ステップ2

    <table class="-w-table -w-font_title2">
    <tr class="-w-table__col">
        <th class="-w-table__ttl">
            お問い合わせ種別
        </th>
        <td class="-w-table__input">
            [multiform contact_type] [multiform type_other]
        </td>
    </tr>
    <tr class="-w-table__col">
        <th class="-w-table__ttl">
            社名・店名<span class="-w-require">必須</span>
        </th>
        <td class="-w-table__input">
            [multiform company]
            <div class="input-sample">(個人様の場合は「個人」と記載してください。)</div>
        </td>
    </tr>
    <tr class="-w-table__col">
        <th class="-w-table__ttl">
            お名前<span class="-w-require">必須</span>
        </th>
        <td class="-w-table__input td-align-horiz">
            [multiform name-sei class:input-name-sei] [multiform name-mei class:input-name-mei]
        </td>
    </tr>
    <tr class="-w-table__col">
        <th class="-w-table__ttl">
            メールアドレス<span class="-w-require">必須</span>
        </th>
        <td class="-w-table__input">
            [multiform email]
            <div class="input-sample">携帯メールへは送信できない事がございます。
                設定をご確認ください。</div>
        </td>
    </tr>
    <tr class="-w-table__col">
        <th class="-w-table__ttl">
            メールアドレス(確認)<span class="-w-require">必須</span>
        </th>
        <td class="-w-table__input">
            [multiform email_confirm]
        </td>
    </tr>
    <!-- //ボタン -->
    <tr class="-w-table__col">
        <th class="-w-table__ttl">
            電話番号<span class="-w-require">必須</span>
        </th>
        <td class="-w-table__input td-align-horiz">
            [multiform tel1 class:input-tel1]
            <span>-</span>[multiform tel2 class:input-tel2]
            <span>-</span>[multiform tel3 class:input-tel3]
        </td>
    </tr>
    <tr class="-w-table__col">
        <th class="-w-table__ttl">
            お問い合わせ内容
        </th>
        <td class="-w-table__input">
            [multiform textarea]
        </td>
    </tr>
<tr class="button-area">
<td colspan="2">
    <div class="-w-btn-wrap">
        <div class="-w-btn-wrap__col -w-form-btn">
            [previous "戻る"]
            <button class="-w-form-btn__body arrow move" type="submit">送信</button>
            [multistep step-02 last_step send_email "/contact/thanks"]
        </div>
    </div>
</td>
</tr>
</table>   
            
                    
        
最終更新日: 2025-12-05

この記事は役に立ちましたか?

前へ...

htmlにphpを使用する方法

次へ...

WordPressの最新記事をWordPress外のhtmlページに表示される方法