File: /home/frenchlanguagelessons.co.uk/public_html/contact-form/Documentation/index.html
<!doctype html>
<!--[if IE 6 ]><html lang="en-us" class="ie6"> <![endif]-->
<!--[if IE 7 ]><html lang="en-us" class="ie7"> <![endif]-->
<!--[if IE 8 ]><html lang="en-us" class="ie8"> <![endif]-->
<!--[if (gt IE 7)|!(IE)]><!-->
<html lang="en-us"><!--<![endif]-->
<head>
<meta charset="utf-8">
<title>3D Contact Form - A simple PHP contact form with a 3D effect</title>
<meta name="description" content="This is a 3D contact form made with HTML, CSS and PHP. It's easy to customize and implement in any website with minimal programming knowledge.">
<meta name="author" content="We Sell Design">
<meta name="copyright" content="We Sell Design">
<meta name="generator" content="Documenter v2.0 http://rxa.li/documenter">
<meta name="date" content="2013-11-02T00:00:00+01:00">
<link rel="stylesheet" href="assets/css/documenter_style.css" media="all">
<link rel="stylesheet" href="assets/js/google-code-prettify/prettify.css" media="screen">
<script src="assets/js/google-code-prettify/prettify.js"></script>
<script src="assets/js/jquery.js"></script>
<script src="assets/js/jquery.scrollTo.js"></script>
<script src="assets/js/jquery.easing.js"></script>
<script>document.createElement('section');var duration='500',easing='swing';</script>
<script src="assets/js/script.js"></script>
<style>
html{background-color:#EFEFEF;color:#1C140D;}
::-moz-selection{background:#CBE86B;color:#1C140D;}
::selection{background:#CBE86B;color:#1C140D;}
#documenter_sidebar #documenter_logo{background-image:url();}
a{color:#889C48;}
.btn {
border-radius:3px;
}
.btn-primary {
background-image: -moz-linear-gradient(top, #CBE86B, #889C48);
background-image: -ms-linear-gradient(top, #CBE86B, #889C48);
background-image: -webkit-gradient(linear, 0 0, 0 CBE86B%, from(#F2E9E1), to(#889C48));
background-image: -webkit-linear-gradient(top, #CBE86B, #889C48);
background-image: -o-linear-gradient(top, #CBE86B, #889C48);
background-image: linear-gradient(top, #CBE86B, #889C48);
filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#CBE86B', endColorstr='#889C48', GradientType=0);
border-color: #889C48 #889C48 #bfbfbf;
color:#FFFFFF;
}
.btn-primary:hover,
.btn-primary:active,
.btn-primary.active,
.btn-primary.disabled,
.btn-primary[disabled] {
border-color: #CBE86B #CBE86B #bfbfbf;
background-color: #889C48;
}
hr{border-top:1px solid #CCCCCC;border-bottom:1px solid #FFFFFF;}
#documenter_sidebar, #documenter_sidebar ul a{background-color:#F2E9E1;color:#1C140D;}
#documenter_sidebar ul a{-webkit-text-shadow:1px 1px 0px #FFF6ED;-moz-text-shadow:1px 1px 0px #FFF6ED;text-shadow:1px 1px 0px #FFF6ED;}
#documenter_sidebar ul{border-top:1px solid #D1C9C2;}
#documenter_sidebar ul a{border-top:1px solid #FFF6ED;border-bottom:1px solid #D1C9C2;color:#1C140D;}
#documenter_sidebar ul a:hover{background:#CBE86B;color:#1C140D;border-top:1px solid #CBE86B;}
#documenter_sidebar ul a.current{background:#CBE86B;color:#1C140D;border-top:1px solid #CBE86B;}
#documenter_copyright{display:block !important;visibility:visible !important;}
</style>
</head>
<body class="documenter-project-3d-contact-form">
<div id="documenter_sidebar">
<a href="#documenter_cover" id="documenter_logo"></a>
<ul id="documenter_nav">
<li><a class="current" href="#documenter_cover">Start</a></li>
<li><a href="#files" title="Files">Files</a></li>
<li><a href="#implementing_the_form" title="Implementing the form">Implementing the form</a></li>
<li><a href="#settings" title="Settings">Settings</a></li>
<li><a href="#adding_a_new_field" title="Adding a new field">Adding a new field</a></li>
<li><a href="#captcha" title="Captcha">Captcha</a></li>
</ul>
<div id="documenter_copyright">Copyright We Sell Design 2013<br>
made with the <a href="http://rxa.li/documenter">Documenter v2.0</a>
</div>
</div>
<div id="documenter_content">
<section id="documenter_cover">
<h1>3D Contact Form</h1>
<h2>A simple PHP contact form with a 3D effect</h2>
<div id="documenter_buttons">
<a href="http://www.weselldesign.com/demo/code/contact/contact.html" class="btn btn-primary btn-large">Demo</a>
</div>
<hr>
<ul>
<li>created: 11/02/2013</li>
<li>latest update: 11/02/2013</li>
<li>by: We Sell Design</li>
<li><a href="http://www.weselldesign.com/">www.weselldesign.com/</a></li>
<li>email: <a href="mailto:crazyleafdesign.com@gmail.com">crazyleafdesign.com@gmail.com</a></li>
</ul>
<p>A simple PHP contact form with a 3D effect</p>
</section>
<section id="files">
<div class="page-header"><h3>Files</h3><hr class="notop"></div>
<p>
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. </p>
<h2>
File Structure</h2>
<p>
<strong>Base folder </strong></p>
<p>
|_ <strong>CSS</strong></p>
<p>
|_ contact.css</p>
<p>
|_ bootstrap.css</p>
<p>
|_ contact.html</p>
<p>
|_ thankyou.html</p>
<p>
|_ error.html</p>
<p>
</p>
<p>
The contact.html file includes the form itself.</p>
<p>
The thankyou,html file is the file that is loaded if the form validates and sends the message.</p>
<p>
The error.html file is the file that is loaded if the form fails to validate.</p>
<p>
The contact.css file includes most of the styles that apply to the form. You can customize your form by customizing this file.</p>
<p>
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.</p>
<p>
</p>
</section>
<section id="implementing_the_form">
<div class="page-header"><h3>Implementing the form</h3><hr class="notop"></div>
<p>
To implement the form on your website, just copy the file structure as it is, <strong>except the contact.html file</strong>. 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 <strong>contact-us.html </strong>file; <strong>thankyou.html </strong>and <strong>error.html </strong>need to be in the same folder as this file). Also the <strong>contact.php</strong> file needs to be in the same folder, as well as the CSS folder with the 2 styling files.</p>
<p>
Open the <strong>contact.html </strong>file in a code editor. If you do not have one, Notepad is good enough. You should see something like this (after the opening <strong><body></strong> tag) :</p>
<pre class="prettyprint lang-html linenums">
<!--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--></pre>
<p>
Copy this text (between these comment tags : <span style="line-height: 19px;"><!--Contact form start--> and </span><span style="line-height: 19px;"><!--Contact form end--></span>). This is the form itself. </p>
<p>
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, <strong>contact-us.html</strong> file on your website, just open the file, go where you need to place the contact form and paste the code.</p>
<p>
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 "<strong>contact-us.html</strong>" file, you need to implement somewhere in the <head> section (between <head> and </head>) the loading arguments for the styles : </p>
<pre class="prettyprint lang-html linenums">
<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'></pre>
<p>
These lines load the CSS stylings for the form as well as a Google Font the form is using, <strong>Patua One</strong>. 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.</p>
<p>
That's about it for the implementation part. Now see the <strong>Settings </strong>section for the form configuration.</p>
<p>
</p>
</section>
<section id="settings">
<div class="page-header"><h3>Settings</h3><hr class="notop"></div>
<p>
In order to make the form work, you need to customize some settings. These settings need to be made to the <strong>contact.php</strong> file. This is the file that handles the actual processing of the information collected from your form and sends the mail.</p>
<p>
Just open the file with a code editor. If you don't have one, Notepad is enough. You should see this : </p>
<pre class="prettyprint lang-php linenums">
<?
$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 ;
?></pre>
<div>
You need to edit the first lines :</div>
<div>
</div>
<div>
<pre class="prettyprint lang-php linenums">
$mailto = 'youremail@mailprovider.com' ;</pre>
<p>
Just edit <strong>youremail@mailprovider.com</strong> with your email. This is the email the form will send the message to.</p>
</div>
<pre class="prettyprint lang-php linenums">
$emailsubject = "New message from Your Website" ;</pre>
<p>
Edit <strong>New message from Your Website</strong> with your own text. This is the subject of the email being sent.</p>
<pre class="prettyprint lang-php linenums">
$formurl = "contact.html" ;</pre>
<p>
Edit <strong>contact.html </strong>with the name of the file that includes the contact form. In our example the name is <strong>contact-us.html</strong>, but on your website it might be different.</p>
<p>
Towards the end of the contact.php file you will find this text : </p>
<pre class="prettyprint lang-php linenums">
---------- Your Website Name message ----------\n\n</pre>
<p>
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.</p>
<p>
That's about it.</p>
</section>
<section id="adding_a_new_field">
<div class="page-header"><h3>Adding a new field</h3><hr class="notop"></div>
<p>
Maybe you will want to add a new field to your contact form. I will teach you how using an example.</p>
<p>
Let's say I want to add a website field to the form. I need to edit the <strong>contact.html </strong>file and <strong>contact.php</strong> file.</p>
<h2>
Editing the contact.html file </h2>
<p>
The standard body of the contact.html file looks like this : </p>
<pre class="prettyprint lang-html linenums">
<!--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--></pre>
<p>
The code for the new HTML section will look a lot like for example the name field : </p>
<pre class="prettyprint lang-html linenums">
<p><input type="text" name="website" placeholder="Your Website*" class="cform-text" size="40" title="Your website"></p></pre>
<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 : </p>
<pre class="prettyprint lang-html linenums">
<!--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>
<strong><p><input type="text" name="website" placeholder="Your Website*" class="cform-text" size="40" title="Your website"></p></strong>
<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--></pre>
<h2>
Editing the contact.php file </h2>
<p>
The standard contact.php file looks like : </p>
<pre class="prettyprint lang-php linenums">
<?
$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 ;
?></pre>
<p>
The edited contact.php file will be : </p>
<pre class="prettyprint lang-php linenums">
<?
$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 ;
?></pre>
<div>
You will notice these changes : </div>
<div>
</div>
<div>
This line has been added : </div>
<div>
<pre class="prettyprint lang-php linenums">
$website = $_POST['website'] ;</pre>
<p>
and this : </p>
</div>
<pre class="prettyprint lang-php linenums">
$website = strtok( $website, "\r\n" );</pre>
<p>
Also some other changes have been made. In this row : </p>
<pre class="prettyprint lang-php linenums">
if (empty($name) || empty($email) || empty($comments) || $spam!="7") {</pre>
<p>
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 : </p>
<pre class="prettyprint lang-php linenums">
if (empty($name) || empty($email) || empty($website) || empty($comments) || $spam!="7") {</pre>
<p>
You can notice the difference.</p>
<p>
Also in the email message body has been implemented the website field :</p>
<p>
Before : </p>
<pre class="prettyprint lang-php linenums">
$messageproper =
"---------- Your Website Name message ----------\n\n" . "\nSent by : " . $name . "\nEmail : " . $email . "\nSubject : " . $subject . "\nPhone : " . $phone . "\n\n\nMessage : " . $comments;</pre>
<p>
After : </p>
<pre class="prettyprint lang-php linenums">
$messageproper =
"---------- Your Website Name message ----------\n\n" . "\nSent by : " . $name . "\nEmail : " . $email . "\nSubject : " . $subject . "\nPhone : " . $phone . "\nWebsite : " . $website . "\n\n\nMessage : " . $comments;</pre>
<p>
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 : </p>
<pre class="prettyprint lang-php linenums">
if (empty($name) || empty($email) || empty($comments) || $spam!="7") {</pre>
</section>
<section id="captcha">
<div class="page-header"><h3>Captcha</h3><hr class="notop"></div>
<p>
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.</p>
<p>
A particulary effective captcha style is asking the user to write the current year. It might seem really basic, but it actually does work.</p>
<p>
<strong>Do how to you edit the CAPTCHA ?</strong></p>
<p>
You need to edit the contact.html file and the contact.php file.</p>
<p>
In the contact.html file search for this line : </p>
<pre class="prettyprint lang-html linenums">
<p><input type="text" name="spam" placeholder="Anti-spam* : 4+3=?" class="cform-text" size="40" title="Enter the code"></p></pre>
<p>
Edit <strong>placeholder="Anti-spam* : 4+3=?" </strong> with anything you wish, in this example : <strong>placeholder="Anti-spam* : What year is it"</strong></p>
<p>
In the contact.php file search for this line : </p>
<pre class="prettyprint lang-html linenums">
if (empty($name) || empty($email) || empty($website) || empty($comments) || $spam!="7") {</pre>
<p>
Edit <strong><span style="line-height: 19px;">$spam!="7"</span></strong><span style="line-height: 19px;"> ; actually you only need to edit the <strong>7.</strong> Replace it with the answer to the question. In this case <strong>2013</strong>. So the new value will be : </span><strong><span style="line-height: 19px;">$spam!="2013"</span></strong></p>
<p>
<span style="line-height: 19px;">That is it.</span></p>
</section>
</div>
</body>
</html>