Uncategorized

How to make contact us form page for wordpress default theme


How to make contact us form page for wordpress default theme .

We know that word press is popular open source blog.it has thousands of plugins to enhance it’s features.we can extend it to complicated CMS.here we learn how to make a simple contact form,that needs a every web site.please refere my previous article “how to make a custom page template” before moving . word press comes with two default thems classic,default. here we customize the default theme.

go to wp-content/themes/default directory and make a php file name contact_form.php.

open contact_form.php and single.php in the default template directory with your favorite editor.

copy the every code in single.php to contact_form.php.

delete every thing in the between <div id=”content”> and </div>.

replace that with our generel contact form.

then click add new link in main page side navigation.make title as contact form .

then select a contact_form template attribute of the page on right .

publish this page you have done.

you can download the template file and test yourself.

Template Code

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
<?php
/*
Template Name: contact_form
*/
?>
<?php get_header(); ?>

<div id="content"> 
<!-- replaced contact start here -->
<span><a href="<?php echo get_option('home'); ?>/">Home</a> </span>
  <h2>Contact Us</h2>
  <?php 
if(isset($_POST['Submit'])){ //check if user submitted the contact form
$error="";
	if($_POST['contact_name']=='')$error.="Name required.<br/>";
	if($_POST['contact_email']=='')$error.="Email required.<br/>";
	if($_POST['contact_phone']=='')$error.="Phone  required.<br/>";
	if($_POST['contact_comment']=='')$error.="Comment required.<br/>";
if($error!=""){
	//if any errors skip mailing and display the errors for users.
	echo "<span style='color:red'>$error</span>";
}else{
	// get admin email from wordpress default options
	$to=get_option('admin_email');
	$subject="One contact enquire at noblefligh re: ".$_POST['contact_reason'];
	$body="\r\n Hi Admin";
	$body.="\r\n You had an enquiry:";
	$body.="\r\n Regarding:\t".$_POST['contact_reason'];
	$body.="\r\n Name: \t".$_POST['contact_name'];
	$body.="\r\n Email: \t".$_POST['contact_email'];
	$body.="\r\n Phone:\t".$_POST['contact_phone'];
	$body.="\r\n Comment: \r\n ".$_POST['contact_comment'];
	// wordpress default handy mail function
	wp_mail( $to, $subject, $body);
	echo "<span style='color:green;'>your comment sent to admin successfully</span>";
	// display success message.
}

}
	?>
  <form id="contact_form" name="contact_form" method="post" action="<?php echo the_permalink(); ?>">
    <table border="0">
      <tr>
        <td>About </td>
        <td><select name="contact_reason" id="contact_reason" style="width:145px;">
            <option value="Product">Product</option>
            <option value="Service">Service</option>
            <option value="Other">Other</option>
          </select>
        </td>
      </tr>
      <tr>
        <td>Name</td>
        <td><input name="contact_name" type="text" id="contact_name" style="width:145px" /></td>
      </tr>
      <tr>
        <td>Email</td>
        <td><input name="contact_email" type="text" id="contact_email" style="width:145px" /></td>
      </tr>
      <tr>
        <td>Phone</td>
        <td><input name="contact_phone" type="text" id="contact_phone" style="width:145px" /></td>
      </tr>
      <tr>
        <td>Comment</td>
        <td><textarea name="contact_comment" id="contact_comment" style="width:300px"></textarea></td>
      </tr>
      <tr>
        <td colspan="2" align="center"><input type="submit" name="Submit" value="Submit" />
          <input type="reset" name="Submit2" value="Reset" /></td>
      </tr>
    </table>
  </form>
<!-- replaced content end here -->
</div>
<?php get_sidebar(); ?>
<?php get_footer(); ?>

 

 

Preview

wordpress-contactform

Advertisements

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s