A simple PHP contact form with a 3D effect
This contact form is made using HTML, PHP and CSS. The file structure needs to be kept in order to ensure the form is working properly.
Base folder
|_ CSS
|_ contact.css
|_ bootstrap.css
|_ contact.html
|_ thankyou.html
|_ error.html
The contact.html file includes the form itself.
The thankyou,html file is the file that is loaded if the form validates and sends the message.
The error.html file is the file that is loaded if the form fails to validate.
The contact.css file includes most of the styles that apply to the form. You can customize your form by customizing this file.
The bootstrap.css file includes additional styles. This file is not absolutely necessary because you will implement this form on your website and the form will inherit the standard styles (paragraph, link) from you main CSS file.
To implement the form on your website, just copy the file structure as it is, except the contact.html file. Just to be clear the files thankyou.html and error.html need to be in the same folder as the file you will implement your form on (let's say you will add the form in the contact-us.html file; thankyou.html and error.html need to be in the same folder as this file). Also the contact.php file needs to be in the same folder, as well as the CSS folder with the 2 styling files.
Open the contact.html file in a code editor. If you do not have one, Notepad is good enough. You should see something like this (after the opening <body> tag) :
<!--Contact form start--> <div align="center"> <section id="contact"> <h1>Contact us now!</h1> <p>You can contact us using the contact form below.</p> <form action="contact.php" method="post" class="cform-form"> <p><input type="text" name="name" placeholder="Your Name*" class="cform-text" size="40" title="Your name"></p> <p><input type="text" name="email" placeholder="Your Email*" class="cform-text" size="40" title="Your email"></p> <p><input type="text" name="phone" placeholder="Phone*" class="cform-text" size="40" title="Your email"></p> <p><select name="subject"> <option value="Support">Support</option> <option value="Question">Question</option> <option value="Report a Bug">Report a Bug</option> </select> </p> <p><input type="text" name="spam" placeholder="Anti-spam* : 4+3=?" class="cform-text" size="40" title="Enter the code"></p> <p><textarea name="comments" cols="40" rows="10" title="Drop us a line." placeholder="Your comment here"></textarea></p> <p><input type="submit" value="Send message"></p> </form> </section> </div> <!--Contact form end-->
Copy this text (between these comment tags : <!--Contact form start--> and <!--Contact form end-->). This is the form itself.
Now open the file on your website you want to place the code in and paste the code you just copied in the place you need / want the form to be. For example if you want to include a contact form in, let's say, contact-us.html file on your website, just open the file, go where you need to place the contact form and paste the code.
After you place the form you need to make sure, the styling for the form is loaded. So let's say we are working with the same "contact-us.html" file, you need to implement somewhere in the <head> section (between <head> and </head>) the loading arguments for the styles :
<link href="css/bootstrap.css" rel="stylesheet"> <link href="css/contact.css" rel="stylesheet"> <link href='http://fonts.googleapis.com/css?family=Patua+One' rel='stylesheet' type='text/css'>
These lines load the CSS stylings for the form as well as a Google Font the form is using, Patua One. If you want the form to use another Google font, you will need to edit the contact.css file and replace the lines including the Patua One font with your own.
That's about it for the implementation part. Now see the Settings section for the form configuration.
In order to make the form work, you need to customize some settings. These settings need to be made to the contact.php file. This is the file that handles the actual processing of the information collected from your form and sends the mail.
Just open the file with a code editor. If you don't have one, Notepad is enough. You should see this :
<? $mailto = 'youremail@mailprovider.com' ; $emailsubject = "New message from Your Website" ; $formurl = "contact.html" ; $errorurl = "error.html" ; $thankyouurl = "thankyou.html" ; // -------------------- END OF CONFIGURABLE SECTION --------------- $name = $_POST['name'] ; $email = $_POST['email'] ; $subject = $_POST['subject'] ; $phone = $_POST['phone'] ; $comments = $_POST['comments'] ; $spam=$_POST['spam'] ; $http_referrer = getenv( "HTTP_REFERER" ); if (!isset($_POST['email'])) { header( "Location: $formurl" ); exit ; } if (empty($name) || empty($email) || empty($comments) || $spam!="7") { header( "Location: $errorurl" ); exit ; } $name = strtok( $name, "\r\n" ); $email = strtok( $email, "\r\n" ); $phone = strtok( $phone, "\r\n" ); if (get_magic_quotes_gpc()) { $comments = stripslashes( $comments ); } $messageproper = "---------- Your Website Name message ----------\n\n" . "\nSent by : " . $name . "\nEmail : " . $email . "\nSubject : " . $subject . "\nPhone : " . $phone . "\n\n\nMessage : " . $comments; mail($mailto, $emailsubject, $messageproper, "From: \"$name\" <$email>\r\nReply-To: \"$name\" <$email>\r\nX-Mailer: chfeedback.php 2.04" ); header( "Location: $thankyouurl" ); exit ; ?>
$mailto = 'youremail@mailprovider.com' ;
Just edit youremail@mailprovider.com with your email. This is the email the form will send the message to.
$emailsubject = "New message from Your Website" ;
Edit New message from Your Website with your own text. This is the subject of the email being sent.
$formurl = "contact.html" ;
Edit contact.html with the name of the file that includes the contact form. In our example the name is contact-us.html, but on your website it might be different.
Towards the end of the contact.php file you will find this text :
---------- Your Website Name message ----------\n\n
You can replace it with your own text. This is a separator in the mail itself. Just test the email form one yourself and you will see what it does.
That's about it.
Maybe you will want to add a new field to your contact form. I will teach you how using an example.
Let's say I want to add a website field to the form. I need to edit the contact.html file and contact.php file.
The standard body of the contact.html file looks like this :
<!--Contact form start--> <div align="center"> <section id="contact"> <h1>Contact us now!</h1> <p>You can contact us using the contact form below.</p> <form action="contact.php" method="post" class="cform-form"> <p><input type="text" name="name" placeholder="Your Name*" class="cform-text" size="40" title="Your name"></p> <p><input type="text" name="email" placeholder="Your Email*" class="cform-text" size="40" title="Your email"></p> <p><input type="text" name="phone" placeholder="Phone*" class="cform-text" size="40" title="Your email"></p> <p><select name="subject"> <option value="Support">Support</option> <option value="Question">Question</option> <option value="Report a Bug">Report a Bug</option> </select> </p> <p><input type="text" name="spam" placeholder="Anti-spam* : 4+3=?" class="cform-text" size="40" title="Enter the code"></p> <p><textarea name="comments" cols="40" rows="10" title="Drop us a line." placeholder="Your comment here"></textarea></p> <p><input type="submit" value="Send message"></p> </form> </section> </div> <!--Contact form end-->
The code for the new HTML section will look a lot like for example the name field :
<p><input type="text" name="website" placeholder="Your Website*" class="cform-text" size="40" title="Your website"></p>
insert this text anywhere you wish. I want this field to display after the email field, so I will implement it between the email and phone fields. The new code will look like this :
<!--Contact form start--> <div align="center"> <section id="contact"> <h1>Contact us now!</h1> <p>You can contact us using the contact form below.</p> <form action="contact.php" method="post" class="cform-form"> <p><input type="text" name="name" placeholder="Your Name*" class="cform-text" size="40" title="Your name"></p> <p><input type="text" name="email" placeholder="Your Email*" class="cform-text" size="40" title="Your email"></p> <p><input type="text" name="website" placeholder="Your Website*" class="cform-text" size="40" title="Your website"></p> <p><input type="text" name="phone" placeholder="Phone*" class="cform-text" size="40" title="Your email"></p> <p><select name="subject"> <option value="Support">Support</option> <option value="Question">Question</option> <option value="Report a Bug">Report a Bug</option> </select> </p> <p><input type="text" name="spam" placeholder="Anti-spam* : 4+3=?" class="cform-text" size="40" title="Enter the code"></p> <p><textarea name="comments" cols="40" rows="10" title="Drop us a line." placeholder="Your comment here"></textarea></p> <p><input type="submit" value="Send message"></p> </form> </section> </div> <!--Contact form end-->
The standard contact.php file looks like :
<? $mailto = 'youremail@mailprovider.com' ; $emailsubject = "New message from Your Website" ; $formurl = "contact.html" ; $errorurl = "error.html" ; $thankyouurl = "thankyou.html" ; // -------------------- END OF CONFIGURABLE SECTION --------------- $name = $_POST['name'] ; $email = $_POST['email'] ; $subject = $_POST['subject'] ; $phone = $_POST['phone'] ; $comments = $_POST['comments'] ; $spam=$_POST['spam'] ; $http_referrer = getenv( "HTTP_REFERER" ); if (!isset($_POST['email'])) { header( "Location: $formurl" ); exit ; } if (empty($name) || empty($email) || empty($comments) || $spam!="7") { header( "Location: $errorurl" ); exit ; } $name = strtok( $name, "\r\n" ); $email = strtok( $email, "\r\n" ); $phone = strtok( $phone, "\r\n" ); if (get_magic_quotes_gpc()) { $comments = stripslashes( $comments ); } $messageproper = "---------- Your Website Name message ----------\n\n" . "\nSent by : " . $name . "\nEmail : " . $email . "\nSubject : " . $subject . "\nPhone : " . $phone . "\n\n\nMessage : " . $comments; mail($mailto, $emailsubject, $messageproper, "From: \"$name\" <$email>\r\nReply-To: \"$name\" <$email>\r\nX-Mailer: chfeedback.php 2.04" ); header( "Location: $thankyouurl" ); exit ; ?>
The edited contact.php file will be :
<? $mailto = 'youremail@mailprovider.com' ; $emailsubject = "New message from Your Website" ; $formurl = "contact.html" ; $errorurl = "error.html" ; $thankyouurl = "thankyou.html" ; // -------------------- END OF CONFIGURABLE SECTION --------------- $name = $_POST['name'] ; $email = $_POST['email'] ; $subject = $_POST['subject'] ; $phone = $_POST['phone'] ; $website = $_POST['website'] ; $comments = $_POST['comments'] ; $spam=$_POST['spam'] ; $http_referrer = getenv( "HTTP_REFERER" ); if (!isset($_POST['email'])) { header( "Location: $formurl" ); exit ; } if (empty($name) || empty($email) || empty($website) || empty($comments) || $spam!="7") { header( "Location: $errorurl" ); exit ; } $name = strtok( $name, "\r\n" ); $email = strtok( $email, "\r\n" ); $phone = strtok( $phone, "\r\n" ); $website = strtok( $website, "\r\n" ); if (get_magic_quotes_gpc()) { $comments = stripslashes( $comments ); } $messageproper = "---------- Your Website Name message ----------\n\n" . "\nSent by : " . $name . "\nEmail : " . $email . "\nSubject : " . $subject . "\nPhone : " . $phone . "\nWebsite : " . $website . "\n\n\nMessage : " . $comments; mail($mailto, $emailsubject, $messageproper, "From: \"$name\" <$email>\r\nReply-To: \"$name\" <$email>\r\nX-Mailer: chfeedback.php 2.04" ); header( "Location: $thankyouurl" ); exit ; ?>
$website = $_POST['website'] ;
and this :
$website = strtok( $website, "\r\n" );
Also some other changes have been made. In this row :
if (empty($name) || empty($email) || empty($comments) || $spam!="7") {
we have added a verification for the website field. If this field is empty the form will return the error.html file. In plain terms the filed we have added is obligatory. The line now looks like this :
if (empty($name) || empty($email) || empty($website) || empty($comments) || $spam!="7") {
You can notice the difference.
Also in the email message body has been implemented the website field :
Before :
$messageproper = "---------- Your Website Name message ----------\n\n" . "\nSent by : " . $name . "\nEmail : " . $email . "\nSubject : " . $subject . "\nPhone : " . $phone . "\n\n\nMessage : " . $comments;
After :
$messageproper = "---------- Your Website Name message ----------\n\n" . "\nSent by : " . $name . "\nEmail : " . $email . "\nSubject : " . $subject . "\nPhone : " . $phone . "\nWebsite : " . $website . "\n\n\nMessage : " . $comments;
These are the changes that need to be made when you add a new field. If the field you are adding doesn't need to be mandatory, skip editing this line :
if (empty($name) || empty($email) || empty($comments) || $spam!="7") {
This form includes a really simple CAPTCHA for anti-spam protection in the form of a math question. You can change this in anyway you wish.
A particulary effective captcha style is asking the user to write the current year. It might seem really basic, but it actually does work.
Do how to you edit the CAPTCHA ?
You need to edit the contact.html file and the contact.php file.
In the contact.html file search for this line :
<p><input type="text" name="spam" placeholder="Anti-spam* : 4+3=?" class="cform-text" size="40" title="Enter the code"></p>
Edit placeholder="Anti-spam* : 4+3=?" with anything you wish, in this example : placeholder="Anti-spam* : What year is it"
In the contact.php file search for this line :
if (empty($name) || empty($email) || empty($website) || empty($comments) || $spam!="7") {
Edit $spam!="7" ; actually you only need to edit the 7. Replace it with the answer to the question. In this case 2013. So the new value will be : $spam!="2013"
That is it.