Altere o html do formulário de contato APÓS validação e envio de email

Estou trabalhando em um formulário de contato habilitado para a minha página, onde, depois que o botão enviar foi clicado E (!) O correio foi enviado, eu gostaria de replace o conteúdo do HTML. Eu poderia administrar até agora, que depois de .btn é clicado, o HTML é substituído, mas isso acontece antes que qualquer validação aconteça e o e-mail seja enviado. Você pode me mostrar uma maneira de fazer isso por favor? Muito obrigado!

 $(document).ready(function() { var newHTML = '

Thank you for your message!
We will get back to you as soon as possible!

'; $('.btn').click(function(){ $('.form').html('').append(newHTML); }); });
 .contact-form { margin-top:30px; margin-bottom:70px; } .contact-form h1 { margin-bottom:70px; } .contact-form input { width:70%; margin:10px auto 20px auto; } .message textarea { max-width:80%; width:80%; margin:10px auto 20px auto; height:100px; } .contact-form .btn { background-color:#6f8595; color:white; transition:0.3s; width:50%; } .contact-form .btn:hover { background-color:white; color:#6f8595; transition:0.3s; } 
   

Message:

Você precisará do Ajax para fazer isso.

primeiro precisamos de um contato.php que fará o trabalho e retornará uma resposta para informar o cliente se o e-mail foi enviado ou não. por exemplo:

contact.php

 < ?php if (mail('caffeinated@example.com', 'My Subject', 'message')) { echo json_encode(['error' => false]); } else { echo json_encode(['error' => true]); } 

Em seguida, em seu cliente, você precisa fazer uma solicitação ajax para contact.php e atualizar a dom dependendo da resposta da solicitação:

client.html

  

Name:

Email:

Message:

Você deve verificar se seu formulário é válido antes de esconder o formulário. Experimente algo assim usando o valid() :

 $('.btn').click(function(){ if($('.form').valid()) $('.form').html('').append(newHTML); });