Slick Contact Form using jQuery and PHP

Slick Contact Form using jQuery and PHP
17 Flares 17 Flares ×

Slick Contact Form using jQuery and PHP

Why we create a website? Why we need it? Now a days, why it becomes very important for every individual and organization to have an online presence? The answer will be: Because it is the place where people craft your first image in their mind. Website is the first place to make a good impression in the users mind. It is the place from where you can get good potential clients, customers, users, fans, etc. So what if they want to contact you yo give a feedback, suggestion, business proposal or just wanted to say Hi? They will simply click on the Contact us button from the menu. And if you provide them a beautiful and simple user interface with really awesome user experience then you certainly make a good impression. Creating such contact form needs designing skills as well as website development techniques.

Design a contact form in such a way that it will seduce (yeah, it should be so) the user to use it. And when push the submit button say thanks to him with a Smile!

In this tutorial I tried to achieve those things which I mentioned above. So, let’s start…

HTML

First we will link our CSS and JavaScript files to the html page. Where the contact_form.js is working with the help of contact.php to show the notifications with the smooth drop-down effect. contact.php will validate the input fields. And jquery-1.3.2.min.js and jquery.js are our JavaScript libraries.

<!-- CSS -->
	<link rel="stylesheet" href="style.css" type="text/css" />
        <link rel="stylesheet" href="header.css" type="text/css" />

	<!-- JAVASCRIPT -->
	<script type="text/javascript" src="js/jquery.js"></script>
	<script type="text/javascript" src="js/contact_form.js"></script>
	<script type="text/javascript" src="js/jquery-1.3.2.min.js"></script>

Let’s make the contact form simple to use by asking the user to fill only three fields : Name, email and message.

<!-- CONTAINER --></pre>
<h2>Slick Contact Form <span>Using jQuery and PHP</span></h2>
<div class="container"><!-- FORM -->
<div id="form">
<h3>Say hi...!</h3>
<form id="ajax-contact-form" action="javascript:alert('success!');">
<fieldset class="info_fieldset">
<div id="note"></div>
<div id="fields"><input class="textbox" type="text" name="name" value="" />

 <input class="textbox" type="text" name="email" value="" />

 <textarea class="textbox2" name="message" rows="5" cols="25"></textarea>

 <input class="button" type="submit" value="Send Message" /></div></fieldset>
</form></div>
 <!-- END FORM --></div>
<pre>	<!-- END CONTAINER -->

CSS

In CSS, first we will define the form container and the notification area. In notification are we will be showing the error/success notification and that also in a cool way !

/*contact form*/
#form {width:500px;
	position: absolute;
	padding: 18px 6% 60px 6%;
	margin: 0 auto;
	background: rgb(247, 247, 247);
	border: 1px solid rgba(147, 184, 189,0.8);
	-webkit-box-shadow: 0pt 2px 5px rgba(105, 108, 109,  0.7),	0px 0px 8px 5px rgba(208, 223, 226, 0.4) inset;
	   -moz-box-shadow: 0pt 2px 5px rgba(105, 108, 109,  0.7),	0px 0px 8px 5px rgba(208, 223, 226, 0.4) inset;
	        box-shadow: 0pt 2px 5px rgba(105, 108, 109,  0.7),	0px 0px 8px 5px rgba(208, 223, 226, 0.4) inset;
	-webkit-box-shadow: 5px;
	-moz-border-radius: 5px;
		 border-radius: 5px;
		 text-align:center;}

/*CSS for Error notification*/
.notification_error{
	border: 1px solid #f1dfc5;
	height: auto;color: #ca5702;
	padding: 10px;
	margin: 10px auto;
	text-align:left;
	-moz-border-radius:5px;
	margin-bottom:10px;}

/*CSS for Successfully sent notification*/
.notification_ok{
	border: 1px #cbcf8e solid;
	height: auto;padding: 10px;
	margin:0 auto;
	background: #f5f9fd;
	text-align: center;-moz-border-radius:
	5px;margin-bottom:10px;}

Now the following css will define the styling for textbox and textarea

