contactform7の送信完了メッセージ位置変更方法

ワードプレスのプラグインcontactform7の送信メッセージについてなんですが、送信後一番下に出てくるのでわかりずらかったりするのでわかりやすい位置に変更してしまおうということです。

とっても簡単です。


スポンサーリンク

contact-form7送信完了メッセージ位置変更方法

普通はこのように表示されますよね。
form1

だけどこれを[response]とフォームに記述します。表示させたいところに書いてください。今回送信フォームボタンの上に表示させるようにしました。一番上に書いても良いですし、わかりやすいところに書きましょう。
form2

このようにボタンの上にうまく表示できました。
form3

あとそれから送信完了後にsentというクラスがつくのでCSSでフォーム自体を消してしまうのも手です。

.sent .hidden {
display: none;
}

このようにかいてしまえばOKです
form4

すると送信後フォームが消えてメッセージのみが残ります。いいですね。

Pocket
LINEで送る

スポンサーリンク

コメントを残す

メールアドレスが公開されることはありません。 * が付いている欄は必須項目です