Adding Custom Contact Form to WordPress

First of everything I am very sorry that I didn't update the website for a long time. I was really busy with my academic researches. Now  I am more free and try to update the website more regularly.

Today post is regarding adding a custom contact form to wordpress blog script. Sooner one of my customers ask me that we need a website on core of wordpress and moreover we need a custom form which should email the details of the form, when the submit button pressed.

For adding a custom form which be able to email the form data to a specific recipient (webmaster), we have to do the following steps:

1. First I suggest to do this experiment in your local host, after a successful result you can apply it to your host. 
2. Go to your current template path. In my case it is : "\wp-content\themes\twentythirteen".
3. Make a new PHP file and rename it to "custom-form.php".
4. Create a folder and rename it to "form-files".
5. Add the following code inside the  "custom-form.php" file. You can remove the red lines.
   Red lines are for including any external JavaScript or CSS file. In case you want to use JQuery for field validation you might need to include the JQuery library into the form file. (You have to locate the JS or CSS file in the "forms-files" directory and use "<?php echo get_stylesheet_directory_uri(); ?>/form_files/" for path to the file.
   The orange lines are optional section for adding your custom inline Javascript.
   The destination of the form is process.php file. This file is located in the same folder as the custom-form.php



<?php get_header(); ?> <div id="main"> <div id="content"> <?php if (have_posts()) : while (have_posts()) : the_post(); ?> <p><?php the_content(__('(more...)')); ?></p><?php endwhile; else: ?> <p><?php _e('Sorry, no posts matched your criteria.'); ?></p><?php endif; ?>          <link rel="stylesheet" href="<?php echo get_stylesheet_directory_uri(); ?>/form_files/style.css" />           <script src="<?php echo get_stylesheet_directory_uri(); ?>/form_files/jquery.min.js"></script>           <script src="<?php echo get_stylesheet_directory_uri(); ?>/form_files/jquery-ui.js"></script>         <script type="text/javascript" src="http://www.google.com/recaptcha/api/js/recaptcha_ajax.js"></script>         <script>           /// custom JAVASCRIPT goes here         </script>          <form id="myformx" name="myformx" method="post" action="<?php echo get_stylesheet_directory_uri(); ?>/process.php">           <div id="accordion">           <h3>Contact Us</h3>           <div>             <table width="742" class="form_label">               <tr>                 <td width="242">Name<span class="red"></span></td>                 <td width="484"><p>                   <input name="name" type="text" id="name" size="70" />                   <br />                 </p></td>               </tr>               <tr>                 <td>Email<span class="red"></span></td>                 <td><p>                   <input name="email" type="text" id="email" size="30"/></p></td>               </tr>               <tr>                 <td>Comment<span class="red"></span></td>                 <td><textarea name="comment" cols="30" id="comment"></textarea></td>               </tr>             </table>             <br />               <input name="buttonx" type="submit" class="button" id="buttonx" value="Submit" />           </div>         </div>         </form> </div> </div> <div id="delimiter"> </div> <?php get_footer(); ?>



6. Make a new PHP file and rename it to "process.php" (It should be in the same directory as custom-form.php) .
This file is responsible for sending the form data to your recipient email address. You can also implement AJAX for this process, but since I don't want to make it more complex I just chose the plain send.
The [email protected]  address is the destination address.
The [email protected]  address which will appear in the email inbox as the from address. (In the destination inbox this email will appear as the sender of the mail)
The  New Message from [email protected] is the title of email.

<?php //////////////////////////////////////////////////////Prepare mail body $name=$_POST["name"]; $email=$_POST["email"]; $comment=$_POST["comment"]; $body=" <table width=\"784\" border=\"1\">  <tr> <td width=\"313\"><strong>A Comment from the website custom form.</strong></td> <td width=\"455\">&nbsp;</td>  </tr>  <tr> <td>Name</td> <td>$name</td>  </tr>  <tr> <td>Email</td> <td>$email</td>  </tr>  <tr> <td>Commment</td> <td>$comment</td>  </tr> </table>"; //////////////////////////////////////////////////////Prepare mail body //////////////////////////////////////////////////////Sending email $toemail = '[email protected]'; $message ='<html><body>'; $message .=$body; $message .='</body></html>'; $from='[email protected]'; $headers  = "From: $from\r\n"; $headers .= "Content-type: text/html\r\n"; if(mail($toemail, 'New Message from [email protected]', $message, $headers)) { echo 'Thank you. Your message has been submitted.'; } else { echo 'There was a problem sending your email.'; } //////////////////////////////////////////////////////Sending email //echo('success'); ?>



7. Now go to management section of your website, and proceed to the "Page" section from the menu.
8. In the page section add a new page, and add a new page. Choose a title for your page.
9. Under the title section of the page there is a section named "Permanent Link". In front of this section you can see the permanent address for the current page. For example "http://localhost/mysite/?page_id=132".  Now you need to change the "custom-form.php" file name to "page-132.php".
   Another example is that if the premanent link of the page was "http://localhost/dun/?page_id=90" you need to change the "custom-form.php" file name to "page-90.php". 
10. Now you can access to the custom form by calling this path "http://localhost/mysite/?page_id=132". And you can locate this link anywhere in your website. Please remember if you add any content in the post body for this page, then it will appear on top of your form!