Multi Stage Contact Form - PHP - php

Question

http://webexpedition18.com/download/signup_form_WebExpedition18/
Hi Guys,
The above multi-stage contact form works great for my own project. It looks great and does the trick but i am stumped when trying to get the information submitted via email.
So i have a nice looking form but it wont send any information so is pretty useless to me. Even when i just upload the untouched demo files from the tutorial site, it still doesn't work.
Here's the html i have:
<div id="container">
<form action="contact.php" method="post">
<div id="first_step">
<div class="form">
<label for="full-name">Full Name:</label> <input id="username"
name="full-name" style="margin-bottom:10px;" type="text" value=
""> <label for="telephone">Telephone:</label> <input id=
"username" name="telephone" style="margin-bottom:10px;" type=
"text" value=""> <label for="email-address">Email
Address:</label> <input id="username" name="email-address"
style="margin-bottom:10px;" type="text" value="">
</div>
<div class="clear"></div><input class="submit" id="submit_first"
name="submit_first" type="submit" value="Next">
</div>
<div class="clear"></div>
<div id="second_step">
<div class="form">
<label for="company-name">Company Name (if you have
one):</label> <input id="username" name="company-name" style=
"margin-bottom:10px;" type="text" value=""> <label for=
"existing-website">Existing Website (if you have one):</label>
<input id="username" name="existing-website" style=
"margin-bottom:10px;" type="text" value=""> <label for=
"existing-domain">What domain would you like the new website to
be on?</label> <input id="username" name="existing-domain"
style="margin-bottom:10px;" type="text" value="">
</div>
<div class="clear"></div><input class="submit" id="submit_second"
name="submit_second" type="submit" value="Next">
</div>
<div class="clear"></div>
<div id="third_step">
<div class="form">
<label for="which-package">Which package would you
like?:</label>
<p><label><input id="RadioGroup1_0" name="RadioGroup1" type=
"radio" value="Standard"> Standard</label> <label><input id=
"RadioGroup1_1" name="RadioGroup1" type="radio" value=
"Business"> Business</label> <label><input id="RadioGroup1_2"
name="RadioGroup1" type="radio" value="Professional">
Professional</label></p><label for="which-template">Which
template would you like?:</label>
<p><label><input id="RadioGroup2_0" name="RadioGroup2" type=
"radio" value="1"> 1</label> <label><input id=
"RadioGroup2_1" name="RadioGroup2" type="radio" value=
"2"> 2</label> <label><input id="RadioGroup2_2"
name="RadioGroup2" type="radio" value="3">
3</label></p>
<div class="clear"></div>
</div>
<div class="clear"></div><input class="submit" id="submit_third"
name="submit_third" type="submit" value="Next">
</div>
<div class="clear"></div>
<div id="fourth_step">
<div class="form">
<h2>All done ...</h2>
<p style="margin-top:30px;">Press 'Submit' and we'll send you
everything you need to get you up and running.</p>
</div>
<div class="clear"></div><input class="send submit" id=
"submit_fourth" name="submit_fourth" type="submit" value="Submit">
</div>
</form>
</div>
</div>
The submit button just doesn't do anything. I have tried a number of different php form handler codes in my contact.php file but i still get nothing.
Any help is hugely appreciated guys. I'm getting really desperate now after 6 hours trying with this.
Thank you.
The JS file that comes with the demo is:
$(function(){
//original field values
var field_values = {
//id : value
'username' : 'username',
'password' : 'password',
'cpassword' : 'password',
'firstname' : 'first name',
'lastname' : 'last name',
'email' : 'email address'
};
//inputfocus
$('input#username').inputfocus({ value: field_values['username'] });
$('input#password').inputfocus({ value: field_values['password'] });
$('input#cpassword').inputfocus({ value: field_values['cpassword'] });
$('input#lastname').inputfocus({ value: field_values['lastname'] });
$('input#firstname').inputfocus({ value: field_values['firstname'] });
$('input#email').inputfocus({ value: field_values['email'] });
//reset progress bar
$('#progress').css('width','0');
$('#progress_text').html('0% Complete');
//first_step
$('form').submit(function(){ return false; });
$('#submit_first').click(function(){
//remove classes
$('#first_step input').removeClass('error').removeClass('valid');
//ckeck if inputs aren't empty
var fields = $('#first_step input[type=text], #first_step input[type=password]');
var error = 0;
fields.each(function(){
var value = $(this).val();
if( value.length<4 || value==field_values[$(this).attr('id')] ) {
$(this).addClass('error');
$(this).effect("shake", { times:3 }, 50);
error++;
} else {
$(this).addClass('valid');
}
});
if(!error) {
if( $('#password').val() != $('#cpassword').val() ) {
$('#first_step input[type=password]').each(function(){
$(this).removeClass('valid').addClass('error');
$(this).effect("shake", { times:3 }, 50);
});
return false;
} else {
//update progress bar
$('#progress_text').html('33% Complete');
$('#progress').css('width','113px');
//slide steps
$('#first_step').slideUp();
$('#second_step').slideDown();
}
} else return false;
});
$('#submit_second').click(function(){
//remove classes
$('#second_step input').removeClass('error').removeClass('valid');
var emailPattern = /^[a-zA-Z0-9._-]+#[a-zA-Z0-9.-]+\.[a-zA-Z]{2,4}$/;
var fields = $('#second_step input[type=text]');
var error = 0;
fields.each(function(){
var value = $(this).val();
if( value.length<1 || value==field_values[$(this).attr('id')] || ( $(this).attr('id')=='email' && !emailPattern.test(value) ) ) {
$(this).addClass('error');
$(this).effect("shake", { times:3 }, 50);
error++;
} else {
$(this).addClass('valid');
}
});
if(!error) {
//update progress bar
$('#progress_text').html('66% Complete');
$('#progress').css('width','226px');
//slide steps
$('#second_step').slideUp();
$('#third_step').slideDown();
} else return false;
});
$('#submit_third').click(function(){
//update progress bar
$('#progress_text').html('100% Complete');
$('#progress').css('width','339px');
//prepare the fourth step
var fields = new Array(
$('#username').val(),
$('#password').val(),
$('#email').val(),
$('#firstname').val() + ' ' + $('#lastname').val(),
$('#age').val(),
$('#gender').val(),
$('#country').val()
);
var tr = $('#fourth_step tr');
tr.each(function(){
//alert( fields[$(this).index()] )
$(this).children('td:nth-child(2)').html(fields[$(this).index()]);
});
//slide steps
$('#third_step').slideUp();
$('#fourth_step').slideDown();
});
$('#submit_fourth').click(function(){
//send information to server
alert('Sent. Thank you!');
});
});
And the php is used within my contact.php file was:
<?php
$errors = '';
$myemail = 'yourname#website.com';//<-----Put Your email address here.
if(empty($_POST['name']) ||
empty($_POST['email']) ||
empty($_POST['message']))
{
$errors .= "\n Error: all fields are required";
}
$name = $_POST['name'];
$email_address = $_POST['email'];
$message = $_POST['message'];
if (!preg_match(
"/^[_a-z0-9-]+(\.[_a-z0-9-]+)*#[a-z0-9-]+(\.[a-z0-9-]+)*(\.[a-z]{2,3})$/i",
$email_address))
{
$errors .= "\n Error: Invalid email address";
}
if( empty($errors))
{
$to = $myemail;
$email_subject = "Contact form submission: $name";
$email_body = "You have received a new message. ".
" Here are the details:\n Name: $name \n Email: $email_address \n Message \n $message";
$headers = "From: $myemail\n";
$headers .= "Reply-To: $email_address";
mail($to,$email_subject,$email_body,$headers);
//redirect to the 'thank you' page
header('Location: contact-form-thank-you.html');
}
?>
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
"http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<title>Contact form handler</title>
</head>
<body>
<!-- This page is displayed only if there is some error -->
<?php
echo nl2br($errors);
?>
</body>
</html>

Answer 1

$('form').submit(function(){ return false; }); tells that submit should return false