Website At 100: Form

<div dir="ltr" style="text-align: left;" trbidi="on">
<div style="background-color: white; color: #666666; font-family: 'Droid Sans'; font-size: 12px; line-height: 22px; margin-bottom: 18px; text-align: justify;">
There are lots of <a href="http://websiteat100.com/blog/category/wordpress/" style="-webkit-transition: background-color 0.2s ease 0s, border 0.2s ease 0s, color 0.2s ease 0s, opacity 0.2s ease-in-out 0s; color: black; line-height: inherit; text-decoration: none; transition: background-color 0.2s ease 0s, border 0.2s ease 0s, color 0.2s ease 0s, opacity 0.2s ease-in-out 0s;" title="Wordpress blog by websiteat100.com">wordpress </a>plugin in wordpress plugin directory to add a contact form in your <a href="http://websiteat100.com/blog/category/wordpress/" style="-webkit-transition: background-color 0.2s ease 0s, border 0.2s ease 0s, color 0.2s ease 0s, opacity 0.2s ease-in-out 0s; color: black; line-height: inherit; text-decoration: none; transition: background-color 0.2s ease 0s, border 0.2s ease 0s, color 0.2s ease 0s, opacity 0.2s ease-in-out 0s;" title="Wordpress blog by websiteat100.com">wordpress </a>blog; less plugin added in your site also less of server space you’ve taken, creating a built-in page template in your <a href="http://websiteat100.com/blog/category/wordpress/" style="-webkit-transition: background-color 0.2s ease 0s, border 0.2s ease 0s, color 0.2s ease 0s, opacity 0.2s ease-in-out 0s; color: black; line-height: inherit; text-decoration: none; transition: background-color 0.2s ease 0s, border 0.2s ease 0s, color 0.2s ease 0s, opacity 0.2s ease-in-out 0s;" title="Wordpress blog by websiteat100.com">wordpress</a>site is very useful. In this tutorial I will explain how you can create and add Contact Form in your <a href="http://websiteat100.com/blog/category/wordpress/" style="-webkit-transition: background-color 0.2s ease 0s, border 0.2s ease 0s, color 0.2s ease 0s, opacity 0.2s ease-in-out 0s; color: black; line-height: inherit; text-decoration: none; transition: background-color 0.2s ease 0s, border 0.2s ease 0s, color 0.2s ease 0s, opacity 0.2s ease-in-out 0s;" title="Wordpress blog by websiteat100.com">wordpress </a>theme.</div>
<h3 style="background-color: white; color: #333333; font-family: 'Droid Sans'; font-size: 16px; font-weight: 200; letter-spacing: -0.1px; line-height: 20px; margin-top: 0px; padding: 0px; text-align: justify;">
Step 1: Create a page template</h3>
<div style="background-color: white; color: #666666; font-family: 'Droid Sans'; font-size: 12px; line-height: 22px; margin-bottom: 18px; text-align: justify;">
The first step is to create an empty page template, page-contact.php, now, open the empty <a href="http://websiteat100.com/blog/category/php/" style="-webkit-transition: background-color 0.2s ease 0s, border 0.2s ease 0s, color 0.2s ease 0s, opacity 0.2s ease-in-out 0s; color: black; line-height: inherit; text-decoration: none; transition: background-color 0.2s ease 0s, border 0.2s ease 0s, color 0.2s ease 0s, opacity 0.2s ease-in-out 0s;" title="Php blog by websiteat100.com">PHP </a>file and add these comment code right at the beginning of the file, here’s the code.</div>
<div data-settings=" minimize scroll-mouseover" id="crayon-52ae90ef9eeb9295357321" style="background-color: white; color: #666666; font-family: 'Droid Sans'; font-size: 12px; line-height: 22px; text-align: justify;">
<div data-settings=" show">
PHP</div>
<div>
</div>
<div>
<table style="border-collapse: collapse; border-spacing: 0px;"><tbody>
<tr><td data-settings="show" style="border: none; color: #333333; font-size: 12px; line-height: 18px; padding: 9px 10px; vertical-align: top;"><div data-line="crayon-52ae90ef9eeb9295357321-1">
1</div>
<div data-line="crayon-52ae90ef9eeb9295357321-2">
2</div>
<div data-line="crayon-52ae90ef9eeb9295357321-3">
3</div>
<div data-line="crayon-52ae90ef9eeb9295357321-4">
4</div>
<div data-line="crayon-52ae90ef9eeb9295357321-5">
5</div>
</td><td style="border: none; color: #333333; font-size: 12px; line-height: 18px; padding: 9px 10px; vertical-align: top;"><div id="crayon-52ae90ef9eeb9295357321-1">
<?php</div>
<div id="crayon-52ae90ef9eeb9295357321-2">
/*</div>
<div id="crayon-52ae90ef9eeb9295357321-3">
Template Name:  Contact Page</div>
<div id="crayon-52ae90ef9eeb9295357321-4">
*/</div>
<div id="crayon-52ae90ef9eeb9295357321-5">
?></div>
</td></tr>
</tbody></table>
</div>
</div>
<div style="background-color: white; color: #666666; font-family: 'Droid Sans'; font-size: 12px; line-height: 22px; margin-bottom: 18px; text-align: justify;">
We need to add the code at the beginning of the file to make sure <a href="http://websiteat100.com/blog/category/wordpress/" style="-webkit-transition: background-color 0.2s ease 0s, border 0.2s ease 0s, color 0.2s ease 0s, opacity 0.2s ease-in-out 0s; color: black; line-height: inherit; text-decoration: none; transition: background-color 0.2s ease 0s, border 0.2s ease 0s, color 0.2s ease 0s, opacity 0.2s ease-in-out 0s;" title="Wordpress blog by websiteat100.com">WordPress </a>will read our file as a valid custom Page Template.</div>
<div style="background-color: white; color: #666666; font-family: 'Droid Sans'; font-size: 12px; line-height: 22px; margin-bottom: 18px; text-align: justify;">
Here’s how the Contact Page template looks.</div>
<div data-settings=" minimize scroll-mouseover" id="crayon-52ae90ef9eec4396114235" style="background-color: white; color: #666666; font-family: 'Droid Sans'; font-size: 12px; line-height: 22px; text-align: justify;">
<div data-settings=" show">
PHP</div>
<div>
</div>
<div>
<table style="border-collapse: collapse; border-spacing: 0px;"><tbody>
<tr><td data-settings="show" style="border: none; color: #333333; font-size: 12px; line-height: 18px; padding: 9px 10px; vertical-align: top;"><div data-line="crayon-52ae90ef9eec4396114235-1">
1</div>
<div data-line="crayon-52ae90ef9eec4396114235-2">
2</div>
<div data-line="crayon-52ae90ef9eec4396114235-3">
3</div>
<div data-line="crayon-52ae90ef9eec4396114235-4">
4</div>
<div data-line="crayon-52ae90ef9eec4396114235-5">
5</div>
<div data-line="crayon-52ae90ef9eec4396114235-6">
6</div>
<div data-line="crayon-52ae90ef9eec4396114235-7">
7</div>
<div data-line="crayon-52ae90ef9eec4396114235-8">
8</div>
<div data-line="crayon-52ae90ef9eec4396114235-9">
9</div>
<div data-line="crayon-52ae90ef9eec4396114235-10">
10</div>
<div data-line="crayon-52ae90ef9eec4396114235-11">
11</div>
<div data-line="crayon-52ae90ef9eec4396114235-12">
12</div>
<div data-line="crayon-52ae90ef9eec4396114235-13">
13</div>
<div data-line="crayon-52ae90ef9eec4396114235-14">
14</div>
<div data-line="crayon-52ae90ef9eec4396114235-15">
15</div>
<div data-line="crayon-52ae90ef9eec4396114235-16">
16</div>
<div data-line="crayon-52ae90ef9eec4396114235-17">
17</div>
<div data-line="crayon-52ae90ef9eec4396114235-18">
18</div>
<div data-line="crayon-52ae90ef9eec4396114235-19">
19</div>
<div data-line="crayon-52ae90ef9eec4396114235-20">
20</div>
<div data-line="crayon-52ae90ef9eec4396114235-21">
21</div>
<div data-line="crayon-52ae90ef9eec4396114235-22">
22</div>
<div data-line="crayon-52ae90ef9eec4396114235-23">
23</div>
<div data-line="crayon-52ae90ef9eec4396114235-24">
24</div>
<div data-line="crayon-52ae90ef9eec4396114235-25">
25</div>
</td><td style="border: none; color: #333333; font-size: 12px; line-height: 18px; padding: 9px 10px; vertical-align: top;"><div id="crayon-52ae90ef9eec4396114235-1">
<?php</div>
<div id="crayon-52ae90ef9eec4396114235-2">
/*</div>
<div id="crayon-52ae90ef9eec4396114235-3">
Template Name: Contact Page</div>
<div id="crayon-52ae90ef9eec4396114235-4">
*/</div>
<div id="crayon-52ae90ef9eec4396114235-5">
?></div>
<div id="crayon-52ae90ef9eec4396114235-6">
</div>
<div id="crayon-52ae90ef9eec4396114235-7">
<?php the_post() ?></div>
<div id="crayon-52ae90ef9eec4396114235-8">
<?php get_header() ?></div>
<div id="crayon-52ae90ef9eec4396114235-9">
</div>
<div id="crayon-52ae90ef9eec4396114235-10">
    <div class=”contact-container”></div>
