Contact Form 7
美しいフォームを作る。
WordPressでは超定番の問合せフォーム Contact Form 7 ですね。デフォルトのままでは少し味気ないデザインですが、HTMLとCSSを使うとカスタマイズできます。参考までにサンプルを置いときますね。
Contact Form 7 デフォルトHTML
<label> 氏名
[text* your-name] </label>
<label> メールアドレス
[email* your-email] </label>
<label> 題名
[text* your-subject] </label>
<label> メッセージ本文 (任意)
[textarea your-message] </label>
[submit "送信"]
Contact Form 7 HTML 変更例
<label> <span class="haveto">必須</span>お名前
[text* your-name] </label>
<label> <span class="haveto">必須</span>メールアドレス
[email* your-email] </label>
<label> <span class="any">任意</span>題名
[text your-subject] </label>
<label> <span class="haveto">必須</span>メッセージ本文
[textarea* your-message 100x10] </label>
[submit "この内容で送信する"]
Contact Form 7 CSS 記述例
.haveto{
font-size: 16px;
padding:5px;
background:#ff9393;
color:#fff;
border-radius:2px;
margin-right:5px;
position:relative;
bottom:1px;
}
.any{
font-size: 16px;
padding:5px;
background:#93c9ff;
color:#fff;
border-radius:2px;
margin-right:5px;
position:relative;
bottom:1px;
}
.wpcf7 input[name="your-name"] {
width: 100%;
}
.wpcf7 input[name="your-email"] {
width: 100%;
}
.wpcf7 input[name="your-subject"] {
width: 100%;
}
.wpcf7 textarea[name="your-message"] {
width: 100%;
}
.wpcf7-form-control.wpcf7-submit {
display: block;
margin-right: auto;
margin-left: auto;
padding:15px;
width:200px;
background:#37474F;
color:#fff;
font-size:16px;
border-radius:0px;
margin:30px auto 0;
transition: 0.5s;
}
.wpcf7-form-control.wpcf7-submit:hover{
background:#4790BB;
width:256px;
color:#fff;
border-radius:2px;
}
Contact Form 7 デザイン完了
[bws_google_captcha]