『フォーム』に以下のコードをコピペ
Contact Form 7 の設定画面にある『フォーム』に以下のコードをまるっとコピペします。
<div class="cf7">
<dl class="cf7__list">
<dt><span class="cf7__required">必須</span>お問い合わせ分野</dt>
<dd class="cf7__select">[select menu first_as_label "選択してください" "メニュー1" "メニュー2" "メニュー3" "メニュー4" "メニュー5" "メニュー6" "メニュー7" "メニュー8" "メニュー9" "メニュー10"]</dd>
<dt><span class="cf7__required">必須</span>お問い合わせ分野</dt>
<dd>[radio your-radio use_label_element default:1 "オプション1" "オプション2" "オプション3"]</dd>
<dt><span class="cf7__required">必須</span>お問い合わせ分野</dt>
<dd>[checkbox checkbox use_label_element "チェックボックス1" "チェックボックス2" "チェックボックス3"]</dd>
<dt><span class="cf7__optional">任意</span>会社名</dt>
<dd>[text your-company-name placeholder "株式会社●●●●"]</dd>
<dt><span class="cf7__required">必須</span>お名前</dt>
<dd>[text* your-name placeholder "山田 花子"]</dd>
<dt><span class="cf7__optional">任意</span>ふりがな</dt>
<dd>[text* your-name placeholder "やまだ はなこ"]</dd>
<dt><span class="cf7__required">必須</span>電話番号</dt>
<dd>[tel your-tel placeholder "000-0000-0000"]</dd>
<dt><span class="cf7__required">必須</span>メールアドレス</dt>
<dd>[email* your-email placeholder "example@example.com"]</dd>
<dt><span class="cf7__required">必須</span>お問い合わせ内容</dt>
<dd>[textarea your-message 40x10]</dd>
</dl>
<div class="cf7__button">[submit "送信する"]</div>
</div>追加CSS、またはstyle.cssに以下のコードをコピペ
.cf7__list {
display: flex;
flex-wrap: wrap;
margin-bottom: 60px;
}
.cf7__list dt:nth-of-type(n + 2),
.cf7__list dd:nth-of-type(n + 2) {
margin-top: 30px;
}
.cf7__list dt {
width: 35%;
padding-top: 15px;
}
.cf7__list dd {
width: 65%;
}
/* 必須・任意 */
.cf7__required,
.cf7__optional {
margin-right: 15px;
padding: 6px 14px;
color: #fff;
font-size: 12px;
vertical-align: 1px;
}
.cf7__required {
background: #BE1D1D;
}
.cf7__optional {
background: #878D8E;
}
/* input・textarea */
.cf7__list dd input[type="text"],
.cf7__list dd input[type="tel"],
.cf7__list dd input[type="email"],
.cf7__list dd textarea {
width: 100%;
padding: 15px 20px;
background: #F4F4F4;
}
/* ドロップダウンメニュー */
.cf7__select {
position: relative;
}
.cf7__select:before {
position: absolute;
top: 50%;
right: 20px;
z-index: 10;
transform: translateY(-50%);
width: 0;
height: 0;
border-top: 8px solid #000;
border-right: 6px solid transparent;
border-left: 6px solid transparent;
pointer-events: none;
content: '';
}
.cf7__select select {
width: 100%;
padding: 19px 20px;
background: #F4F4F4;
color: #a5a5a5;
-webkit-appearance: none;
-moz-appearance: none;
appearance: none;
}
/* チェックボックス・ラジオボタン */
.cf7__list dd .wpcf7-checkbox,
.cf7__list dd .wpcf7-radio {
display: block;
padding: 15px 0 10px;
}
/* 縦並び(チェックボックス・ラジオボタン) */
.cf7__list dd .wpcf7-list-item {
display: block;
margin: 0;
}
.cf7__list dd .wpcf7-list-item:nth-child(n + 2) {
margin-top: 18px;
}
/* マウスカーソル(チェックボックス・ラジオボタン) */
.cf7__list dd .wpcf7-list-item label {
cursor: pointer;
}
/* チェックボックス・ラジオボタン */
input[type="checkbox"],
input[type="radio"] {
position: relative;
width: 18px;
height: 18px;
margin-right: 8px;
border: 1px solid #bcbcbc;
vertical-align: -3px;
cursor: pointer;
-webkit-appearance: none;
-moz-appearance: none;
appearance: none;
}
/* チェックボックス */
input[type="checkbox"]:checked {
border: 1px solid #000;
background: #000;
}
input[type="checkbox"]:checked:before {
position: absolute;
top: 2px;
left: 5px;
transform: rotate(50deg);
width: 6px;
height: 10px;
border-right: 2px solid #fff;
border-bottom: 2px solid #fff;
content: '';
}
/* ラジオボタン */
input[type="radio"] {
border-radius: 50%;
}
input[type="radio"]:checked:before {
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
width: 9px;
height: 9px;
border-radius: 50%;
background: #000;
content: '';
}
/* プレースホルダー */
/* Google Chrome / Safari / Mozilla Firefox / Opera */
.cf7__list dd input[type="text"]::placeholder,
.cf7__list dd input[type="tel"]::placeholder,
.cf7__list dd input[type="email"]::placeholder,
.cf7__list dd textarea::placeholder {
color: #a5a5a5;
}
/* Microsoft Edge */
.cf7__list dd input[type="text"]::-ms-input-placeholder,
.cf7__list dd input[type="tel"]::-ms-input-placeholder,
.cf7__list dd input[type="email"]::-ms-input-placeholder,
.cf7__list dd textarea::-ms-input-placeholder {
color: #a5a5a5;
}
/* Internet Explorer */
.cf7__list dd input[type="text"]:-ms-input-placeholder,
.cf7__list dd input[type="tel"]:-ms-input-placeholder,
.cf7__list dd input[type="email"]:-ms-input-placeholder,
.cf7__list dd textarea:-ms-input-placeholder {
color: #a5a5a5;
}
/* 送信ボタン */
.cf7__button {
padding-left: 72px;
text-align: center;
}
input[type="submit"] {
width: 260px;
height: 60px;
background: #000;
color: #fff;
transition: opacity .6s;
}
input[type="submit"]:hover {
opacity: .6;
}
/* ajax-loader */
.wpcf7-spinner {
vertical-align: middle;
}
@media screen and (max-width: 767px) {
.cf7__list dt {
width: 100%;
margin-bottom: 15px;
padding-top: 0;
}
.cf7__list dd {
width: 100%;
}
.cf7__list dd:nth-of-type(n + 2) {
margin-top: 0;
}
.cf7__list dd .wpcf7-checkbox,
.cf7__list dd .wpcf7-radio {
padding: 15px 0 0;
}
/* 送信ボタン */
input[type="submit"] {
width: 180px;
height: 56px;
}
}