WordPressのお問い合わせフォームの作り方【CSSデザインアレンジも】

ご用件を選択してください (必須)
[checkbox* checkbox-checkbox-choose exclusive use_label_element "お問い合わせ" "ご予約"]

<label> お名前 (必須)
    [text* your-name] </label>

<label> ふりがな (必須)
[text* your-name-kana] </label>

<label> メールアドレス (必須)
    [email* your-email] </label>

<label> 電話番号 (任意)
    [tel your-phonenumber] </label>

<label> お問い合わせ内容をご記入ください
    [textarea your-message] </label>

[submit "送信"]

/*---------------お問い合わせページ---------------*/

.wpcf7 input[name="your-name"],
.wpcf7 input[name="your-name-kana"],
.wpcf7 input[name="your-email"],
.wpcf7 input[name="your-phonenumber"]
 {
        width: 100%;
        height: 35px !important;
	background: #fff;
}
.wpcf7 textarea[name="your-message"] {
        width: 100%;
        height: 300px !important;
	background: #fff;
}
.wp-block-contact-form-7-contact-form-selector {
    background-color: #EEEDFA;/* フォーム背景色 */
    padding: 20px;
}
.wpcf7 input[type="submit"] {
width:50%;
padding:10px;
margin-top: 30px;
margin-left: 25%;
color: #fff;/* ボタン文字色 */
border-radius:10px;
-webkit-border-radius: 0px;  
-moz-border-radius: 0px;
border: none;
box-shadow: 0 3px 0 #ddd;
background: #e6b8c8;/* ボタン背景色 */
transition: 0.3s;
}
.wpcf7-submit:hover {
opacity: 0.7;
transform: translate3d(0px, 3px, 1px);
-webkit-transform: translate3d(0px, 3px, 1px);
-moz-transform: translate3d(0px, 3px, 1px);
}

差出人: [your-name] <[your-email]>

お名前： [your-name]
ふりがな： [your-name-kana]
メールアドレス： [your-email]
電話番号： [your-phonenumber]
お問い合わせ内容： [your-message]

-- 
このメールは [_site_title] ([_site_url]) のお問い合わせフォームから送信されました

[your-name]様

この度はお問い合わせいただきありがとうございます。

お問い合わせ内容を確認の上、3日以内に返信致しますので、しばらくお待ちくださいませ。

-- 
このメールは [_site_title] ([_site_url]) のお問い合わせフォームから送信されました

━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━
以下の内容でメールを受け付けました。
━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━

お名前： [your-name]
ふりがな： [your-name-kana]
メールアドレス： [your-email]
電話番号： [your-phonenumber]
ご用件： [checkbox-checkbox-choose]
お問い合わせ内容： [your-message]