/*CSS for textarea (Name and email)*/
textarea{
	width:400px;margin: 10px auto;
	padding: 5px;
	border: 1px solid #cccccc;
	color: #333333;
	font: 12px Verdana, Helvetica, Arial, sans-serif;
	-moz-border-radius: 3px;
		-webkit-appearance: textfield;
			-webkit-box-sizing: content-box;
	-moz-box-sizing : content-box;
		box-sizing : content-box;
			-webkit-border-radius: 3px;
	-moz-border-radius: 3px;
		border-radius: 3px;
			-webkit-box-shadow: 0px 1px 4px 0px rgba(168, 168, 168, 0.6) inset;
	-moz-box-shadow: 0px 1px 4px 0px rgba(168, 168, 168, 0.6) inset;
		box-shadow: 0px 1px 4px 0px rgba(168, 168, 168, 0.6) inset;
			webkit-transition: all 0.2s linear;
	-moz-transition: all 0.2s linear;
		-o-transition: all 0.2s linear;
			transition: all 0.2s linear;}

/*CSS for textbox (Message)*/
.textbox {
	width:400px;height:25px;
	margin: 10px auto;
	padding: 5px;
	border: 1px solid #cccccc;
	color: #333333;
	font: 12px Verdana, Helvetica, Arial, sans-serif;
	-moz-border-radius: 3px;
	-webkit-appearance: textfield;
	-webkit-box-sizing: content-box;
	  -moz-box-sizing : content-box;
	       box-sizing : content-box;
	-webkit-border-radius: 3px;
	   -moz-border-radius: 3px;
	        border-radius: 3px;
	-webkit-box-shadow: 0px 1px 4px 0px rgba(168, 168, 168, 0.6);
	   -moz-box-shadow: 0px 1px 4px 0px rgba(168, 168, 168, 0.6);
	        box-shadow: 0px 1px 4px 0px rgba(168, 168, 168, 0.6);
	-webkit-transition: all 0.2s linear;
	   -moz-transition: all 0.2s linear;
	     -o-transition: all 0.2s linear;
	        transition: all 0.2s linear;}
.textbox2 {height:140px;}

/*CSS for submit button*/
.button {width: 25%;
	cursor: pointer;
	background: rgb(61, 157, 179);
	padding: 4px 5px;
	font-family: 'BebasNeueRegular','Arial Narrow',Arial,sans-serif;
	color: #fff;
	font-size: 24px;
	border: 1px solid rgb(28, 108, 122);
	margin-bottom: 10px;
	text-shadow: 0 1px 1px rgba(0, 0, 0, 0.5);
	-webkit-border-radius: 3px;
	   -moz-border-radius: 3px;
	        border-radius: 3px;
	-webkit-box-shadow: 0px 1px 6px 4px rgba(0, 0, 0, 0.07) inset,
	        0px 0px 0px 3px rgb(254, 254, 254),
	        0px 5px 3px 3px rgb(210, 210, 210);
	   -moz-box-shadow:0px 1px 6px 4px rgba(0, 0, 0, 0.07) inset,
	        0px 0px 0px 3px rgb(254, 254, 254),
	        0px 5px 3px 3px rgb(210, 210, 210);
	        box-shadow:0px 1px 6px 4px rgba(0, 0, 0, 0.07) inset,
	        0px 0px 0px 3px rgb(254, 254, 254),
	        0px 5px 3px 3px rgb(210, 210, 210);
	-webkit-transition: all 0.2s linear;
	   -moz-transition: all 0.2s linear;
	     -o-transition: all 0.2s linear;
	        transition: all 0.2s linear;
			text-align:center;}

.button:hover{
	background: rgb(74, 179, 198);
}

PHP

contact.php

contact.php will validate the data which is put into the text fields are valid or not and request the JavaScript file to show the respective message to the user. You can customize the notification messages as per your need.

<!--?php <br ?-->
include 'config.php';
	error_reporting (E_ALL ^ E_NOTICE);
	$post = (!empty($_POST)) ? true : false;

if($post)
	{
		include 'functions.php';
		$name = stripslashes($_POST['name']);
		$email = trim($_POST['email']);
		$message = stripslashes($_POST['message']);

		$error = '';

// Check name
if(!$name)
	{
		$error .= 'I think you forget to enter your name.
';
	}
// Check email
if(!$email)
	{
		$error .= 'I think you forget to enter your e-mail id.
';
	}
if($email && !ValidateEmail($email))
	{
		$error .= 'Invalid E-mail id !!!
';
	}
if(!$error)
	{
		$mail = mail(WEBMASTER_EMAIL, $subject, $message,
     		"From: ".$name." \r\n"
    		."Reply-To: ".$email."\r\n"
    		."X-Mailer: PHP/" . phpversion());
if($mail)
	{
		echo 'OK';
	}
}
else
	{
		echo '</pre>
<div class="notification_error">'.$error.'</div>
<pre>';
	}
}
?>

Slick Contact Form using jQuery and PHP - Notification_1

Slick Contact Form using jQuery and PHP - Notification_2

