ContactForm7 CSSデザイン

html

<table class="inquiry">
    <tr>
        <th>
            <span class="haveto">必須</span><span>お名前</span>
        </th>
        <td>
            [text* your-name class:textsp placeholder"山田　総一朗"]
        </td>
    </tr>
    <tr>
        <th>
            <span class="haveto">必須</span><span>メールアドレス</span>
        </th>
        <td>[email* your-email class:mailsp placeholder"[e-mail]"]</td>
    </tr>
    <tr>
        <th>
            <span class="any">任意</span><span>電話番号</span>
        </th>
        <td>
            [tel your-tel class:tel placeholder"090-1111-2222"]
        </td>
    </tr>
    <tr>
        <th>
            <span class="haveto">必須</span><span>ドロップダウンメニュー</span>
        </th>
        <td>
            [select* dpmenu include_blank class:drop "サンプル1" "サンプル2" "サンプル3"]
        </td>
    </tr>
    <tr>
        <th>
            <span class="any">任意</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="haveto">必須</span><span>チェックボックス横並び【複数を選択】</span>
        </th>
        <td>
            [checkbox* checkbox-2 use_label_element default:1 class:check2 "サンプル7" "サンプル8" "サンプル9"]</td>
    </tr>
    <tr>
        <th>
            <span class="any">任意</span><span>チェックボックス縦並び【１つを選択】</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="haveto">必須</span><span>チェックボックス縦並び【複数を選択】</span>
        </th>
        <td>
            [checkbox* checkbox-4 use_label_element default:1 class:verticallist class:check4 "サンプル13" "サンプル14" "サンプル15"]
        </td>
    </tr>
    <tr>
        <th>
            <span class="any">任意</span><span>ラジオボタン横並び</span>
        </th>
        <td>
            [radio radio-1 use_label_element default:1 class:radio1 "サンプル16""サンプル17""サンプル18"]
        </td>
    </tr>
    <tr>
        <th>
            <span class="haveto">必須</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="any">任意</span><span>数値のスピン形式</span>
        </th>
        <td>
            [number number-1 min:10 max:100 placeholder class:number1 "数値の値は指定できる"]
        </td>
    </tr>
    <tr>
        <th>
            <span class="haveto">必須</span><span>日付</span>
        </th>
        <td>
            [date* date-960 placeholder class:datesp ]
        </td>
    </tr>
    <tr>
        <th>
            <span class="any">任意</span><span>１行で収まる回答形式</span>
        </th>
        <td>
            [quiz quiz-1 class:qyizsp "例：職業"]
        </td>
    </tr>
    <tr>
        <th>
            <span class="haveto">必須</span><span>郵便番号</span>
        </th>
        <td>
            [text* your-postalcode class:p-postal-code placeholder"123-4567"]
        </td>
    </tr>
    <tr>
        <th>
            <span class="haveto">必須</span><span>都道府県</span>
        </th>
        <td>
            [text* your-prefectures class:p-region placeholder"◯◯県"]
        </td>
    </tr>
    <tr>
        <th>
            <span class="haveto">必須</span><span>ご住所</span>
        </th>
        <td>
            [text* your-address class:p-locality placeholder"○○市○○1-2-3 ○○マンション 101号室"]
        </td>
    </tr>
    <tr>
        <th>
            <span class="haveto">必須</span><span>お問い合わせ内容</span>
        </th>
        <td>
            [textarea* your-message class:content placeholder "１行以上のテキスト入力欄"]
        </td>
    </tr>
</table>
<div class="form-btn">[confirm id:formbtn1 "確認"][back id:formbtn2 "戻る"][submit id:formbtn3 "送信"]</div>

css

@media(max-width:1000px) {
    .inquiry th,
    .inquiry td {
        -webkit-box-sizing: border-box !important;
        -moz-box-sizing: border-box !important;
        box-sizing: border-box !important;
        border-top: none !important;
        display: block !important;
        width: 100% !important;
    }
    .inquiry tr:first-child th {
        border-top: 1px solid #d7d7d7 !important;
    }
    /* 必須・任意のサイズ調整 */
    .inquiry .haveto,
    .inquiry .any {
        font-size: 10px;
    }
}
.inquiry {
    width: 100%;
}
.inquiry th {
    background: #f7f7f7;
    border: solid 1px #d7d7d7;
    color: #444;
    font-size: 14px;
    text-align: left;
    padding-right: 5px;
    vertical-align: middle;
    width: 35%;
}
.inquiry td {
    border: solid 1px #d7d7d7;
    font-size: 13px;
}
/*横の行とテーブル全体*/
.entry-content .inquiry tr,
.entry-content table {
    border: solid 1px #d7d7d7;
}
/*必須の調整*/
.haveto {
    background: #ff9393;
    border-radius: 2px;
    bottom: 1px;
    color: #fff;
    font-size: 7px;
    margin-right: 5px;
    padding: 5px;
    position: relative;
}
/*任意の調整*/
.any {
    background: #93c9ff;
    border-radius: 2px;
    bottom: 1px;
    color: #fff;
    font-size: 7px;
    margin-right: 5px;
    padding: 5px;
    position: relative;
}
/*ラジオボタンを縦並び指定*/
.verticallist .wpcf7-list-item {
    display: block;
}
.wpcf7 input[type="text"],
.wpcf7 input[type="email"],
.wpcf7 input[type="url"],
.wpcf7 input[type="tel"],
.wpcf7 input[type="number"],
.wpcf7 input[type="date"],
.wpcf7 textarea,
.wpcf7 select {
    border: 3px solid #d7d7d7;
    padding: 10px;
    width: 100%;
}
/*送信ボタンのデザイン変更*/
#formbtn1,
#formbtn2,
#formbtn3 {
    background: #93C9FF;
    border: none;
    border-radius: 2px;
    color: #fff;
    cursor: pointer;
    font-size: 18px;
    margin: 0 20px;
    padding: 10px 0;
    width: 20%;
}
#formbtn1 {
    background: #93C9FF;
}
#formbtn2 {
    background: #FF9393;
}
#formbtn3 {
    background: #9ACD32;
}
.form-btn {
    margin-top: 70px;
    text-align: center;
    width: 100%;
}