skip to Main Content

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.

2

Answers


  1. 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

    Login or Signup to reply.
  2. 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>
    Login or Signup to reply.
Please signup or login to give your own answer.
Back To Top
Search