web-dev-qa-db-ja.com

お問い合わせフォームを非表示にして「送信済み」と表示するにはどうすればよいですか。送信に成功した後

WordPressテンプレートでContactForm 7プラグインを使用しています。フォームと関連するCSSを作成したので、すべて正常に機能しています。送信ボタンをクリックすると、次の操作を行う必要があります。メールの送信に成功しました。フォームが消えて、代わりに「Sent！」と表示されます。変更する必要のあるコードを知る必要があります。自分のやりたいことを示す写真をご覧ください。

enter image description here

wordpress-pluginwordpress
8
HTML Man

お問い合わせフォーム7を非表示にするには、次のコードを追加する必要があります。お問い合わせフォーム7の設定セクションで、すでにコードを生成しています。

on_sent_ok:  "document.getElementById('contactform').style.display = 'none';"

「contactform」は、連絡先フォームのタグを含む「div」のIDです。

4
HTML Man

お問い合わせフォーム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/

3
Ravinder Kumar

これを行うには複数の方法があり、フォームの作成方法に大きく依存しますが、これは新しいイベントモードを使用する基本的なフォームで機能するはずです。

<script type="text/javascript">
/* <![CDATA[ */
document.addEventListener( 'wpcf7mailsent', function( event ) {
  jQuery(".wpcf7-form.sent").find('p').hide();
}, false );
/* ]]> */
</script>

このコードをメインフォーム内に配置できます（空白行なしで、またはcf7が追加します）
そして

タグ）、または少なくともフォームとともにロードされるjsファイルを使用します。

私は個人的にフォームでそれを使用して、分析への呼び出しとアドワーズ変換コードも含めます。

2
silmaril

フォームを非表示にしてお礼のメッセージを表示したい場合は、以下のCSSを使用できます。

.wpcf7-form.sent p
{
    display:none;
}
2
Bibisha Jacob

フォームを非表示にし、スクリプトを使用したくない場合は、次のようにします。

.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のおかげで非表示が即座に発生するため、私が見ていた「フラッシュ」の一部を減らすようです。

1
ProVega
on_sent_ok:  "$('.wpcf7-form.sent p').hide();"

送信されたメッセージはフォームが送信されるとフォームに配置されるため、メッセージ（DIVとしてマークアップされている）が非表示にならないように、すべての段落を非表示にする必要があります。

1
jplozano

「on_sent_ok：」と「on_submit」はContact Form 7 5.0から削除されているため、2つの利用可能なオプションのいずれかを使用する必要があります。

  1. wpcf7submit
  2. 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
}
1
Akshat

誰もがこれに触れていますが、具体的には誰も言っていないので、現在のやり方で別の回答を投稿します。

他の回答のいくつかが示唆していることを使用して、CF7の「追加設定」セクションで_on_sent_ok_を使用できます。ただし、最初に「フォーム」フィールドで、フォームの内容全体を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によって作成された要素に依存するのではなく、非表示にしたいものを正確にターゲットにできるようにするためです。

これは、成功メッセージと競合することなく、あなたの質問に答えると思います。

0
Jeremy Miller

提供されたさまざまな回答が、必要なことを実行していないことがわかりました。これは、フォームと送信ボタンを非表示にしますが、フォームで送信されたメッセージの表示を許可します。だからここに私のために働いた解決策があります。

注：開発者は 減価償却済みon_sent_okおよびon_submit javascript関数を持っており、2017年末までにサポートを削除する予定であることに注意してください。 彼は 代わりにDOMイベントを使用することをお勧めします。それらを実装する方法がわかりません。

on_sent_ok:  "$('label').fadeOut();"
on_sent_ok:  "$('input').fadeOut();"
on_sent_ok:  "$('div#required-info').fadeOut();"

最後のトリガーは私の場合に固有であり、「*指定された必須フィールド」という情報があり、それを<div id="required-info"></div>でラップしました。

したがって、その3行目を削除するか、フォームに他の要素も導入している場合は変更します（[ラベル]ボタンと[送信]ボタン以外）。

このソリューションでは、フォームの送信が成功すると、フォームフィールド、送信ボタン、および追加のテキストがすべてフェードし、成功メッセージが表示されます。

0
inspirednz