HOW TO CREATE A CONTACT PAGE TEMPLATE FOR YOUR WORDPRESS THEME

<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...

Read more »