<div id="crayon-52ae90ef9eec4396114235-11">
        <div class=”content-wrapper”></div>
<div id="crayon-52ae90ef9eec4396114235-12">
            <div class=”post-<?php the_ID() ?>” class=”post”></div>
<div id="crayon-52ae90ef9eec4396114235-13">
                <div class=”entry-content”></div>
<div id="crayon-52ae90ef9eec4396114235-14">
                </div><!– end entry-content –></div>
<div id="crayon-52ae90ef9eec4396114235-15">
            </div><!– end post–></div>
<div id="crayon-52ae90ef9eec4396114235-16">
        </div><!– end content-wrapper –></div>
<div id="crayon-52ae90ef9eec4396114235-17">
</div>
<div id="crayon-52ae90ef9eec4396114235-18">
                <!–display right sidebar–></div>
<div id="crayon-52ae90ef9eec4396114235-19">
        <?php get_sidebar() ?></div>
<div id="crayon-52ae90ef9eec4396114235-20">
        <div class=”clear”></div></div>
<div id="crayon-52ae90ef9eec4396114235-21">
</div>
<div id="crayon-52ae90ef9eec4396114235-22">
    </div><!– end contact-container –></div>
<div id="crayon-52ae90ef9eec4396114235-23">
</div>
<div id="crayon-52ae90ef9eec4396114235-24">
</div>
<div id="crayon-52ae90ef9eec4396114235-25">
<?php get_footer() ?></div>
</td></tr>
</tbody></table>
</div>
</div>
<div style="background-color: white; color: #666666; font-family: 'Droid Sans'; font-size: 12px; line-height: 22px; margin-bottom: 18px; text-align: justify;">
The template should now available in template dropdown list, so now, lets add a Page in wordpress dashboard and under Page Attribute box select the Page Template we’ve created a while ago.</div>
<h3 style="background-color: white; color: #333333; font-family: 'Droid Sans'; font-size: 16px; font-weight: 200; letter-spacing: -0.1px; line-height: 20px; margin-top: 0px; padding: 0px; text-align: justify;">
Step 2: Build the form</h3>
<div style="background-color: white; color: #666666; font-family: 'Droid Sans'; font-size: 12px; line-height: 22px; margin-bottom: 18px; text-align: justify;">
Building a form or Custom Page template form in <a href="http://websiteat100.com/blog/category/wordpress/" style="-webkit-transition: background-color 0.2s ease 0s, border 0.2s ease 0s, color 0.2s ease 0s, opacity 0.2s ease-in-out 0s; color: black; line-height: inherit; text-decoration: none; transition: background-color 0.2s ease 0s, border 0.2s ease 0s, color 0.2s ease 0s, opacity 0.2s ease-in-out 0s;" title="Wordpress blog by websiteat100.com">wordpress </a>is just like building in normal <a href="http://websiteat100.com/blog/category/html5-and-css3/" style="-webkit-transition: background-color 0.2s ease 0s, border 0.2s ease 0s, color 0.2s ease 0s, opacity 0.2s ease-in-out 0s; color: black; line-height: inherit; text-decoration: none; transition: background-color 0.2s ease 0s, border 0.2s ease 0s, color 0.2s ease 0s, opacity 0.2s ease-in-out 0s;" title="Html blog by websiteat100.com">HTML </a>form, so you don’t need to worry about.</div>
<div data-settings=" minimize scroll-mouseover" id="crayon-52ae90ef9eeca706185387" style="background-color: white; color: #666666; font-family: 'Droid Sans'; font-size: 12px; line-height: 22px; text-align: justify;">
<div data-settings=" show">
XHTML</div>
<div>
</div>
<div>
<table style="border-collapse: collapse; border-spacing: 0px;"><tbody>
<tr><td data-settings="show" style="border: none; color: #333333; font-size: 12px; line-height: 18px; padding: 9px 10px; vertical-align: top;"><div data-line="crayon-52ae90ef9eeca706185387-1">
1</div>
<div data-line="crayon-52ae90ef9eeca706185387-2">
2</div>
<div data-line="crayon-52ae90ef9eeca706185387-3">
3</div>
<div data-line="crayon-52ae90ef9eeca706185387-4">
4</div>
<div data-line="crayon-52ae90ef9eeca706185387-5">
5</div>
<div data-line="crayon-52ae90ef9eeca706185387-6">
6</div>
<div data-line="crayon-52ae90ef9eeca706185387-7">
7</div>
<div data-line="crayon-52ae90ef9eeca706185387-8">
8</div>
<div data-line="crayon-52ae90ef9eeca706185387-9">
9</div>
<div data-line="crayon-52ae90ef9eeca706185387-10">
10</div>
<div data-line="crayon-52ae90ef9eeca706185387-11">
11</div>
<div data-line="crayon-52ae90ef9eeca706185387-12">
12</div>
<div data-line="crayon-52ae90ef9eeca706185387-13">
13</div>
<div data-line="crayon-52ae90ef9eeca706185387-14">
14</div>
<div data-line="crayon-52ae90ef9eeca706185387-15">
15</div>
<div data-line="crayon-52ae90ef9eeca706185387-16">
16</div>
<div data-line="crayon-52ae90ef9eeca706185387-17">
17</div>
<div data-line="crayon-52ae90ef9eeca706185387-18">
18</div>
<div data-line="crayon-52ae90ef9eeca706185387-19">
19</div>
<div data-line="crayon-52ae90ef9eeca706185387-20">
20</div>
</td><td style="border: none; color: #333333; font-size: 12px; line-height: 18px; padding: 9px 10px; vertical-align: top;"><div id="crayon-52ae90ef9eeca706185387-1">
<form action=”<?php the_permalink(); ?>” method=”post” id=”ryans_contact_form”></div>
<div id="crayon-52ae90ef9eeca706185387-2">
    <p></div>
