HTMLには
※送信後は、いらんフォームを消す
<div class="contact-input-area">
<label><span class="hissu">必須</span>お名前<div id="koumoku">[text* your-name] </div></label>
<label><span class="hissu">必須</span>メールアドレス<div id="koumoku"> [email* your-email] </div></label>
<label><span class="hissu">必須</span>郵便番号 住所自動入力<div id="koumoku">[text* zip id:zip watermark"例：7300123"] </div> </label>
<label><span class="hissu">必須</span>都道府県<div id="koumoku">[text* pref id:pref watermark"例：広島県"]</div></label>
<label><span class="hissu">必須</span>ご住所<div id="koumoku">[text* addr id:addr watermark"例：広島市中区大手町２丁目５−１１"]</div></label>
<label><span class="nini">任意</span>職種<div id="koumoku">[text text-54 watermark"例：建設業 不動産業など"]</div></label>
<span class="hissu">必須</span>資格認定講座とセット申込ですか？
<div id="koumoku2">[checkbox checkbox-212 "はい" "いいえ"]</div>
<strong><span class="hissu">必須</span>DIYリフォームアドバイザー資格取得の目的（複数回答可）</strong>
<div id="koumoku2">[checkbox checkbox-667 "自宅をリフォームしたい" "所有空き家をリフォームしたい" "所有する賃貸住宅のリフォームに活用したい" "現在の仕事に活かしたい" "新しいビジネスを考えたい"]</div>
<label><div class="qqqq">ご質問などどうぞ</div>
[textarea your-message] </label>
[acceptance acceptance-0]内容をご確認の上チェックを入れてください[/acceptance]
[submit "送信する"]
</div>
<div class="complete-display">
お問合せありがとうございます
後日スタッフより折り返しさせて頂きます
<a href="/">トップページへ戻る</a>
</div>CSS
※contactform7標準のメッセージに
ご記入いただいたメールアドレスに確認メールを送信しています
を書き換えておくとベター
/*————————————————————–
# form系
————————————————————–*/
.qqqq{
font-weight: bold;
font-size: 110%;
margin-top: 10px;
margin-bottom: 5px;
}
.sent .contact-input-area{
display: none;
}
span.wpcf7-list-item {
display: block;
}
.complete-display{
display: none;
}
.sent .complete-display{
display: block;
text-align: center;
}
.hissu{
background-color: #DB2446;
padding-top: 6px;
padding-right: 10px;
padding-bottom: 4px;
padding-left: 10px;
color: #FFFFFF;
font-weight: bold;
margin-right: 18px;
}
.nini{
background-color: #177AB8;
padding-top: 6px;
padding-right: 10px;
padding-bottom: 4px;
padding-left: 10px;
color: #FFFFFF;
font-weight: bold;
margin-right: 18px;
}
#koumoku{
margin-top: 10px;
}
#koumoku2{
margin-top: 10px;
margin-bottom: 10px;
}
.wpcf7 input[name=”your-name”],
.wpcf7 input[name=”your-email”],
.wpcf7 input[name=”zip”],
.wpcf7 input[name=”pref”],
.wpcf7 input[name=”addr”]{
width: 50%;
height: 35px !important;
}
.wpcf7 textarea[name=”your-message”] {
width: 80%;
height: 350px !important;
}
/* 送信ボタンのカスタマイズ */
.wpcf7 input[type=”submit”] {
font-size: 100%; /* フォントの大きさ */
padding: 1em 2em; /* 「送信する」という文字とボタンの枠までの間隔（上下1文字、左右2文字を指定）*/
background: #00008b; /* 背景色 */
color: #ffffff; /* 文字色 */
border-radius: 4px; /* コーナーを微妙に丸く*/
box-shadow: 0 2px 4px rgba(0,0,0,0.2); /* ボタンに影をつけて立体的に */
border: 1px solid #ccc; /* ボタンの枠の指定 */
text-align: center; /* ボタンの中の文字の位置の指定（中央）*/
}
/* 送信ボタンにマウスが乗ったら色を変える */
.wpcf7 input[type=”submit”]:hover {
background: #f0ffff; /* マウスが乗ったら背景色を変更 */
color: #555555; /* マウスが乗ったら文字色を変更 */
}
住所自動入力は
<!-- ajaxzip -->
<script src="https://ajaxzip3.github.io/ajaxzip3.js" charset="UTF-8"></script>
<script type="text/javascript">
jQuery(function(){
jQuery('#zip').keyup(function(event){
AjaxZip3.zip2addr(this,'','pref','addr');
})
})
</script>
footer.phpの＜/body＞直前にいれてみてください
サンクスページ ファンクションに入れるだけ
<script type=”text/javascript”>
document.addEventListener( ‘wpcf7mailsent’, function( event ) {
location = ‘作成したサンクスページアドレス’;
}, false );
</script>
画面変移せずに完了画面
https://www.cherrypieweb.com/weblog/technical/20121211133906.php]
セキュリティも忘れずに reCAPTCHA v3
https://www.google.com/recaptcha/admin/create
↑
上記から発行する
サイトキーとシークレットキーを contactform7のインテグレーションに入れるだけ