【コピペでOK】Contact Form7のお問い合わせフォームとカスタマイズ

<table class="table-contact">
<tr>
<th><span class="required">必須</span>お名前</th>
<td>[text* your-name] </td>
</tr>
<tr>
<th><span class="required">必須</span>メールアドレス</th>
<td>[email* your-email]</td>
</tr>
<tr>
<th><span class="required">必須</span>お問い合わせ内容</th>
<td>[textarea* your-message]</td>
</table>

<center>[submit class:send "問い合わせる"]</center>

/* テーブルのタイトル部分 */
.table-contact th {
	background: #f2f2f2;
	font-weight: 500;
}

/* 必須 */
.table-contact .required {
	background: red;
	color: #fff;
	font-size: 12px;
	padding: 5px;
	border-radius: 3px;
	margin-right: 5px;
}

/* スマホ表示用 */
@media screen and (max-width: 767.98px) {
  .table-contact th,.table-contact td  {
		display: block;
}}

//入力例を表示する
[tel* your-tel placeholder"例：555-555-5555"]

//セレクトボックスでデフォルト値をテキストで設定する
[select* your-color first_as_label "選択してください" "red" "blue" "yellow"]

//セレクトボックスで初期値を「---」と設定する
[select* your-color include_blank "red" "blue" "yellow"]

/* チェックボックスとラジオボタンを縦並びにする */
span.wpcf7-list-item {
  display: block;
}

/* チェックボックスを縦並びにする */
span.wpcf7-checkbox .wpcf7-list-item {
  display: block;
}

/* ラジオボタンを縦並びにする */
.wpcf7-radio .wpcf7-list-item {
  display: block;
}