<div id="crayon-52ae90ef9eeca706185387-3">
        <label for=”contact-name”>Name</label> <br/></div>
<div id="crayon-52ae90ef9eeca706185387-4">
        <input type=”text” name=”contact-name” id=”contact-name” value=”" /></div>
<div id="crayon-52ae90ef9eeca706185387-5">
    </p></div>
<div id="crayon-52ae90ef9eeca706185387-6">
    <p></div>
<div id="crayon-52ae90ef9eeca706185387-7">
        <label for=”email”>Email</label> <br/></div>
<div id="crayon-52ae90ef9eeca706185387-8">
        <input type=”text” name=”email” id=”email” value=”" /></div>
<div id="crayon-52ae90ef9eeca706185387-9">
    </p></div>
<div id="crayon-52ae90ef9eeca706185387-10">
    <p></div>
<div id="crayon-52ae90ef9eeca706185387-11">
        <label for=”subject”>Subject</label> <br/></div>
<div id="crayon-52ae90ef9eeca706185387-12">
        <input type=”text” name=”subject” id=”subject” value=”" /></div>
<div id="crayon-52ae90ef9eeca706185387-13">
    </p></div>
<div id="crayon-52ae90ef9eeca706185387-14">
    <p></div>
<div id="crayon-52ae90ef9eeca706185387-15">
        <label for=”message”>Message</label> <br/></div>
