Ausblenden Formular nach dem Senden erfolgreich

Question

Derzeit habe ich ein Kontaktformular funktioniert, aber ich muss das Formular selbst ausblenden, nachdem es erfolgreich gesendet wurde. Ich dachte daran, einen Javascript-Aufruf zu treffen, wenn die 'Succes' Nachricht ausgeführt wird, aber ich weiß nicht, wie das geht.

Wie kann ich das Formular ausblenden, aber die Erfolgsmeldung beibehalten, wenn es abgeschlossen ist?

Vielen Dank im Voraus!

<?php 
    //response generation function 

    $response = ""; 

    //function to generate response 
    function my_contact_form_generate_response($type, $message){ 

    global $response; 

    if($type == "success") $response = "<div class='success'>{$message}</div>"; 
    else $response = "<div class='error'>{$message}</div>"; 

    } 

    //response messages 
    $not_human  = "<div class='alert alert-danger'>Verificatie incorrect.</div>"; 
    $missing_content = "<div class='alert alert-danger'>U heeft niet alle verplichte velden ingevuld</div>"; 
    $email_invalid = "<div class='alert alert-danger'>Incorrect e-mail adres.</div>"; 
    $message_unsent = "<div class='alert alert-danger'>Bericht niet verzonden. Probeer opnieuw.</div>"; 
    $message_sent = "<div class='alert alert-success'>Bedankt, wij nemen binnenkort contact met u op</div>"; 

    //user posted variables 
    $name = $_POST['message_name']; 
    $email = $_POST['message_email']; 
    $phone = $_POST['message_phone']; 
    $message = $_POST['message_text']; 
    $human = $_POST['message_human']; 

    $totalmessage = " 
    Naam:  $name \n 
    Telefoonnummer:  $phone \n 
    E-mail:  $email \n 
    Bericht: $message \n "; 

    //php mailer variables 
    $to = "$curauth->user_email"; 
    $subject = "Bel mij terug"; 
    $headers = 'From: email@email.com' . "\r\n" . 
     'Reply-To: email@email.com' . "\r\n" . 
     'X-Mailer: PHP/' . phpversion(); 

    if(!$human == 0){ 
    if($human != 2) my_contact_form_generate_response("error", $not_human); //not human! 
    else { 

     //validate email 
     if(!filter_var($email, FILTER_VALIDATE_EMAIL)) 
     my_contact_form_generate_response("error", $email_invalid); 
     else //email is valid 
     { 
     //validate presence of name and message 
     if(empty($name)){ 
      my_contact_form_generate_response("error", $missing_content); 
     } 
     else //ready to go! 
     { 
      $sent = wp_mail($to, $subject, $totalmessage, $headers); 
      if($sent) my_contact_form_generate_response("success", $message_sent); //message sent! 
      else my_contact_form_generate_response("error", $message_unsent); //message wasn't sent 
     } 
     } 
    } 
    } 
    else if ($_POST['submitted']) my_contact_form_generate_response("error", $missing_content); 

?> 

<div id="respond"> 
    <?php echo $response; ?> 
    <form action="<?php the_permalink(); ?>" method="post"> 
    <p><label for="name">Uw naam (verplicht) <span>*</span> <br><input type="text" class="wpcf7-form-control wpcf7-text" name="message_name" value="<?php echo esc_attr($_POST['message_name']); ?>"></label></p> 
    <p><label for="message_phone">Uw Telefoonnummer (verplicht) <span>*</span> <br><input type="text" class="wpcf7-form-control wpcf7-text" name="message_phone" value="<?php echo esc_attr($_POST['message_phone']); ?>"></label></p> 
    <p><label for="message_email">Uw e-mail adres: <span>*</span> <br><input type="text" name="message_email" class="wpcf7-form-control wpcf7-text" value="<?php echo esc_attr($_POST['message_email']); ?>"></label></p> 
    <p><label for="message_text">Uw vraag: <span></span> <br><textarea type="text" name="message_text" class="wpcf7-form-control wpcf7-textarea"><?php echo esc_textarea($_POST['message_text']); ?></textarea></label></p> 
    <p><label for="message_human">Verificatie: <span>*</span> <br><input type="text" style="width: 60px;" name="message_human"> + 3 = 5</label></p> 
    <input type="hidden" name="submitted" class="wpcf7-form-control wpcf7-submit" value="1"> 
    <p><input type="submit"></p> 
    </form> 
</div> 

Answer 1

