HTML/PHP Form Submission (what to do after)

Question

First question here, so please be patient with me.

I am developing a website for my company. I have an HTML form that uses a php file to email me the data entered by the user. But the user is routed to an ugly .php page with a simple "Thank you" message.

My question has several parts.

1. Is it standard to have a "Successful Submission" page which looks nice and fancy, or is it fine to just stay on the page the form is on?
2. If it's fine to stay, how do I execute the php code to send the data without leaving the page?
3. Further, if I stay on the page, how do I display a message over it saying something like "Thanks, your form was submitted"?

Answer 1

Considering question 1 Is it standard to have a "Successful Submission" page which looks nice and fancy, or is it fine to just stay on the page the form is on?

It is not mandatory to have a separate page to display response to the end user. Actually it depends on the scenario for which you are developing the page. The main intention is to provide the best UI experience for the end users / visitors of your site. If there is some crucial information with large content, then it is better to show it in another page after form submission. If it is just a success message then it is fine to stay on the same page after form submit and show the response message there.

Now coming to question 2 and 3

If it's fine to stay, how do I execute the php code to send the data without leaving the page?

Further, if I stay on the page, how do I display a message over it saying something like "Thanks, your form was submitted"?

You can accomplish it using ajax. With the help of jquery you can make it much simpler using

$.ajax function

Ex :

$("#formbutton").click(function(){
        $.ajax({
           type: "POST", // method
           url: "savecontact.php", // call to external php file
           data: {name:n,contact:c}, // passing variables to php file

           success: function(result) {

              // get the response after ajax call is successful 
           },
           complete: function(result){

           }
      });
     });

Now in savecontact.php you write the necessary code (usual php code to insert into table) to save the data and return response.

Ex:

result = mysqli_query("INSERT INTO table (NAME ) VALUES ('val')"));
    if($result)
    {
        echo "Success";
        exit;
    }
    else
    {
        echo "Error";
        exit;
    }

After ajax call gets executed, inside success function of ajax call you will get the response either Success or Error and based on that you can display the message into an empty div which normally placed above the form.

success: function (response) {

       if(response == "Success"){
           $("#div").html("Thanks, your form was submitted");          
       }
       else{
            $("#div").html("Issue with form submission.Please try again");
       }
}

The appropriate message will gets display after form submit as ajax response.

Answer 2

It usually is based on your preferences.

For me, I usually include my validation script on the action page (Redirects to a blank page temporarily). I save my post variables into my session so I can reload the form later. If there is an error, I save the error message in a session variable then redirect to my form page. In my form, I include in each input element this fragment

value=<?php if isset($_SESSION['var_name']){echo $_SESSION['var_name'];}?>

If the data is valid however, I will execute certain stuff (database inserts, mailing, etc...) before redirecting to my landing page (usually the homepage).

As to properly answer your 3 questions:

1. Like I said, it is preferential. It can range from a simple pop-up to redirect,to a full fledged page. However, it IS standard to inform your user about the submission's status. He won't be doing guess work on your page.

2. If you want to stay on your form page, try to send your form through AJAX to your validation script. Nice and simple

3. Refer to #2. You execute your code in the AJAX snippet

Answer 3

1. Is it standard to have a "Successful Submission" page which looks nice and fancy, or is it fine to just stay on the page the form is on?

Answer: It will be good if you show Thank you!!! message on same page if the page is having other content also.

2. If it's fine to stay, how do I execute the php code to send the data without leaving the page?

Answer: You can use AJAX to send async request to server with data filled in form.

3.Further, if I stay on the page, how do I display a message over it saying something like "Thanks, your form was submitted"?

Answer: Once you get success response from AJAX you can change the HTML code with Thank you message, and if you get some error while submitting form, you can show that error on same page without refreshing page.

Answer 4

1. Yes you can use same page which your going to submit form.

2. You can set action to another .php page as example sendEmail.php

   action="sendEmail.php" method="post"

   and you can get form submitting value in there. when the email sent you can put condition like this

   if(emailSent == true){ header('Location: http://www.example.com/index.php?success=true'); }

3. when the sendEmail.php redirect to the index page you can get url value using php. And display the success message

   $paraVal = $_GET["success"]; if($paraVal == true){ // display message }