<div id="crayon-52ae90ef9eeca706185387-16">
        <textarea cols=”40″ rows=”10″ name=”message” id=”message”></textarea></div>
<div id="crayon-52ae90ef9eeca706185387-17">
    </p></div>
<div id="crayon-52ae90ef9eeca706185387-18">
    <input type=”submit” value=”Send” /></div>
<div id="crayon-52ae90ef9eeca706185387-19">
    <input type=”hidden” name=”action” value=”contact-form”></div>
<div id="crayon-52ae90ef9eeca706185387-20">
</form></div>
</td></tr>
</tbody></table>
</div>
</div>
<div style="background-color: white; color: #666666; font-family: 'Droid Sans'; font-size: 12px; line-height: 22px; margin-bottom: 18px; text-align: justify;">
The <a href="http://websiteat100.com/blog/category/html5-and-css3/" style="-webkit-transition: background-color 0.2s ease 0s, border 0.2s ease 0s, color 0.2s ease 0s, opacity 0.2s ease-in-out 0s; color: black; line-height: inherit; text-decoration: none; transition: background-color 0.2s ease 0s, border 0.2s ease 0s, color 0.2s ease 0s, opacity 0.2s ease-in-out 0s;" title="Html blog by websiteat100.com">HTML </a>code above is pretty simple and self-explanatory; I just add one hidden field to check if the form submitted is the contact form.</div>
<h3 style="background-color: white; color: #333333; font-family: 'Droid Sans'; font-size: 16px; font-weight: 200; letter-spacing: -0.1px; line-height: 20px; margin-top: 0px; padding: 0px; text-align: justify;">
Step 3: Adding PHP code</h3>
<div style="background-color: white; color: #666666; font-family: 'Droid Sans'; font-size: 12px; line-height: 22px; margin-bottom: 18px; text-align: justify;">
Okay now lets add <a href="http://websiteat100.com/blog/category/php/" style="-webkit-transition: background-color 0.2s ease 0s, border 0.2s ease 0s, color 0.2s ease 0s, opacity 0.2s ease-in-out 0s; color: black; line-height: inherit; text-decoration: none; transition: background-color 0.2s ease 0s, border 0.2s ease 0s, color 0.2s ease 0s, opacity 0.2s ease-in-out 0s;" title="Php blog by websiteat100.com">PHP </a>code to validate and verify the data being submitted in the form, we need to add these <a href="http://websiteat100.com/blog/category/php/" style="-webkit-transition: background-color 0.2s ease 0s, border 0.2s ease 0s, color 0.2s ease 0s, opacity 0.2s ease-in-out 0s; color: black; line-height: inherit; text-decoration: none; transition: background-color 0.2s ease 0s, border 0.2s ease 0s, color 0.2s ease 0s, opacity 0.2s ease-in-out 0s;" title="Php blog by websiteat100.com">PHP</a>code above the <a href="http://websiteat100.com/blog/category/html5-and-css3/" style="-webkit-transition: background-color 0.2s ease 0s, border 0.2s ease 0s, color 0.2s ease 0s, opacity 0.2s ease-in-out 0s; color: black; line-height: inherit; text-decoration: none; transition: background-color 0.2s ease 0s, border 0.2s ease 0s, color 0.2s ease 0s, opacity 0.2s ease-in-out 0s;" title="Html blog by websiteat100.com">HTML </a>code in order the form to work.</div>
<div style="background-color: white; color: #666666; font-family: 'Droid Sans'; font-size: 12px; line-height: 22px; margin-bottom: 18px; text-align: justify;">
If the fields are correctly field up then we will send email message to the site admin, otherwise it thrown an error message to the user.</div>
<div data-settings=" minimize scroll-mouseover" id="crayon-52ae90ef9eed0894352470" style="background-color: white; color: #666666; font-family: 'Droid Sans'; font-size: 12px; line-height: 22px; text-align: justify;">
<div data-settings=" show">
PHP</div>
<div>
</div>
<div>
<table style="border-collapse: collapse; border-spacing: 0px;"><tbody>
<tr><td data-settings="show" style="border: none; color: #333333; font-size: 12px; line-height: 18px; padding: 9px 10px; vertical-align: top;"><div data-line="crayon-52ae90ef9eed0894352470-1">
1</div>
<div data-line="crayon-52ae90ef9eed0894352470-2">
2</div>
<div data-line="crayon-52ae90ef9eed0894352470-3">
3</div>
<div data-line="crayon-52ae90ef9eed0894352470-4">
4</div>
<div data-line="crayon-52ae90ef9eed0894352470-5">
5</div>
<div data-line="crayon-52ae90ef9eed0894352470-6">
6</div>
<div data-line="crayon-52ae90ef9eed0894352470-7">
7</div>
<div data-line="crayon-52ae90ef9eed0894352470-8">
8</div>
<div data-line="crayon-52ae90ef9eed0894352470-9">
9</div>
<div data-line="crayon-52ae90ef9eed0894352470-10">
10</div>
<div data-line="crayon-52ae90ef9eed0894352470-11">
11</div>
<div data-line="crayon-52ae90ef9eed0894352470-12">
12</div>
<div data-line="crayon-52ae90ef9eed0894352470-13">
13</div>
<div data-line="crayon-52ae90ef9eed0894352470-14">
14</div>
<div data-line="crayon-52ae90ef9eed0894352470-15">
15</div>
<div data-line="crayon-52ae90ef9eed0894352470-16">
16</div>
<div data-line="crayon-52ae90ef9eed0894352470-17">
17</div>
<div data-line="crayon-52ae90ef9eed0894352470-18">
18</div>
<div data-line="crayon-52ae90ef9eed0894352470-19">
19</div>
<div data-line="crayon-52ae90ef9eed0894352470-20">
20</div>
<div data-line="crayon-52ae90ef9eed0894352470-21">
21</div>
<div data-line="crayon-52ae90ef9eed0894352470-22">
22</div>
<div data-line="crayon-52ae90ef9eed0894352470-23">
23</div>
<div data-line="crayon-52ae90ef9eed0894352470-24">
24</div>
<div data-line="crayon-52ae90ef9eed0894352470-25">
25</div>
<div data-line="crayon-52ae90ef9eed0894352470-26">
26</div>
<div data-line="crayon-52ae90ef9eed0894352470-27">
27</div>
<div data-line="crayon-52ae90ef9eed0894352470-28">
28</div>
<div data-line="crayon-52ae90ef9eed0894352470-29">
29</div>
</td><td style="border: none; color: #333333; font-size: 12px; line-height: 18px; padding: 9px 10px; vertical-align: top;"><div id="crayon-52ae90ef9eed0894352470-1">
<?php</div>
<div id="crayon-52ae90ef9eed0894352470-2">
    $error = ”;</div>
