WordPress

WordPress | Contact Form7 プラグインでメール送信成功後のメッセージ表示を操作する

WordPress の Contact Form7 プラグインを使用しメール送信に成功した場合、サンクスメッセージを表示し、メールフォームを非表示にする。

送信後のメッセージを表示する

メール送信後のサンクスメッセージを表示する場所に、[response]を追記する。

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
[response]

<label> 氏名
    [text* your-name] </label>

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

<label> 題名
    [text* your-subject] </label>

<label> メッセージ本文 (任意)
    [textarea your-message] </label>

[submit "送信"]

[response]

メールを送信すると、以下のメッセージが表示される。

メール送信に成功したらメールフォームを非表示にする

メール送信に成功すると、以下のように form タグに sent クラスが追加される。

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
<form action="/hello-world/?preview_id=1&amp;preview_nonce=9a579e0c44&amp;preview=true#wpcf7-f5-p1-o1" method="post" class="wpcf7-form sent" novalidate="novalidate" data-status="sent">
<div style="display: none;">
<input type="hidden" name="_wpcf7" value="5">
<input type="hidden" name="_wpcf7_version" value="5.3.2">
<input type="hidden" name="_wpcf7_locale" value="ja">
<input type="hidden" name="_wpcf7_unit_tag" value="wpcf7-f5-p1-o1">
<input type="hidden" name="_wpcf7_container_post" value="1">
<input type="hidden" name="_wpcf7_posted_data_hash" value="9b00d29f8213385a761477c77e1ad824">
</div>
<div class="wpcf7-response-output" aria-hidden="true" style="">ありがとうございます。メッセージは送信されました。</div>
<p><label> 氏名<br>
    <span class="wpcf7-form-control-wrap your-name"><input type="text" name="your-name" value="" size="40" class="wpcf7-form-control wpcf7-text wpcf7-validates-as-required" aria-required="true" aria-invalid="false" aria-describedby="wpcf7-f5-p1-o1-ve-your-name"></span> </label></p>
<p><label> メールアドレス<br>
    <span class="wpcf7-form-control-wrap your-email"><input type="email" name="your-email" value="" size="40" class="wpcf7-form-control wpcf7-text wpcf7-email wpcf7-validates-as-required wpcf7-validates-as-email" aria-required="true" aria-invalid="false" aria-describedby="wpcf7-f5-p1-o1-ve-your-email"></span> </label></p>
<p><label> 題名<br>
    <span class="wpcf7-form-control-wrap your-subject"><input type="text" name="your-subject" value="" size="40" class="wpcf7-form-control wpcf7-text wpcf7-validates-as-required" aria-required="true" aria-invalid="false" aria-describedby="wpcf7-f5-p1-o1-ve-your-subject"></span> </label></p>
<p><label> メッセージ本文 (任意)<br>
    <span class="wpcf7-form-control-wrap your-message"><textarea name="your-message" cols="40" rows="10" class="wpcf7-form-control wpcf7-textarea" aria-invalid="false"></textarea></span> </label></p>
<p><input type="submit" value="送信" class="wpcf7-form-control wpcf7-submit"><span class="ajax-loader"></span></p>
<div class="wpcf7-response-output" aria-hidden="true" style="">ありがとうございます。メッセージは送信されました。</div><br>
</form>

そこで、フォーム内に <div class="wpcf7-form">...</form> を追加する。

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
[response]
<div class="wpcf7-form">
<label> 氏名
    [text* your-name] </label>

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

<label> 題名
    [text* your-subject] </label>

<label> メッセージ本文 (任意)
    [textarea your-message] </label>

[submit "送信"]
</div>
[response]

[外観]→[カスタマイズ]→[追加CSS] に CSS を追記する。

1
2
3
form.sent div.wpcf7-form{
    display:none;
}

結果、メール送信に成功すると以下のようにフォームが非表示になる。