Loading Animation when form is submitting

What are you using to send the form, php?

You can set a variable once the form has been submitted successfully AFTER the mail(); function.

$success = "True";

Then where you want the animation to appear on the page:

<?php if(isset($success)) { ?>

gif image src goes here

<?php } ?>

Should work.

Max Resnikoff wrote:

 

Would that work even with the action on another .php page?

It might do IF you integrate a $_SESSION variable into the mix but I don't know for sure.

The process to test would be set the $_SESSION variable AFTER the form has been processed and before the redirect to the success.php or thankyou.php page.

Include this at the top of the processing script page BEFORE any other code:

<?php

// Start the session

session_start();

?>

Then after the mail(); function create a $_SESSION variable:

$_SESSION['success'] = "True";

Then redirect to the success.php page:

header (Location: "success.php");

Then on the success.php page:

Again include this at the top of the page BEFORE any other code:

<?php

// Start the session

session_start();

?>

Then test to see if the $_SESSION variable has been set, include the code below where you want the gif animation to appear:

<?php if(isset($_SESSION['success'])) } ?>

src to animated gif goes here

<?php } ?>

What I tend to do these days is have the php processing script on the same page as the form and send the form page back to itself to be processed.

You also say:

1) Is there a way to restrict the gif animation to only show when the form has gone through?

Which is a bit different from:

2) when form is submitting.

I'm concerned now because the first request suggests you want the animation to play AFTER the form has been submitted while the second request suggests you want the animation to play WHILE the form is submitting.

The solution I provided will only work AFTER the form has been submitted successfully.

If you redirect users to a success.php page upon successful form submission, why not just put your animated GIF on the success.php page?

Nancy O.

Form submission takes a fraction of a second.  It's as close to instantaneous as you can get.  So I don't really understand what you're going for.

Nancy O.

That's sounds like a slow server.  Is this form hosted on a secure socket (https://)?

Nancy O.

Xampp is a local testing server. You should test form processing on your remote server.

Nancy O.

>my form seems to take 5-10 seconds to be submitted and redirected to the thank you page :/

That does seem slow.

>Is there a way to restrict the gif animation to only show when the form has gone through?

The form hasn't 'gone through' until you are redirected to the success page. So what you are asking for doesn't really make sense.

>Is there a way to restrict the gif animation to only show when the form has gone through?

Tell us what you mean by 'gone through'.

>I meant while the form is being submitted.

A form submission is complete when all data is passed from the form to the receiving document. In your case, this is a php document. Then the php code is executed. Typically this code will validate the form entries and call the mail function. So, where exactly do you want your animation?

Nancy O. wrote:

 

If you redirect users to a success.php page upon successful form submission, why not just put your animated GIF on the success.php page?

 

 

Nancy O.

Good point - thinking too deeply.

I queried what the OP meant after that post because I guessed that despite the contradiction in their post this amimation was meant to be happening while the form was submitting not after the infromation has been successfully sent.

I agee with you - seems a bit overkill as a form should only take a second to be processed BUT I have come across an animation while the form is being sent before, normally though on validation. Something spins around to show the user something is happening and I guess at times the server could 'hang' for a few seconds.

Anyway my solutions WON'T work in that senario as the variable only detects the information has already been sent.

You're going to have to use a combination of php and Ajax/jQuery to process the form.

Below is a very very simple unstyled example. (it has no validation on the form fields - that can be added)

The code below is the form page down to </html> - the form action points to - form_mail.php - (the script processing page - included below after the form page code). You can put your animation in the 'loading' <div> instead of the message 'Sending your message....' After about 5-10 seconds another message will appear saying 'Your message has been sent'

<!DOCTYPE HTML>

<html>

<head>

<meta charset="UTF-8">

<script src="http://code.jquery.com/jquery-1.10.2.min.js"></script>

<script>

$(function(){

$('#sendEmail').submit(function(e){

// process form information      

var thisForm = $(this);

//Prevent the default form action

e.preventDefault();

//Hide the form after submit

$(this).fadeOut(function(){

//Display the "loading" message

$("#loading").fadeIn(function(){

//Post the form to the processing script

$.ajax({

type: 'POST',

url: thisForm.attr("action"),

data: thisForm.serialize(),

//Wait for a successful response

success: function(data){

//Hide the "loading" message

$("#loading").delay(5000).fadeOut(function(){

//Display the "success" message

$("#success").html(data).fadeIn();

});

}

});

});

});

})

});

</script>

<style>

/* form css */

#contact {

    width: 400px;

    margin: 0 auto;

}

#contact input, #contact textarea {

    width: 300px;

}

#contact #submit {

    width: 100px;

}

#loading, #success {

display: none;

width: 100%;

text-align: center;

}

#loading h3, #success h3 {

font-size: 25px;

font-weight: normal;

color: #000;

}

</style>

</head>

<body>

<div id="contact">

<form method='post' id="sendEmail" action='form_mail.php'>

<p>

<label for="name">

<input type="text" name="name" id="name" value="Name" onfocus="this.value=''">

</label>

</p>

<p>

<label for="email">

<input type="text" name="email" id="email" value="Email" onfocus="this.value=''">

</label>

</p>

<p>

<label for="comments">

<textarea name="comments" id="comments" cols="45" rows="5" onfocus="this.value=''">Comments</textarea>

</label>

</p>

<p>

<label>

<input type="submit" name="submit" id="submit" value="SEND">

</label>

</p>

</form>

<div id="loading"><h3>Sending your message....</h3></div><!-- end loading -->

<div id="success"><h3>Your message has been sent</h3></div><!-- end success -->

</div>

<!-- end contact -->

</body>

</html>

This is the form_mail.php script:

<?php

if (isset($_POST['name'])) {

// get name

$name = trim($_POST['name']);

// get email address

$email = trim($_POST['email']);

// get comments

$comments = stripslashes(trim($_POST['comments']));

$to = 'XXXXXXX@XXXXXXXXX.com'; // where you want to send the mail

$from = 'mailservice@XXXXXXXXXXX.com'; // a valid address on your domain

$subject = 'Comments from Website';

$headers  = "From: $email\r\n";

$headers .= "Reply-To: $email\r\n";

//build message

$message = "Name: $name\n\n";

$message .= "Email Address: $email\n\n";

$message .= "Message: $comments\n\n";

$sent = mail($to, $subject, $message, $headers);

echo "<h3>Your message has been sent.</h3>";

}

?>