<div id="crayon-52ae90ef9eed0894352470-3">
    $success = ”;</div>
<div id="crayon-52ae90ef9eed0894352470-4">
</div>
<div id="crayon-52ae90ef9eed0894352470-5">
    if( isset($_POST['action']) && $_POST['action']==’contact-form’ )</div>
<div id="crayon-52ae90ef9eed0894352470-6">
    {</div>
<div id="crayon-52ae90ef9eed0894352470-7">
        $name = $_POST['contact-name'];</div>
<div id="crayon-52ae90ef9eed0894352470-8">
        $email = $_POST['email'];</div>
<div id="crayon-52ae90ef9eed0894352470-9">
        $subject = $_POST['subject'];</div>
<div id="crayon-52ae90ef9eed0894352470-10">
        $message = $_POST['message'];</div>
<div id="crayon-52ae90ef9eed0894352470-11">
</div>
<div id="crayon-52ae90ef9eed0894352470-12">
        if( $name == “” || $email == “” || $subject == “” || $message == “” ) {</div>
<div id="crayon-52ae90ef9eed0894352470-13">
            $error = ‘Fields are required.’;</div>
<div id="crayon-52ae90ef9eed0894352470-14">
        } else if( !filter_var($email, FILTER_VALIDATE_EMAIL) ) {</div>
<div id="crayon-52ae90ef9eed0894352470-15">
            $error = ‘Invalid email address.’;</div>
<div id="crayon-52ae90ef9eed0894352470-16">
        } else {</div>
<div id="crayon-52ae90ef9eed0894352470-17">
</div>
<div id="crayon-52ae90ef9eed0894352470-18">
            /* get admin email from database */</div>
<div id="crayon-52ae90ef9eed0894352470-19">
            $to = get_option(‘admin_email’);</div>
<div id="crayon-52ae90ef9eed0894352470-20">
            $headers = ‘From: “‘. $name .’” <’ . $email . ‘>’;</div>
<div id="crayon-52ae90ef9eed0894352470-21">
</div>
<div id="crayon-52ae90ef9eed0894352470-22">
            $mail = wp_mail( $to, $subject, $message, $headers);</div>
<div id="crayon-52ae90ef9eed0894352470-23">
            if( $mail ) {</div>
<div id="crayon-52ae90ef9eed0894352470-24">
                $success = ‘Message successfully sent.’;</div>
<div id="crayon-52ae90ef9eed0894352470-25">
            }</div>
<div id="crayon-52ae90ef9eed0894352470-26">
        }</div>
<div id="crayon-52ae90ef9eed0894352470-27">
</div>
<div id="crayon-52ae90ef9eed0894352470-28">
    }</div>
