0

I want to create a contact or information form that submits information whilst staying on the current page.

I am using a contact form on my website http://www.purpaldzinz.net/. It is basically for contacting us for our various services like SEO, social media, website designing.

Once you fill in and submit it, it leads you to a separate page using PHP.

I want a form that also submits the information but remains on the same page i.e. my home page whilst also displays confirmation messages like, your message or information has been submitted etc.

Frits
  • 6,116
  • 10
  • 39
  • 50
Purpal Kshitiz
  • 1
  • 1
  • I tried to create a simple php based form which works fine, although most of the times I try to make changes, even minor ones, I run into some kind of problems - like it gives an error page or something like that. And when filled it leads you to a Thank You page which I created. – Purpal Kshitiz Jul 10 '17 at 06:29
  • This is the form I am using. – Purpal Kshitiz Jul 10 '17 at 06:32

2 Answers2

0

Check out this link it may be helpful for you: https://www.formget.com/submit-form-using-ajax-php-and-jquery/

You can also find helpful details from this url : Submitting HTML form using Jquery AJAX

Sumesh S
  • 728
  • 5
  • 11
0

So you want a contact form, displaying a message telling you it has been submitted, without it refreshing?

Using HTML, PHP and just a tiny bit of jQuery, this should do it:

$("#contactForm").submit(function() {
   return false;
});
input[type=text], textarea {
 padding: 3px;
 width: 300px;
}
    <?php
    if(!empty($_POST["name"]) && !empty($_POST["message"]) && !empty($_POST["category"])) {
     if(isset($_POST["submit"])) {
     echo "Your message has been sent. Thank you for contacting us!";
     }    
    }
    else {
     echo "Please fill in all the fields";    
    }
?>
 
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<form method="POST" id="contactForm">
 <select name="category" action="">
  <option>- Choose an item -</option>
  <option value="1">Option 1</option>
  <option value="2">Option 2</option>
  <option value="3">Option 3</option>
 </select> 
 <br /> <br />
 <input type="text" name="name" placeholder="Your Name" /> 
 <br /> <br />
 <textarea name="message" placeholer="Your message"></textarea> 
 <br /> <br />
 <input type="submit" name="submit" value="Send" />
</form>
Xariez
  • 691
  • 5
  • 22