AJAX & PHP web submission form: with error checking merge

tiempo2 · September 12, 2012

I'm in a bit of a pickle as I have been utilising a great (and free) template from CSSSTemplates to fit my needs, chosen mainly for its simplicity but also its submission contact form. The trouble is when I start to pull a thread it just keeps going, I would like to meld the submission form with another free template which has error handling field by field, which is more impressive than the one I've got (plus, I like the stripey fill pattern in the submission fields).

Here is the page as per normal (yes I know the styling's a little skewered, I've been making some changes and it's gone wonky):

http://escalier-trading.co.uk/contact_bu.php

Here is the page where the <i>better</i> error checking script comes from: http://web-kreation.com/all/lightform-free-ajaxphp-contact-form/

..and the demo: http://web-kreation.com/demos/LightForm/

I tried to meld the two together here but found it difficult to get the style sheets to work together well, as you can see it's a little bit if a mess:

<!DOCTYPE HTML>
<html>

<!--  This notice must remain in place!
_______________________________________________________________
|                                                               |
|     AUTHOR  : Jeeremie { http://web-kreation.com }            |
|DESCRIPTION  : LightForm - Ajax Contact Form                   |
|   DOWNLOAD  : http://web-kreation.com/blog/?p=71              |
|    VERSION  : 1.1                                             |
|       DATE  : 2008.02.03                                      |
|      EMAIL  : info@web-kreation.com                           |
|    CREDITS  : Credits go to Moo Floor (www.moo.floor.ch) for  |
|               their fabulous FormCheck2 and to Badboy         |
|               (www.badboy.ro) his nice looking web form       |
|_______________________________________________________________|
-->

<?php

//========
//LICENSE
//========

//The CSS, XHTML, PHP and design is released under Creative Commons Attribution v2.5:
//http://creativecommons.org/licenses/by/2.5/

//Use of this contact form is free of charge but the copyright notes in the footer must remain intact.
//I would appreciate if you send me the URI of your site if you use LightForm.

//FormCheck (http://moo.floor.ch/?p=18) is released under the MIT license:
//http://www.opensource.org/licenses/mit-license.php

//NiceForms (http://www.badboy.ro/articles/2005-07-23/niceforms_preview/) is released under no specific license. You are free to use and modify but you must provide credits.

//This said, let's see how to use this contact form:


//=============
//INSTALLATION
//=============

//Installation is straight forward:

//1. Download and unzip the file
//2. Copy all the files to your root directory


//==============
//CONFIGURATION
//==============

//IMPORTANT!!
//Put in your email address below:
$to = 'yourname@domain.com';


//User info (DO NOT EDIT!)
$name = stripslashes($_POST['name']); //sender's name
$email = stripslashes($_POST['email']); //sender's email
$website = stripslashes($_POST['website']); //sender's website

//The subject
$subject  = "[LightFormX Contact Form] "; //The default subject. Will appear by default in all messages. Change this if you want.
$subject .= stripslashes($_POST['subject']); // the subject


//The message you will receive in your mailbox
//Each parts are commented to help you understand what it does exaclty.
//YOU DON'T NEED TO EDIT IT BELOW BUT IF YOU DO, DO IT WITH CAUTION!
$msg  = "From : $name \r\n";  //add sender's name to the message
$msg .= "e-Mail : $email \r\n";  //add sender's email to the message
$msg .= "Website : $website \r\n"; //add sender's website to the message
$msg .= "Subject : $subject \r\n\n"; //add subject to the message (optional! It will be displayed in the header anyway)
$msg .= "---Message--- \r\n".stripslashes($_POST['message'])."\r\n\n";  //the message itself

//Extras: User info (Optional!)
//Delete this part if you don't need it
//Display user information such as Ip address and browsers information...
$msg .= "---User information--- \r\n"; //Title
$msg .= "User IP : ".$_SERVER["REMOTE_ADDR"]."\r\n"; //Sender's IP
$msg .= "Browser info : ".$_SERVER["HTTP_USER_AGENT"]."\r\n"; //User agent
$msg .= "User come from : ".$_SERVER["HTTP_REFERER"]; //Referrer
// END Extras

?>

<head>
  <title>Escalier Trading</title>
  <meta name="description" content="website description" />
  <meta name="keywords" content="website keywords, website keywords" />
  <meta http-equiv="content-type" content="text/html; charset=UTF-8" />
  <link rel="stylesheet" type="text/css" href="css/style.css" />
  <!-- modernizr enables HTML5 elements and feature detects -->
  <script type="text/javascript" src="js/modernizr-1.5.min.js"></script>
  <link rel="shortcut icon" href="../favicon.ico" />
  <meta name="gspassport-site-verification" content="3367ac04-d4cd-4102-bfce-b63182846df8" />
  
  <link rel="stylesheet" href="css/main.css" type="text/css" media="screen" />

<script type="text/javascript" src="js/mootools.js"></script>

<!-- Formcheck2 / Moo.Floor.ch -->
<!-- http://moo.floor.ch/?p=18 -->
<script type="text/javascript" src="js/formcheck.js"></script>
<script type="text/javascript">
window.addEvent('domready', function(){check = new FormCheck('third', {
	display : {
		fadeDuration : 500,
		errorsLocation : 1,
		indicateErrors : 1,
		showErrors : 1
	}
})});
</script>


<!-- NiceForms / BadBoy.ro -->
<!-- http://www.badboy.ro/articles/2005-07-23/niceforms_preview/ -->
<script type="text/javascript" src="js/niceforms.js"></script>

</style>

</head>

<body>
  <div id="main">
    <header>
      <div id="logo"><h1>Escalier<a href="#"> </a>Trading</h1></div>
<!--      <div id="logo"><h1>Escalier</h1></div>-->
      <nav>
        <ul class="lavaLampWithImage" id="lava_menu">
          <li><a href="index.html">home</a></li>
          <li><a href="about.html">about us</a></li>
          <li><a href="wines.html">wines</a></li>
          <li><a href="gifts.html">gift box</a></li>
          <li><a href="wholesale.html">wholesale</a></li>
          <li class="current"><a href="contact.php">contact us</a></li>
        </ul>
      </nav>
    </header>
    <div id="site_content">
      <div id="sidebar_container">
        <div id="gallery">
          <ul class="images">
            <li class="show"><img width="450" height="450" src="images/1_b.png" alt="photo_one" /></li>
            <li><img width="450" height="450" src="images/2_b.png" alt="photo_two" /></li>
            <li><img width="450" height="450" src="images/3_b.png" alt="photo_three" /></li>
            <li><img width="450" height="450" src="images/4_b.png" alt="photo_four" /></li>
          </ul>
        </div>
      </div>

<!-- The contact form starts here-->
<?php
   if ($_SERVER['REQUEST_METHOD'] != 'POST'){
      $self = $_SERVER['PHP_SELF'];
?>

    <!-- Start HTML form -->
   	<form name="form" method="post" id="third" action="<?php echo $self;?>"  class="niceform">
	<h1>Contact</h1>
        <!-- Name -->
	<label for="name"><strong><span class="blue">*</span> Name : </strong></label>
		<input id="name" name="name" type="text" class="validate['required','length[3,-1]','nodigit']" size="20" />

	<!-- Email -->
	<label for="email"><strong><span class="blue">*</span> Email : </strong></label>
		<input id="email" name="email" type="text" class="validate['required','length[5,-1]','email']" size="20" />

	<!-- Website -->
	<label for="site">Website : </label>
		<input id="website" name="website" type="text" class="validate['url']" size="20" />

	<!-- Subject -->
    <label for="subject"><strong><span class="blue">*</span> Subject : </strong></label>
		<input id="subject" name="subject" type="text" class="validate['required']" size="20" />

	<!-- Message -->
	<label for="msg"><strong><span class="blue">*</span> Your message : </strong></label><br />
		<textarea id="message" name="message" type="text" class="validate['required']" rows="10" cols="30"></textarea>

	<!-- Spam Check -->
    <label for="spamcheck"><span class="blue">*</span> <acronym  title="[ Spam prevention ]"><strong>Simple maths</acronym> : <span class="blue">2 + 3 = ???</span></strong></label>
		<input id="spamcheck" name="spamcheck" type="text" size="5" class="validate['required','number','spamcheck']" />

	<br /><br />
	<input type="submit" class="buttonSubmit" value="Send it!" />

    <!-- Niceforms: mouse over effect -->
	<!-- Do not remove the line below -->
	<div id="stylesheetTest"></div>

</form>

<?php
} else {
        error_reporting(0);

      	if  (mail($to, $subject, $msg, "From: $email\r\nReply-To: $email\r\nReturn-Path: $email\r\n"))

  	//Message sent!
  	//It the message that will be displayed when the user click the sumbit button
  	//You can modify the text if you want
      	echo nl2br("
   	<div class=\"MsgSent\">
		<h1>Congratulations!!</h1>
		<p>Thank you <b><?=$name;?></b>, your message is sent!<br /> I will get back to you as soon as possible.</p>
	</div>
   ");

       	else

    // Display error message if the message failed to send
        echo "
   	<div class=\"MsgError\">
		<h1>Error!!</h1>
		<p>Sorry <b><?=$name;?></b>, your message failed to send. Try later!</p>
	</div>";
}
?>


    </div>
    <footer>
<!--      <p><a href="index.html">home</a> | <a href="about.html">about me</a> | <a href="portfolio.html">my portfolio</a> | <a href="blog.html">blog</a> | <a href="contact.php">contact</a></p> -->
      <p>© 2012 Escalier Trading. All Rights Reserved. | <a href="http://www.css3templates.co.uk">design from css3templates.co.uk</a></p>
    </footer>

  </div>
  <!-- javascript at the bottom for fast page loading -->
  <script type="text/javascript" src="js/jquery.min.js"></script>
  <script type="text/javascript" src="js/jquery.easing.min.js"></script>
  <script type="text/javascript" src="js/jquery.lavalamp.min.js"></script>
  <script type="text/javascript" src="js/image_fade.js"></script>
  <script type="text/javascript">
    $(function() {
      $("#lava_menu").lavaLamp({
        fx: "backout",
        speed: 700
      });
    });
  </script>
</body>
</html>

ref: http://www.escalier-trading.co.uk/ajax2.php

The submission does send properly, but the error trapping doesn't work and I can't seem to control the fields and where they go on the webpage.

Any help thanks.

Sign In

AJAX & PHP web submission form: with error checking merge

Recommended Posts

tiempo2

Link to comment

Share on other sites

Join the conversation

Browse

Activity

Important Information