<div id="crayon-52ae90ef9eed0894352470-29">
?></div>
</td></tr>
</tbody></table>
</div>
</div>
<div style="background-color: white; color: #666666; font-family: 'Droid Sans'; font-size: 12px; line-height: 22px; margin-bottom: 18px; text-align: justify;">
That’s it; the form should now validate then inputted or empty data.</div>
<div style="background-color: white; color: #666666; font-family: 'Droid Sans'; font-size: 12px; line-height: 22px; margin-bottom: 18px; text-align: justify;">
Below is the complete and running Contact form page template, you can copy and paste to test it yourself <img alt=";)" src="http://www.sutanaryan.com/wp-includes/images/smilies/icon_wink.gif" style="border: 0px; height: auto; margin: 0px; max-width: 100%; vertical-align: middle;" title="" /></div>
<div data-settings=" minimize scroll-mouseover" id="crayon-52ae90ef9eed6936730416" style="background-color: white; color: #666666; font-family: 'Droid Sans'; font-size: 12px; line-height: 22px; text-align: justify;">
<div data-settings=" show">
XHTML</div>
<div>
</div>
<div>
<table style="border-collapse: collapse; border-spacing: 0px;"><tbody>
<tr><td data-settings="show" style="border: none; color: #333333; font-size: 12px; line-height: 18px; padding: 9px 10px; vertical-align: top;"><div data-line="crayon-52ae90ef9eed6936730416-1">
1</div>
<div data-line="crayon-52ae90ef9eed6936730416-2">
2</div>
<div data-line="crayon-52ae90ef9eed6936730416-3">
3</div>
<div data-line="crayon-52ae90ef9eed6936730416-4">
4</div>
<div data-line="crayon-52ae90ef9eed6936730416-5">
5</div>
<div data-line="crayon-52ae90ef9eed6936730416-6">
6</div>
<div data-line="crayon-52ae90ef9eed6936730416-7">
7</div>
<div data-line="crayon-52ae90ef9eed6936730416-8">
8</div>
<div data-line="crayon-52ae90ef9eed6936730416-9">
9</div>
<div data-line="crayon-52ae90ef9eed6936730416-10">
10</div>
<div data-line="crayon-52ae90ef9eed6936730416-11">
11</div>
<div data-line="crayon-52ae90ef9eed6936730416-12">
12</div>
<div data-line="crayon-52ae90ef9eed6936730416-13">
13</div>
<div data-line="crayon-52ae90ef9eed6936730416-14">
14</div>
<div data-line="crayon-52ae90ef9eed6936730416-15">
15</div>
<div data-line="crayon-52ae90ef9eed6936730416-16">
16</div>
<div data-line="crayon-52ae90ef9eed6936730416-17">
17</div>
<div data-line="crayon-52ae90ef9eed6936730416-18">
18</div>
<div data-line="crayon-52ae90ef9eed6936730416-19">
19</div>
<div data-line="crayon-52ae90ef9eed6936730416-20">
20</div>
<div data-line="crayon-52ae90ef9eed6936730416-21">
21</div>
<div data-line="crayon-52ae90ef9eed6936730416-22">
22</div>
<div data-line="crayon-52ae90ef9eed6936730416-23">
23</div>
<div data-line="crayon-52ae90ef9eed6936730416-24">
24</div>
<div data-line="crayon-52ae90ef9eed6936730416-25">
25</div>
<div data-line="crayon-52ae90ef9eed6936730416-26">
26</div>
<div data-line="crayon-52ae90ef9eed6936730416-27">
27</div>
<div data-line="crayon-52ae90ef9eed6936730416-28">
28</div>
<div data-line="crayon-52ae90ef9eed6936730416-29">
29</div>
<div data-line="crayon-52ae90ef9eed6936730416-30">
30</div>
<div data-line="crayon-52ae90ef9eed6936730416-31">
31</div>
<div data-line="crayon-52ae90ef9eed6936730416-32">
32</div>
<div data-line="crayon-52ae90ef9eed6936730416-33">
33</div>
<div data-line="crayon-52ae90ef9eed6936730416-34">
34</div>
<div data-line="crayon-52ae90ef9eed6936730416-35">
35</div>
<div data-line="crayon-52ae90ef9eed6936730416-36">
36</div>
<div data-line="crayon-52ae90ef9eed6936730416-37">
37</div>
<div data-line="crayon-52ae90ef9eed6936730416-38">
38</div>
<div data-line="crayon-52ae90ef9eed6936730416-39">
39</div>
<div data-line="crayon-52ae90ef9eed6936730416-40">
40</div>
<div data-line="crayon-52ae90ef9eed6936730416-41">
41</div>
<div data-line="crayon-52ae90ef9eed6936730416-42">
42</div>
<div data-line="crayon-52ae90ef9eed6936730416-43">
43</div>
<div data-line="crayon-52ae90ef9eed6936730416-44">
44</div>
<div data-line="crayon-52ae90ef9eed6936730416-45">
45</div>
<div data-line="crayon-52ae90ef9eed6936730416-46">
46</div>
<div data-line="crayon-52ae90ef9eed6936730416-47">
47</div>
<div data-line="crayon-52ae90ef9eed6936730416-48">
48</div>
<div data-line="crayon-52ae90ef9eed6936730416-49">
49</div>
<div data-line="crayon-52ae90ef9eed6936730416-50">
50</div>
<div data-line="crayon-52ae90ef9eed6936730416-51">
51</div>
<div data-line="crayon-52ae90ef9eed6936730416-52">
52</div>
<div data-line="crayon-52ae90ef9eed6936730416-53">
53</div>
<div data-line="crayon-52ae90ef9eed6936730416-54">
54</div>
<div data-line="crayon-52ae90ef9eed6936730416-55">
55</div>
<div data-line="crayon-52ae90ef9eed6936730416-56">
56</div>
<div data-line="crayon-52ae90ef9eed6936730416-57">
57</div>
<div data-line="crayon-52ae90ef9eed6936730416-58">
58</div>
<div data-line="crayon-52ae90ef9eed6936730416-59">
59</div>
<div data-line="crayon-52ae90ef9eed6936730416-60">
60</div>
<div data-line="crayon-52ae90ef9eed6936730416-61">
61</div>
<div data-line="crayon-52ae90ef9eed6936730416-62">
62</div>
<div data-line="crayon-52ae90ef9eed6936730416-63">
63</div>
<div data-line="crayon-52ae90ef9eed6936730416-64">
64</div>
<div data-line="crayon-52ae90ef9eed6936730416-65">
65</div>
<div data-line="crayon-52ae90ef9eed6936730416-66">
66</div>
<div data-line="crayon-52ae90ef9eed6936730416-67">
67</div>
<div data-line="crayon-52ae90ef9eed6936730416-68">
68</div>
<div data-line="crayon-52ae90ef9eed6936730416-69">
69</div>
<div data-line="crayon-52ae90ef9eed6936730416-70">
70</div>
<div data-line="crayon-52ae90ef9eed6936730416-71">
71</div>
<div data-line="crayon-52ae90ef9eed6936730416-72">
72</div>
<div data-line="crayon-52ae90ef9eed6936730416-73">
73</div>
<div data-line="crayon-52ae90ef9eed6936730416-74">
74</div>
<div data-line="crayon-52ae90ef9eed6936730416-75">
75</div>
<div data-line="crayon-52ae90ef9eed6936730416-76">
76</div>
<div data-line="crayon-52ae90ef9eed6936730416-77">
77</div>
<div data-line="crayon-52ae90ef9eed6936730416-78">
78</div>
<div data-line="crayon-52ae90ef9eed6936730416-79">
79</div>
<div data-line="crayon-52ae90ef9eed6936730416-80">
80</div>
<div data-line="crayon-52ae90ef9eed6936730416-81">
81</div>
</td><td style="border: none; color: #333333; font-size: 12px; line-height: 18px; padding: 9px 10px; vertical-align: top;"><div id="crayon-52ae90ef9eed6936730416-1">
<?php</div>
<div id="crayon-52ae90ef9eed6936730416-2">
/**</div>
<div id="crayon-52ae90ef9eed6936730416-3">
* Template Name: Contact Page</div>
<div id="crayon-52ae90ef9eed6936730416-4">
*</div>
<div id="crayon-52ae90ef9eed6936730416-5">
*/</div>
<div id="crayon-52ae90ef9eed6936730416-6">
?></div>
<div id="crayon-52ae90ef9eed6936730416-7">
</div>
<div id="crayon-52ae90ef9eed6936730416-8">
<?php the_post(); ?></div>
<div id="crayon-52ae90ef9eed6936730416-9">
</div>
<div id="crayon-52ae90ef9eed6936730416-10">
    <?php</div>
