Multi Stage Contact Form - PHP -
http://webexpedition18.com/download/signup_form_webexpedition18/
hi guys,
the above multi-stage contact form works great own project. looks great , trick stumped when trying information submitted via email.
so have nice looking form wont send information pretty useless me. when upload untouched demo files tutorial site, still doesn't work.
here's html 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 have one):</label> <input id="username" name="company-name" style= "margin-bottom:10px;" type="text" value=""> <label for= "existing-website">existing website (if have one):</label> <input id="username" name="existing-website" style= "margin-bottom:10px;" type="text" value=""> <label for= "existing-domain">what domain new website 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 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 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' , we'll send need , 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 doesn't anything. have tried number of different php form handler codes in contact.php file still nothing.
any hugely appreciated guys. i'm getting desperate after 6 hours trying this.
thank you.
the js file comes 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 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 server alert('sent. thank you!'); }); }); and php used within contact.php file was:
<?php $errors = ''; $myemail = 'yourname@website.com';//<-----put email address here. if(empty($_post['name']) || empty($_post['email']) || empty($_post['message'])) { $errors .= "\n error: fields 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 new message. ". " here 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 '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> <!-- page displayed if there error --> <?php echo nl2br($errors); ?> </body> </html>
$('form').submit(function(){ return false; }); tells submit should return false
Comments
Post a Comment