Nee, ik bel je niet terug :-)

Sie können dies tun, indem nicht, welche die Form, wenn Ihre E-Mail gesendet wird.
Da Sie bereits eine Nachricht zeigen, sollte dies ausreichen:

<?php 
if (!isset($sent) || !$sent) { 
?> 
<form action="<?php the_permalink(); ?>" method="post"> 
    <p><label for="name">Uw naam (verplicht) <span>*</span> <br><input type="text" class="wpcf7-form-control wpcf7-text" name="message_name" value="<?php echo esc_attr($_POST['message_name']); ?>"></label></p> 
    <p><label for="message_phone">Uw Telefoonnummer (verplicht) <span>*</span> <br><input type="text" class="wpcf7-form-control wpcf7-text" name="message_phone" value="<?php echo esc_attr($_POST['message_phone']); ?>"></label></p> 
    <p><label for="message_email">Uw e-mail adres: <span>*</span> <br><input type="text" name="message_email" class="wpcf7-form-control wpcf7-text" value="<?php echo esc_attr($_POST['message_email']); ?>"></label></p> 
    <p><label for="message_text">Uw vraag: <span></span> <br><textarea type="text" name="message_text" class="wpcf7-form-control wpcf7-textarea"><?php echo esc_textarea($_POST['message_text']); ?></textarea></label></p> 
    <p><label for="message_human">Verificatie: <span>*</span> <br><input type="text" style="width: 60px;" name="message_human"> + 3 = 5</label></p> 
    <input type="hidden" name="submitted" class="wpcf7-form-control wpcf7-submit" value="1"> 
    <p><input type="submit"></p> 
    </form> 
<?php 
} 
?> 

So das Formular innerhalb einer if-Anweisung setzen.

Answer 2

Wenn Sie das Formular so verlassen, wie es ist (obwohl ich den php mit dem Beitrag zu einer anderen URL bewegen würde, dann umleiten zurück, wenn nicht eine AJAX-Anfrage), dann wird es sich mit der Anfrage befassen, wenn Javascript ist im Browser des Benutzers deaktiviert.

Dann fügen Sie das folgende Javascript (Hinzufügen in der URL speichern):

$('#my-form').submit(function(evt){ 
 
\t // stop form submitting 
 
\t evt.preventDefault(); 
 

 
\t $.ajax(function(){ 
 
    \t method: "POST", 
 
    \t url: "[ADD_SAVE_URL]]", 
 
    success(function(data){ 
 
    \t // debug response 
 
    \t console.log(data); 
 
     
 
     $('#response-message').html(response.message); 
 
     if (response.success){ 
 
     $('#my-form').hide(); 
 
     } 
 
    }), 
 
    fail(function(jqXHR, textStatus){ 
 
    \t // debug response 
 
    \t console.log(jqXHR, textStatus); 
 
     
 
     $('#response-message').html('Ajax error!'); 
 
    }) 
 
    }); 
 

 
});

<div id="respond"> 
 
    <div id="response-message"><?php echo $response; ?></div>div> 
 

 
    <form action="<?php the_permalink(); ?>" method="post" id="my-form"> 
 
    <p><label for="name">Uw naam (verplicht) <span>*</span> <br><input type="text" class="wpcf7-form-control wpcf7-text" name="message_name" value="<?php echo esc_attr($_POST['message_name']); ?>"></label></p> 
 
    <p><label for="message_phone">Uw Telefoonnummer (verplicht) <span>*</span> <br><input type="text" class="wpcf7-form-control wpcf7-text" name="message_phone" value="<?php echo esc_attr($_POST['message_phone']); ?>"></label></p> 
 
    <p><label for="message_email">Uw e-mail adres: <span>*</span> <br><input type="text" name="message_email" class="wpcf7-form-control wpcf7-text" value="<?php echo esc_attr($_POST['message_email']); ?>"></label></p> 
 
    <p><label for="message_text">Uw vraag: <span></span> <br><textarea type="text" name="message_text" class="wpcf7-form-control wpcf7-textarea"><?php echo esc_textarea($_POST['message_text']); ?></textarea></label></p> 
 
    <p><label for="message_human">Verificatie: <span>*</span> <br><input type="text" style="width: 60px;" name="message_human"> + 3 = 5</label></p> 
 
    <input type="hidden" name="submitted" class="wpcf7-form-control wpcf7-submit" value="1"> 
 
    <p><input type="submit"></p> 
 
    </form> 
 
</div>