Wie kann ich das Kontaktformular ausblenden und zeigt “gesendet!” nach erfolgreichem Versand

Ich verwende das Contact Form 7-Plugin in einer WordPress-Vorlage. Ich habe das Formular und das zugehörige CSS erstellt, also funktioniert alles einwandfrei. Ich muss Folgendes tun, wenn ich auf die Schaltfläche „Senden“ klicke und eine erfolgreich gesendete E-Mail erhalten habe. das Formular sollte verschwinden und zeigt “Gesendet!” stattdessen. Ich muss den Code kennen, den ich ändern muss. Bitte sehen Sie sich das Foto an, das zeigt, was ich gerne mache

“on_sent_ok:” und “on_submit” wurden aus Contact Form 7 5.0 entfernt, daher müssen Sie eine der 2 verfügbaren Optionen verwenden.

1. wpcf7submit
2. wpcf7mailgesendet

Um das Formular auszublenden, müssen Sie den Ereignis-Listener entweder in Ihrer js-Datei hinzufügen oder mit dem erwähnten Skript als Aktion in der Fußzeile hinzufügen:

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
}

Wenn Sie das Formular ausblenden und die Dankesnachricht anzeigen möchten, können Sie das folgende CSS verwenden.

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

Um das Kontaktformular 7 auszublenden, müssen Sie den folgenden Code hinzufügen, im Einstellungsbereich des Kontaktformulars 7 generieren Sie ihn bereits

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

„contactform“ ist die ID des „div“, das die Tags Ihres Kontaktformulars enthält.

Fügen Sie diesen Code in Zusätzliche Einstellungen im Kontaktformular 7 Admin hinzu.

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>');"

oder Sie können den folgenden Link sehen

http://ravinderrathore.herobo.com/contact-form-7-thank-you-success-messages/

Es gibt mehrere Möglichkeiten, dies zu tun, es hängt hauptsächlich davon ab, wie Sie Ihr Formular erstellt haben, aber dies sollte mit einem einfachen Formular funktionieren, das den neuen Ereignismodus verwendet:

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

Sie können diesen Code in das Hauptformular einfügen (ohne Leerzeilen oder cf7 fügt hinzu
und

Tags) oder mit einer js-Datei, die zumindest mit dem Formular geladen würde.

Ich persönlich verwende es im Formular, um auch Call-to-Analytics- und AdWords-Conversion-Code einzuschließen.

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

Da die gesendete Nachricht nach dem Absenden des Formulars in das Formular eingefügt wird, müssen wir alle Absätze ausblenden, um zu vermeiden, dass die Nachricht (die als DIV gekennzeichnet ist) ausgeblendet wird.

Wenn Sie das Formular nur ausblenden und kein Skript verwenden möchten, können Sie dies tun:

.wpcf7-form.sent
{
    display:none;
}

#thankYou
{
    font-size: 18px;
    display: none;
}

Dann füge ich in meinem HTML-Code nach dem Kontaktformular 7-Kurzcode Folgendes ein:

<div id="thankYou">Thank you</div>

Schließlich verwende ich in meinen Einstellungen:

on_sent_ok:  "$('#thankYou').show()"

Dieser Ansatz gefällt mir am besten, weil ich damit tatsächlich eine Nachricht anzeigen kann (im Gegensatz zu anderen Antworten, die nur das Formular ausblenden). Dies scheint auch einen Teil des “Blitzes” zu reduzieren, den ich gesehen habe, da das Ausblenden dank reinem CSS sofort erfolgt.