<div id="crayon-52ae90ef9eed6936730416-11">
        $error = ”;</div>
<div id="crayon-52ae90ef9eed6936730416-12">
        $success = ”;</div>
<div id="crayon-52ae90ef9eed6936730416-13">
</div>
<div id="crayon-52ae90ef9eed6936730416-14">
        if( isset($_POST['action']) && $_POST['action']==’contact-form’ )</div>
<div id="crayon-52ae90ef9eed6936730416-15">
        {</div>
<div id="crayon-52ae90ef9eed6936730416-16">
            $name = $_POST['contact-name'];</div>
<div id="crayon-52ae90ef9eed6936730416-17">
            $email = $_POST['email'];</div>
<div id="crayon-52ae90ef9eed6936730416-18">
            $subject = $_POST['subject'];</div>
<div id="crayon-52ae90ef9eed6936730416-19">
            $message = $_POST['message'];</div>
<div id="crayon-52ae90ef9eed6936730416-20">
</div>
<div id="crayon-52ae90ef9eed6936730416-21">
            if( $name == “” || $email == “” || $subject == “” || $message == “” ) {</div>
<div id="crayon-52ae90ef9eed6936730416-22">
                $error = ‘Fields are required.’;</div>
<div id="crayon-52ae90ef9eed6936730416-23">
            } else if( !filter_var($email, FILTER_VALIDATE_EMAIL) ) {</div>
<div id="crayon-52ae90ef9eed6936730416-24">
                $error = ‘Invalid email address.’;</div>
<div id="crayon-52ae90ef9eed6936730416-25">
            } else {</div>
<div id="crayon-52ae90ef9eed6936730416-26">
</div>
<div id="crayon-52ae90ef9eed6936730416-27">
                /* get admin email from database */</div>
<div id="crayon-52ae90ef9eed6936730416-28">
                $to = get_option(‘admin_email’);</div>
<div id="crayon-52ae90ef9eed6936730416-29">
                $headers = ‘From: “‘. $name .’” <’ . $email . ‘>’;</div>
<div id="crayon-52ae90ef9eed6936730416-30">
</div>
<div id="crayon-52ae90ef9eed6936730416-31">
                $mail = wp_mail( $to, $subject, $message, $headers);</div>
<div id="crayon-52ae90ef9eed6936730416-32">
                if( $mail ) {</div>
<div id="crayon-52ae90ef9eed6936730416-33">
                    $success = ‘Message successfully sent.’;</div>
<div id="crayon-52ae90ef9eed6936730416-34">
                }</div>
<div id="crayon-52ae90ef9eed6936730416-35">
            }</div>
<div id="crayon-52ae90ef9eed6936730416-36">
</div>
<div id="crayon-52ae90ef9eed6936730416-37">
        }</div>
<div id="crayon-52ae90ef9eed6936730416-38">
    ?></div>
<div id="crayon-52ae90ef9eed6936730416-39">
</div>
<div id="crayon-52ae90ef9eed6936730416-40">
    <?php get_header(); ?></div>
<div id="crayon-52ae90ef9eed6936730416-41">
    <div class=”contact-container”></div>
<div id="crayon-52ae90ef9eed6936730416-42">
        <div class=”content-wrapper”></div>
<div id="crayon-52ae90ef9eed6936730416-43">
            <div class=”post-<?php the_ID() ?>” class=”post”></div>
<div id="crayon-52ae90ef9eed6936730416-44">
                <div class=”entry-content”></div>
<div id="crayon-52ae90ef9eed6936730416-45">
                    <h2><?php the_title(); ?></h2></div>
