カスタマイズコード

<table class="form-table">
    <tr>
        <th>
            <span class="must">必須</span><span>お名前</span>
        </th>
        <td>
            [text* your-name class:textsp placeholder"山田 太郎"]
        </td>
    </tr>


    <tr>
        <th>
            <span class="optional">任意</span><span>電話番号</span>
        </th>
        <td>
            [tel your-tel class:tel placeholder"090-1234-5678"]
        </td>
    </tr>


    <tr>
        <th>
            <span class="must">必須</span><span>メールアドレス</span>
        </th>
        <td>[email* your-email class:mailsp placeholder"example@example.com"]</td>
    </tr>


    <tr>
        <th>
            <span class="must">必須</span><span>ドロップダウン</span>
        </th>
        <td>
            [select* dpmenu include_blank class:drop "項目1" "項目2" "項目3"]
        </td>
    </tr>


    <tr>
        <th>
            <span class="optional">任意</span><span>チェックボックス（１つのみ選択可）</span>
        </th>
        <td>
            [checkbox checkbox-1 exclusive use_label_element default:1 class:check1 "項目4" "項目5" "項目6"]
        </td>
    </tr>


    <tr>
        <th>
            <span class="must">必須</span><span>チェックボックス（複数選択）</span>
        </th>
        <td>
            [checkbox* checkbox-2 use_label_element default:1 class:check2 "項目7" "項目8" "項目9"]</td>
    </tr>


    <tr>
        <th>
            <span class="optional">任意</span><span>チェックボックス縦Ver（１つのみ選択可）</span>
        </th>
        <td>
            [checkbox checkbox-3 exclusive use_label_element default:1 class:verticallist class:check3 "項目10" "項目11"
            "項目12"]
        </td>
    </tr>


    <tr>
        <th>
            <span class="must">必須</span><span>チェックボックス縦Ver（複数選択可）</span>
        </th>
        <td>
            [checkbox* checkbox-4 use_label_element default:1 class:verticallist class:check4 "項目13" "項目14"
            "項目15"]
        </td>
    </tr>


    <tr>
        <th>
            <span class="optional">任意</span><span>ラジオボタン横</span>
        </th>
        <td>
            [radio radio-1 use_label_element default:1 class:radio1 "項目16""項目17""項目18"]
        </td>
    </tr>


    <tr>
        <th>
            <span class="must">必須</span><span>ラジオボタン縦</span>
        </th>
        <td>
            [radio radio-2 use_label_element default:1 class:verticallist class:radio2 "項目19""項目20""項目21"]
        </td>
    </tr>


    <tr>
        <th>
            <span class="must">必須</span><span>郵便番号</span>
        </th>
        <td>
            [text* your-postalcode class:p-postal-code placeholder"123-4567"]
        </td>
    </tr>


    <tr>
        <th>
            <span class="must">必須</span><span>都道府県</span>
        </th>
        <td>
            [text* your-prefectures class:p-region placeholder"◯◯県"]
        </td>
    </tr>


    <tr>
        <th>
            <span class="must">必須</span><span>住所</span>
        </th>
        <td>
            [text* your-address class:p-locality placeholder"○○市△△町1-2-3 ○○ハイツ 103号室"]
        </td>
    </tr>


    <tr>
        <th>
            <span class="optional">任意</span><span>数値（回転式）</span>
        </th>
        <td>
            [number number-1 min:10 max:100 placeholder class:number1 "手動入力"]
        </td>
    </tr>


    <tr>
        <th>
            <span class="must">必須</span><span>日付け</span>
        </th>
        <td>
            [date* date-960 placeholder class:datesp ]
        </td>
    </tr>
    

    <tr>
        <th>
            <span class="must">必須</span><span>お問い合わせ内容</span>
        </th>
        <td>
            [textarea* your-message class:content placeholder "ご自由にお書きください"]
        </td>
    </tr>


</table>
[acceptance acceptance-442 class:spam1]スパムメール防止のため、こちらのボックスにチェックを入れてから送信してください。
[submit id:formbtn "上記の内容で送信する"]

/*Contact Form 7カスタマイズ*/

/*見出し欄*/
.form-table th {
    text-align: left;
    font-size: 14px;
    color: #333;
    padding-right: 5px;
    width: 30%;
    background: #e8e8e8;
    border: solid 1px #e8e8e8;
}

/*通常欄*/
.form-table td {
    font-size: 13px;
    border: solid 1px #e8e8e8;
}

/*横の行とテーブル全体*/
.entry-content .form-table tr,
.entry-content table {
    border: solid 1px #e8e8e8;
}

/*必須の調整*/
.must {
    font-size: 7px;
    padding: 5px;
    background: #ff5e5e;
    color: #fff;
    border-radius: 2px;
    margin-right: 5px;
    position: relative;
    bottom: 1px;
}

/*任意の調整*/
.optional {
    font-size: 7px;
    padding: 5px;
    background: #2e8ae6;
    color: #fff;
    border-radius: 2px;
    margin-right: 5px;
    position: relative;
    bottom: 1px;
}

/*ラジオボタンを縦並び指定*/
.verticallist .wpcf7-list-item {
    display: block;
}

/*送信ボタンのデザイン変更*/
#formbtn {
    display: block;
    padding: 1em 0;
    margin-top: 30px;
    width: 100%;
    background: #3ec60a;
    color: #fff;
    font-size: 18px;
    font-weight: bold;
    border-radius: 2px;
    border: none;
    transition: all .3s;
}

/*送信ボタンマウスホバー時*/
#formbtn:hover {
    opacity: .8;
}

/*スマホContact Form 7カスタマイズ*/
@media(max-width:500px) {

    .form-table th,
    .form-table td {
        display: block !important;
        width: 100% !important;
        border-top: none !important;
        -webkit-box-sizing: border-box !important;
        -moz-box-sizing: border-box !important;
        box-sizing: border-box !important;
    }

    .form-table tr:first-child th {
        border-top: 1px solid #e8e8e8 !important;
    }

    /* 必須・任意のサイズ調整 */
    .form-table .must,
    .form-table .optional {
        font-size: 10px;
    }
}