Contact form success message opens in a new page

Hi. I am trying to create a contact form which should show success/failure message on the same place as the form is. However it loads in a /process.php page. Can anyone help me with this?

Here’s my form:

<form method="post" action="process.php" id="contactForm">
	<input type="text" placeholder="Name" name="name" />
	<input type="text" placeholder="Email" name="email" />
	<input type="text" placeholder="Phone #" name="phone" />
	<input type="text" placeholder="Message" name="comments" />
	<input type="submit" value="SEND" id="submit" name="contactSubmit" />
</form>

The process.php file

/* Configuration */
$subject = 'SUBJECT'; // Set email subject line here
$mailto  = 'my email is here'; // Email address to send the form to
/* END Configuration */

$name     	= $_POST['name'];
$email          = $_POST['email'];
$phone          = $_POST['phone'];
$comments       = $_POST['comments'];
$timestamp 	= date("F jS Y, h:iA.", time());

// HTML for email to send submission details
$body = "
<br>
<p>Message:</p>
<p><b>Name</b>: $name <br>
<b>Email</b>: $email<br>
<b>Phone number</b>: $phone </p>
<p>This form was submitted on <b>$timestamp</b></p>
";

// Success Message
$success = "
<div class=\"row\">
    <div class=\"thankyou\">
        <h3>Submission successful</h3>
        <p>Thank you for taking the time to contact us.</p>
    </div>
</div>
";

$headers = "From: $name <$email> \r\n";
$headers .= "Reply-To: $email \r\n";
$headers .= "MIME-Version: 1.0\r\n";
$headers .= "Content-Type: text/html; charset=ISO-8859-1\r\n";
$message = "<html><body>$body</body></html>";

if (mail($mailto, $subject, $message, $headers)) {
    echo "$success"; // success
} else {
    echo 'Form submission failed. Please try again...'; // failure
}
?>

The JS file:

$('#contactForm').on('submit', function(e) {
    e.preventDefault(); //Prevents default submit
    var form = $(this); 
    var post_url = form.attr('action'); 
    var post_data = form.serialize(); //Serialized the form data for process.php
    $('#loader', form).html('<img src="../img/loader.gif" /> Please Wait...');
    $.ajax({
        type: 'POST',
        url: 'process.php', // Your form script
        data: post_data,
        success: function(msg) {
            $(form).fadeOut(500, function(){
                form.html(msg).fadeIn();
            });
        }
    });
});

I have this JS script in a sending.js file and

<script type='text/javascript' src='sending.js'></script>

There should be something missing I can’t figure out.

Thanks,
Levon

Hi Levon,

I can’t spot anything obviously wrong at first glance, but I do have a quick question: are you including the jquery library in the page with the form?

Hi fretburner,

I think I have or maybe I am wrong?

<script type='text/javascript' src='js/jquery.min.js'></script>

Thanks.

We will see.

Your page in question is your contact page, yes?

Go to your contact page. Let’s say it’s this.

http://www.sitehere.com/test/contact.php

Your Javascript file should be here (following your URL logic)

http://www.sitehere.com/test/js/jquery.min.js

If it’s not there, then you are missing it. So to test, remove your contact.php name from the URI, then put in “js/jquery.min.js”

That looks OK. Also, make sure you’re including your sending.js script at the bottom of the page, just before the closing tag.

Edit: As Ryan points out, as you’re using a relative path to jquery, make sure it’s correct for the location of the page itself.

I think I have both scripts URLs correct.

If that helps and it doesn’t violate the rules, I can share the URL.

No that’s fine, and it would be very helpful :slight_smile:

ok, here it is: http://www.avetyan.net/cform/test

Ah OK, I see the problem… you just need to change your script tag order so sending.js comes after jquery.

works fine now. thanks a lot!

Is it possible to have the success/failure messages in 2 languages and display the one corresponding to the page language?

As I guess I need to have 2 success messages, say $success_en and $success_es and add an additional IF here:

if (mail($mailto, $subject, $message, $headers)) {
    echo "$success"; // success
} else {
    echo 'Form submission failed. Please try again...'; // failure
}

However, I do not know the right syntax and most importantly I do not know how to determine the page language. Can you help me?

Thanks,
Levon

The best way to do that is to set up two include files that set the same set of variable names to the same messages but in the different languages and then use those variables to output the messages. Then you just include the file for the current language at the top of the page and the rest of the code then remains the same regardless of the number of languages you need to support.

This topic was automatically closed 91 days after the last reply. New replies are no longer allowed.