Contact Form7の送信完了画面をカスタマイズ
お問い合わせプラグインContact Form7の送信後の送信完了関連のカスタマイズです。
送信後にお問い合わせフォームを非表示
送信完了メッセージに気づきにくいということで、送信後に「お問い合わせフォーム」を非表示にし、送信完了メッセージだけを残します。
送信が完了するとformタグにsentというクラスが付くのでそれを利用します。
まずはコンタクトフォームの編集画面でフォーム全体を適当なクラスで囲みます。
|
1 2 3 4 5 6 7 8 9 10 |
<div class="cform7"> //適当なクラス <p>お名前 (必須)[text* your-name] </p> <p>メールアドレス (必須)[email* your-email] </p> <p>メッセージ本文[textarea your-message] </p> <p>画像認証</p>[captchac captcha-664] <p>上の文字を入力してください。[captchar captcha-664]</p> <p>[submit "送信"]</p> </div> |
スタイルシートに↓を追加すれば送信後にフォームが非表示になります。
|
1 |
.sent .cform7 { display: none; } |
送信後に送信完了メッセージとは別のメッセージを表示したい
適当なクラスで囲んだものを表示したい部分に挿入します。
|
1 |
<div class="cf_message">送信後に表示したい内容をここに入れます。</div> |
スタイルシートに↓を追加すると、上の内容が、送信前は非表示、送信後は表示となります。
|
1 2 |
.cf_message{ display: none; } .sent .cf_message{ display: block; } |
コメントを残す