<div id="crayon-52ae90ef9eed6936730416-46">
                    <?php the_content(); ?></div>
<div id="crayon-52ae90ef9eed6936730416-47">
</div>
<div id="crayon-52ae90ef9eed6936730416-48">
                    <div class=”message-box”></div>
<div id="crayon-52ae90ef9eed6936730416-49">
                        <div class=”error-box”><?php if( $error != “” ) { echo ‘<p>’.$error.’</p>’; } ?></div></div>
<div id="crayon-52ae90ef9eed6936730416-50">
                        <div class=”success-box”><?php if( $success != “” ) { echo ‘<p>’.$success.’</p>’; } ?></div></div>
<div id="crayon-52ae90ef9eed6936730416-51">
                    </div></div>
<div id="crayon-52ae90ef9eed6936730416-52">
</div>
<div id="crayon-52ae90ef9eed6936730416-53">
                    <form action=”<?php the_permalink(); ?>” method=”post” id=”ryans_contact_form”></div>
<div id="crayon-52ae90ef9eed6936730416-54">
                        <p></div>
<div id="crayon-52ae90ef9eed6936730416-55">
                            <label for=”contact-name”>Name</label> <br/></div>
<div id="crayon-52ae90ef9eed6936730416-56">
                            <input type=”text” name=”contact-name” id=”contact-name” value=”<?php echo (isset( $_POST['contact-name'] ) ? $_POST['contact-name'] : ”) ?>” /></div>
<div id="crayon-52ae90ef9eed6936730416-57">
                        </p></div>
<div id="crayon-52ae90ef9eed6936730416-58">
                        <p></div>
<div id="crayon-52ae90ef9eed6936730416-59">
                            <label for=”email”>Email</label> <br/></div>
<div id="crayon-52ae90ef9eed6936730416-60">
                            <input type=”text” name=”email” id=”email” value=”<?php echo (isset( $_POST['email'] ) ? $_POST['email'] : ”) ?>” /></div>
<div id="crayon-52ae90ef9eed6936730416-61">
                        </p></div>
<div id="crayon-52ae90ef9eed6936730416-62">
                        <p></div>
<div id="crayon-52ae90ef9eed6936730416-63">
                            <label for=”subject”>Subject</label> <br/></div>
<div id="crayon-52ae90ef9eed6936730416-64">
                            <input type=”text” name=”subject” id=”subject” value=”<?php echo (isset( $_POST['subject'] ) ? $_POST['subject'] : ”) ?>” /></div>
<div id="crayon-52ae90ef9eed6936730416-65">
                        </p></div>
<div id="crayon-52ae90ef9eed6936730416-66">
                        <p></div>
<div id="crayon-52ae90ef9eed6936730416-67">
                            <label for=”message”>Message</label> <br/></div>
<div id="crayon-52ae90ef9eed6936730416-68">
                            <textarea cols=”46″ rows=”8″ name=”message” id=”message”><?php echo (isset( $_POST['message'] ) ? $_POST['message'] : ”) ?></textarea></div>
<div id="crayon-52ae90ef9eed6936730416-69">
                        </p></div>
<div id="crayon-52ae90ef9eed6936730416-70">
                        <input type=”submit” value=”Send” /></div>
<div id="crayon-52ae90ef9eed6936730416-71">
                        <input type=”hidden” name=”action” value=”contact-form”></div>
<div id="crayon-52ae90ef9eed6936730416-72">
                    </form></div>
<div id="crayon-52ae90ef9eed6936730416-73">
                </div><!– end entry-content –></div>
<div id="crayon-52ae90ef9eed6936730416-74">
            </div><!– end post–></div>
<div id="crayon-52ae90ef9eed6936730416-75">
        </div><!– end content –></div>
<div id="crayon-52ae90ef9eed6936730416-76">
</div>
<div id="crayon-52ae90ef9eed6936730416-77">
        <?php get_sidebar() ?></div>
<div id="crayon-52ae90ef9eed6936730416-78">
        <div class=”clear”></div></div>
<div id="crayon-52ae90ef9eed6936730416-79">
    </div><!– end container –></div>
<div id="crayon-52ae90ef9eed6936730416-80">
</div>
<div id="crayon-52ae90ef9eed6936730416-81">
<?php get_footer() ?></div>
</td></tr>
</tbody></table>
</div>
</div>
<div style="background-color: white; color: #666666; font-family: 'Droid Sans'; font-size: 12px; line-height: 22px; margin-bottom: 18px; text-align: justify;">
That’s it you now have a complete and running built-in contact form page added in your <a href="http://websiteat100.com/blog/category/wordpress/" style="-webkit-transition: background-color 0.2s ease 0s, border 0.2s ease 0s, color 0.2s ease 0s, opacity 0.2s ease-in-out 0s; color: black; line-height: inherit; text-decoration: none; transition: background-color 0.2s ease 0s, border 0.2s ease 0s, color 0.2s ease 0s, opacity 0.2s ease-in-out 0s;" title="Wordpress blog by websiteat100.com">wordpress </a>theme.</div>
</div>

HOW TO CREATE A CONTACT PAGE TEMPLATE FOR YOUR WORDPRESS THEME

There are lots of wordpress plugin in wordpress plugin directory to add a contact form in your wordpress blog; less plugin added in yo...

HOW TO CREATE A CONTACT PAGE TEMPLATE FOR YOUR WORDPRESS THEME

AUTO LOGIN USER AFTER REGISTRATION IN GRAVITY FORM WITH USER REGISTRATION ADD-ON