config.php

And now the most important part of the whole contact form, yes the email id where you want to receive the emails which are sent from our this contact page. You just have to replace the email id in this file with your email id and that’s it, you are done !

<?php // To 	define("WEBMASTER_EMAIL", 'you@yourdomain.com'); ?>

So, in this way we have created a Slick Contact Form using jQuery and PHP and you can have a look at the demo here,

17 Flares Twitter 5 Facebook 7 Google+ 5 LinkedIn 0 Pin It Share 0 17 Flares ×
author avatar

Akash is a blogger, amateur photographer, speaker and a UI designer from Pune, India. He loves designing UI for websites and web applications for his clients. You can get in touch with him akash@dzyngiri.com | Twitter | Facebook

Connect with us

62 Comments

  1. Thanks so much! Works great and looks beautiful. I just need to change colors to match my site.

    I’m not finding is where to put the phrase “Your message has been sent successfully. Thanks!” Like you have it on your demo. As it is now, it’s just a blank box after the message is sent, which would be confusing for the sender.

    Thanks again!

    • Hello Jason,
      You will find this message in js/submitform.js file.
      In line no 47 you can customize your message…
      Let us know as soon as you successfully customize the form.
      Cheers !

      • Hey D, thanks for the response. I found it, but I don’t understand why it’s not showing up. I’m not great with php, so I’m sure it’s user error, but I thought I placed everything correctly. I’ll keep looking to see what I’ve done wrong, but if you happen to have a moment to look, it’s located at: http://ryderjason.com/contact.html . Feel free to send a test email to see what I mean.

        • Hey Jason,
          It is showing the success message. Just change the background color of class .notification_ok to some
          other color from white. Because the font color and the background color both are same i.e. white and
          thats why u r unable to see the message.

  2. Hi–This is really lovely, but I have two questions. 1) I need to have a subject line in the email sent to client (so they know where the form came from). I tried adding it to the contact.php but it screwed everything up. : ( and then 2) is there a way to prevent the autofill from showing up after submit? It looked beautiful the first time loaded, but after submit, no more JQ transitions at all. And I can’t seem to show JQ at all in chrome or safari–only Firefox Mac.

    And I guess 3) I cannot find where the italic style is coming from! Where can I remove that?? Thanks!

    • 1) Please add this line after the Email label

      <input class="textbox" type="text" name="subject" value="" placeholder="Subject"/>

      It will work with this… If you find any difficulty the let us know…
      2) I didnt get this :(
      3) For italic issue, edit or remove the line no 186 in style.css file

      • Thanks! But I actually wanted to just have the subject named through the config file, not add another field to the actual form. I just need the form to always be identified as “Contact from from xyz.com” but I do not want to add to the form. I tried editing config and contact, but just got errors. And I can’t get your example to work the JQ in Chrome or Safari OSX either. : ( And clearly the style I just didn’t open the file up and was only looking through DW CSS panel. Duh.

      • you can check it out on the demo in this site. Its also not working when you remove .com on the email, its still sending. I found out that eregi is not working in my php version, i use preg_match instead.
        best regards

  3. This is the best form I’ve found so far. The only issue I’m having is receiving any emails from “gmail” accounts if they’re using Firefox. I’ve tried several different email hosting accounts and they all work except gmail. If the user puts a gmail account in the email field, I won’t get it. Any fix for this?

  4. Pingback: simple php/jquery contact form– adding a subject | Jisku.com

  5. Thanks for this fantastic form. My only question is why two jQuery libraries are required? Can I just get the latest and use that one? Thanks again.

  6. Hi. Thank you for taking the time to create this form. I am having a slight problem :(
    The error messages display fine, but once everything is entered correctly the success message does not display and the email is not sent to my specified email. I have only changed the webmaster address, everything else is unchanged. Is this a php version issue perhaps?
    Fell free to have a look at http://www.deniznasif.com/form-test

    Many thanks in advance.

  7. Hi, how can I add in multiple fields to the form??? Also how can i edit the script so i can construct how the email looks when it comes through to us??

  8. Hi, this is a greate job…
    i can use this in a commercial project?…..not the same as it is….only the back-up code
    thanks

  9. Hi again! I have a problem…im working on a website with a lot of jQuery plugins, when i add ”jquery.js”(for contact) the other plugins don’t work any more. what can i do?

  10. To add subject change code in contact.php:

    $mail = mail(WEBMASTER_EMAIL, $subject, $message,
    “From: “.$name.” \r\n”
    .”Reply-To: “.$email.”\r\n”
    .”X-Mailer: PHP/” . phpversion());

    to

    $subject = “your subject”;
    $mail = mail(WEBMASTER_EMAIL, $subject, $message,
    “From: “.$name.” \r\n”
    .”Reply-To: “.$email.”\r\n”
    .”X-Mailer: PHP/” . phpversion());

    Thanks to Realistic Hostings – http://forums.phpfreaks.com/topic/263474-php-mail-probably-easy-fix/#entry1350256

  11. i have one question do i have to upload it in my ftp in order to work ? cause it doesn’t work in my local host when i tested it ?
    any help ?

  12. Worked perfectly and I’m not a PHP developer! I’ve even added a “Subject” field, no big fuss.

    Form is used here: camdenvenuehire.co.uk/contact.html

    Thanks a lot!

  13. I am having a slight problem :(
    The error messages display fine, but once everything is entered correctly the success message does not display and the email is not sent to my specified email. I have only changed the webmaster address, everything else is unchanged.

    • Dear Pooja,
      Namaskar!
      For success message, please check the color of the font for success message.
      For email id, have you tried some another email address?
      Or we can help you better if can share the link with us, so that we can have a close look.
      You can mail us at info[@]dzyngiri.com

  14. Can’t seem to get the form to work at all. Even after downloading the demo and running it on a local server, the form doesn’t display any error or success messages. Any idea why?

  15. Hey, Thanks for the Awesome Jquery Contact form.

    Your code is working fine.
    But in my site, i used jquery 9 and flex slider.

    So, these are stopped working. when i removed your jquery. Then flex slider working fine. But the contact form doesn’t.

    Can you please help me ?

    • As of jQuery 1.8, the .ajaxComplete() method should only be attached to document.

      so made some change in contact_form.js and put below code after line 12:

      $( document ).ajaxComplete(function(event, request, settings){
      
      if(msg == 'OK') // Message Sent? Show the 'Thank You' message and hide the form
      {
      result = 'Thnaks for your interest. We revert you after some time.';
      $("#fields").hide();
      }
      else
      {
      result = msg;
      }
      
      $("#note").hide();
      $("#note").html(result).slideDown("slow");
      
      $("#note").html(result);
      
      });
      
      }
      
       });
      
      return false;
      
      });
      
      });
      
  16. Hi there,

    Great tutorial. Thank you very much for providing it. I’ve got everything working except for some reason the send button is still there when the thank you message is shown. I’ve made quite a few amends so I’m guessing I’ve accidentally removed something I shouldn’t have.

    Any help will be much appreciated.

    Cheers

    • I have actually fixed that now, however, I have encountered another problem. When validating emails, if no email is entered then it comes up with the error (as it should) but if it is an email but not the correct format then the form shakes and no error is displayed. I’ve seen on another forum this being asked but there were no answers.
      Thanks in advance.

    • Sorry. Not sure what happened, but my whole post didn’t go through. I removed “.$email.” from line 33.

  17. I adapted this to fit my current ‘non-ajax’ contact form, along with moving ajaxComplete() to comply with jQuery 1.8 > guidelines and it has worked perfectly!!! Thank you very much, I’ll follow your tutorials moving forward

  18. Hello i want to added mobile number with regex verfication in the form i got the regex but dont knwohow to intgrate in to this cool form please help my regex is “‘/^((\+){0,1}91(\s){0,1}(\-){0,1}(\s){0,1})?([0-9]{10})$/’” please help me to add this in to funtions.php and working

  19. Warning: mail(): Failed to connect to mailserver at "localhost" port 25, verify your "SMTP" and "smtp_port" setting in php.ini or use ini_set() in C:\wamp\www\Slick_contact_form_using_jQuery_and_php\contact_form\contact.php on line 30

    im getting this error

  20. Great form, I have followed the instructions closely, twice, but my form doesn’t work at all!

    This comes from an earlier post..
    “Hello Jason,
    You will find this message in js/submitform.js file.
    In line no 47 you can customize your message…
    Let us know as soon as you successfully customize the form.
    Cheers !”

    I have no submitform.js file, so I’m guessing that’s a problem! I see no other mention of it above, did I miss it? Where can I get it?

    This is my test form…
    http://heretomeet.com/Form2.html

    Thanks

    Don

  21. Hi there, is there a way to make this work with jQuery 1.9.1? I’m unable to make it work with it as I have a ui dialog box working on there along with a slider.

  22. If communication via the contact form, write to us in Russian “Cyrillic”, then we can not read. Only the characters. How to fix?

Leave a Reply

(*) Required, Your email will not be published