Clear form after sending and successful message

Question

I made my own contact form and sent letters, but I want it to clear after successfully sending and displaying a message (a pop-up window may be good) with successful sending. here is my code and I don’t know what to do, it has done little but nothing works.

<form id="contact-form" class="wniosek" action="wyslijWniosek.php" method="POST"> <div class="col-sm-4"> <label class="firma rel col-sm-12"> <span class="inp"> <input name="firma" type="text" placeholder="Nazwa Firmy" class="col-sm-12"> </span> </label> </div> <div class="col-sm-4"> <label class="name rel col-sm-12"> <span class="inp"> <input name="name" type="text" placeholder="Imię i nazwisko" class="col-sm-12"> </span> </label> </div> <div class="col-sm-4"> <label class="phone rel col-sm-12"> <span class="inp"> <input name="phone" type="text" placeholder="Telefon" class="col-sm-12"> </span> </label> </div> <div class="col-sm-4"> <label class="email rel col-sm-12"> <span class="inp"> <input name="email" type="text" placeholder="E-mail" class="col-sm-12"> </span> </label> </div> <div class="col-sm-4"> <label class="kwota rel col-sm-12"> <span class="inp"> <input name="kwota" type="text" placeholder="Prognozowana Kwota" class="col-sm-12"> </span> </label> </div> <div class="col-sm-4"> <label class="wnio col-sm-12"> <select name="wnio" style="width:100%;"> <option value="Kredyt Firmowy">Kredyt Firmowy</option> <option value="Kredyt Gotówkowy">Kredyt Gotówkowy</option> <option value="Kredyt Obrotowy">Kredyt Obrotowy</option> <option value="Pożyczka Hipoteczna">Pożyczka Hipoteczna</option> <option value="Kredyt Hipoteczny">Kredyt Hipoteczny</option> <option value="Kredyt Konsolidacyjny">Kredyt Konsolidacyjny</option> <option value="Kredyt Inwestycyjny">Kredyt Inwestycyjny</option> <option value="Kredyt Samochodowy">Kredyt Samochodowy</option> <option value="Leasing">Leasing</option> </select> </label> </div> <div class="col-sm-12"> <label class="message rel col-sm-12"> <span class="text_a"> <textarea name="message" class="col-sm-12" placeholder="Wiadomość" style="height:300px;"></textarea> </span> </label> </div> <div class="col-sm-4"> <div class="buttons-wrapper"><input class="button2 btn btn-white" type="submit" value="Wyślij"><input class="button2 btn btn-white" type="reset" value="Wyczyść"> </div> </div> </form> 

PHP:

 <?php $firma = $_POST['firma']; $name = $_POST['name']; $email = $_POST['email']; $phone = $_POST['phone']; $wnio = $_POST['wnio']; $kwota = $_POST['kwota']; $message = $_POST['message']; $formcontent=" Nazwa Firmy: $firma \n Imie i Nazwisko: $name \n Email: $email \n Telefon: $phone \n Wniosek: $wnio \n Prognozowana Kwota: $kwota \n Wiadomość: $message"; $recipient = "<mymailhere>"; $subject = "Formularz Kontaktowy"; $mailheader = "From: $email"; mail($recipient, $subject, $formcontent, $mailheader); exit();//Remove this after debugging done ?> 

Answer 1

Use this simple code.

 mail($recipient, $subject, $formcontent, $mailheader); header("location:wniosek.php?form=success"); 

And on the wniosek.php page wniosek.php use this code to display the status

 <?php if($_GET['form']=="success") { echo "Registered Successfully"; } ?> 

Answer 2

You can use javascript to interact with the page you can find to find how to do this. Or you can watch this similar post .

Answer 3

A quick solution with cleaning the mold would be

 <form id="contact-form" class="wniosek" action="wyslijWniosek.php" method="POST" onsubmit="this.submit(); this.reset(); return false;"> 

EDIT: Ignore the first answer. Remove the action attribute and add it at the bottom of the page

 <script> function submitForm() { $.ajax({type:'POST', url: 'wyslijWniosek.php', data:$('#contact-form').serialize(), success: function(response) { $('#contact-form').reset(); alert("Success!"); }}); return false; } </script>