WordPressテンプレートでContactForm7プラグインを使用しています。フォームと関連するCSSを作成したので、すべてが正常に機能しています。送信ボタンをクリックしてメールが正常に送信されたら、次のことを行う必要があります。フォームが消えて「送信済み」と表示されます。その代わりに。変更する必要のあるコードを知る必要があります。私がやりたいことを示している写真を見てください
46901 次
11 に答える
7
「on_sent_ok：」と「on_submit」はContact Form 7 5.0から削除されているため、2つの利用可能なオプションのいずれかを使用する必要があります。
- wpcf7submit
- wpcf7mailsent
フォームを非表示にするには、jsファイルにイベントリスナーを追加するか、前述のスクリプトを使用してフッターにアクションとして追加する必要があります。
add_action( 'wp_footer', 'contact_form_sent' );
function contact_form_sent() {
?>
<script type="text/javascript">
document.addEventListener( 'wpcf7mailsent', function( event ) {
if ( 'FORM_ID' == event.detail.contactFormId ) { //Use this only when targeting specific form.
document.getElementById('DIV_ID_OF_FORM').style.display = 'none';
} //Use this only when targeting specific form.
}, false );
</script>
<?php
}
于 2018-05-08T21:52:02.153 に答える
4
フォームを非表示にしてお礼のメッセージを表示したい場合は、以下のCSSを使用できます。
.wpcf7-form.sent p
{
display:none;
}
于 2015-10-22T06:58:38.583 に答える
3
お問い合わせフォーム7を非表示にするには、次のコードを追加する必要があります。お問い合わせフォーム7の設定セクションで、すでにコードを生成しています。
on_sent_ok: "document.getElementById('contactform').style.display = 'none';"
「contactform」は、連絡フォームのタグを含む「div」のIDです。
于 2012-06-15T14:44:48.100 に答える
3
お問い合わせフォーム7管理者の追加設定にこのコードを追加します。
on_sent_ok: "var name = $('.wpcf7 input[name=your-name]').val();
var email = $('.wpcf7 input[name=your-email]').val();
$('.wpcf7').hide();
$('.head_er').hide();
$('.conversations').show();
$('.conversations').html('<p>Thank you.</p>');
$('.conversations').html('<p>We will respond to your email shortly.</p>');"
またはあなたは以下のリンクを見ることができます
http://ravinderrathore.herobo.com/contact-form-7-thank-you-success-messages/
于 2015-04-08T06:14:45.527 に答える
3
これを行うには複数の方法があります。これは主にフォームの作成方法によって異なりますが、これは新しいイベントモードを使用する基本的なフォームで機能するはずです。
<script type="text/javascript">
/* <![CDATA[ */
document.addEventListener( 'wpcf7mailsent', function( event ) {
jQuery(".wpcf7-form.sent").find('p').hide();
}, false );
/* ]]> */
</script>
このコードをメインフォーム内に配置できます（空白行なしで、またはcf7が追加
して
タグ）、または少なくともフォームとともにロードされる任意のjsファイルを使用します。
私は個人的にそれをフォームで使用して、分析への呼び出しとアドワーズ広告の変換コードも含めます。
于 2017-09-12T09:15:18.927 に答える
1
on_sent_ok: "$('.wpcf7-form.sent p').hide();"
フォームが送信されると、送信されたメッセージがフォームに配置されるため、メッセージ（DIVとしてマークアップされている）が非表示にならないように、すべての段落を非表示にする必要があります。
于 2013-09-20T17:20:35.810 に答える
1
フォームを非表示にしたいだけで、スクリプトを使用したくない場合は、次のように実行できます。
.wpcf7-form.sent
{
display:none;
}
#thankYou
{
font-size: 18px;
display: none;
}
次に、Contact Form 7のショートコードの後のHTMLに、次のように記述します。
<div id="thankYou">Thank you</div>
最後に、私の設定で使用します：
on_sent_ok: "$('#thankYou').show()"
このアプローチは、実際にメッセージを表示できるので（フォームを非表示にする他の回答とは異なり）、最も気に入っています。これはまた、純粋なCSSのおかげで非表示が即座に発生するため、私が見ていた「フラッシュ」の一部を減らすようです。
于 2014-02-20T21:59:35.270 に答える
1
いくつかの奇妙な理由で、すべての段落が私のフォームの一部に隠されているわけではないことがわかりました。
.wpcf7-form.sent p {
display:none;
}
...完全には機能しませんでした。
最も信頼できる解決策は、すべてのコンテンツをラップするカスタムDIVを追加するために、フォーム構成の[フォーム]タブ内にあることがわかりました。つまり
<div class="formWrapper">
<label> Name (required)
[text* your-name] </label>
<label> Email (required)
[email* your-email] </label>
[submit "Send"]
</div>
そして、テーマのカスタムcssに追加します
.wpcf7 form.sent .formWrapper{
display: none;
}
于 2020-10-08T13:04:19.193 に答える
0
誰もがこれに触れていますが、具体的には誰も言っていないので、現在のやり方で別の回答を投稿します。
他の回答のいくつかが提案しているものを使用on_sent_okして、CF7の「追加設定」セクションで使用できます。ただし、最初に「フォーム」フィールドで、フォームの内容全体を後で参照するdivでラップする必要があります。
<div id="form-container">
<h4>Form title</h4>
<p>some text, etc</p>
...form fields...
</div>
オプションで参照するには、＃form-container"を使用します。
on_sent_ok: "$("#form-container").fadeOut();"
私fadeOut();はアニメーションのために使用するのが好きですが、クラスを追加したり、jQueryを介してそこでやりたいことを何でもすることができます。
このようにする理由は、DOMでCF7によって作成された要素に依存するのではなく、非表示にしたいものを正確にターゲットにできるようにするためです。
これは、成功メッセージと競合することなく、あなたの質問に答えると思います。
于 2014-10-02T00:41:44.510 に答える
0
提供されたさまざまな回答が、必要なものを実行していないことがわかりました。これは、フォームと送信ボタンを非表示にしますが、フォームで送信されたメッセージの表示を許可します。だからここに私のために働いた解決策があります。
注：開発者はとjavascript関数の価値を下げており、2017年末までにサポートを削除する予定です。代わりにDOMイベントを使用することをお勧めします。それらを実装する方法がわかりません。on_sent_okon_submit
on_sent_ok: "$('label').fadeOut();"
on_sent_ok: "$('input').fadeOut();"
on_sent_ok: "$('div#required-info').fadeOut();"
最後のトリガーは私の場合に固有のものであり、「*指定された必須フィールド」という情報があり、それをラップしました<div id="required-info"></div>
したがって、その3行目を削除するか、フォームに他の要素も導入している場合は変更します（[ラベル]および[送信]ボタン以外）。
このソリューションでは、フォームの送信が成功すると、フォームフィールド、送信ボタン、および追加のテキストがすべてフェードし、成功メッセージが表示されます。
于 2017-05-23T03:36:56.090 に答える
0
CF7の現在のバージョンで機能するわずかに異なるアプローチを探している人がいる場合は、この純粋なCSSソリューションを試してください。
form.wpcf7-form {
position: relative;
}
.wpcf7-response-output {
position: absolute;
top: 0;
left: 0;
bottom: 0;
right: 0;
background-color: white;
}
メッセージはフォームの真上に配置され、フォームを非表示にします。CSSをさらに改良して、メッセージのスタイルを調整し、メッセージをより目立たせることができます。
于 2020-04-18T15:13:42.253 に答える