There are lots of wordpress plugin in wordpress plugin directory to add a contact form in your wordpress blog; less plugin added in your site also less of server space you’ve taken, creating a built-in page template in your wordpresssite is very useful. In this tutorial I will explain how you can create and add Contact Form in your wordpress theme.
Step 1: Create a page template
The first step is to create an empty page template, page-contact.php, now, open the empty PHP file and add these comment code right at the beginning of the file, here’s the code.
PHP
1
2
3
4
5
|
<?php
/*
Template Name: Contact Page
*/
?>
|
We need to add the code at the beginning of the file to make sure WordPress will read our file as a valid custom Page Template.
Here’s how the Contact Page template looks.
PHP
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
|
<?php
/*
Template Name: Contact Page
*/
?>
<?php the_post() ?>
<?php get_header() ?>
<div class=”contact-container”>
<div class=”content-wrapper”>
<div class=”post-<?php the_ID() ?>” class=”post”>
<div class=”entry-content”>
</div><!– end entry-content –>
</div><!– end post–>
</div><!– end content-wrapper –>
<!–display right sidebar–>
<?php get_sidebar() ?>
<div class=”clear”></div>
</div><!– end contact-container –>
<?php get_footer() ?>
|
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.
Step 2: Build the form
Building a form or Custom Page template form in wordpress is just like building in normal HTML form, so you don’t need to worry about.
XHTML
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
|
<form action=”<?php the_permalink(); ?>” method=”post” id=”ryans_contact_form”>
<p>
<label for=”contact-name”>Name</label> <br/>
<input type=”text” name=”contact-name” id=”contact-name” value=”" />
</p>
<p>
<label for=”email”>Email</label> <br/>
<input type=”text” name=”email” id=”email” value=”" />
</p>
<p>
<label for=”subject”>Subject</label> <br/>
<input type=”text” name=”subject” id=”subject” value=”" />
</p>
<p>
<label for=”message”>Message</label> <br/>
<textarea cols=”40″ rows=”10″ name=”message” id=”message”></textarea>
</p>
<input type=”submit” value=”Send” />
<input type=”hidden” name=”action” value=”contact-form”>
</form>
|
The HTML code above is pretty simple and self-explanatory; I just add one hidden field to check if the form submitted is the contact form.
Step 3: Adding PHP code
Okay now lets add PHP code to validate and verify the data being submitted in the form, we need to add these PHPcode above the HTML code in order the form to work.
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.
PHP
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
|
<?php
$error = ”;
$success = ”;
if( isset($_POST['action']) && $_POST['action']==’contact-form’ )
{
$name = $_POST['contact-name'];
$email = $_POST['email'];
$subject = $_POST['subject'];
$message = $_POST['message'];
if( $name == “” || $email == “” || $subject == “” || $message == “” ) {
$error = ‘Fields are required.’;
} else if( !filter_var($email, FILTER_VALIDATE_EMAIL) ) {
$error = ‘Invalid email address.’;
} else {
/* get admin email from database */
$to = get_option(‘admin_email’);
$headers = ‘From: “‘. $name .’” <’ . $email . ‘>’;
$mail = wp_mail( $to, $subject, $message, $headers);
if( $mail ) {
$success = ‘Message successfully sent.’;
}
}
}
?>
|
That’s it; the form should now validate then inputted or empty data.
Below is the complete and running Contact form page template, you can copy and paste to test it yourself 
XHTML
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
78
79
80
81
|
<?php
/**
* Template Name: Contact Page
*
*/
?>
<?php the_post(); ?>
<?php
$error = ”;
$success = ”;
if( isset($_POST['action']) && $_POST['action']==’contact-form’ )
{
$name = $_POST['contact-name'];
$email = $_POST['email'];
$subject = $_POST['subject'];
$message = $_POST['message'];
if( $name == “” || $email == “” || $subject == “” || $message == “” ) {
$error = ‘Fields are required.’;
} else if( !filter_var($email, FILTER_VALIDATE_EMAIL) ) {
$error = ‘Invalid email address.’;
} else {
/* get admin email from database */
$to = get_option(‘admin_email’);
$headers = ‘From: “‘. $name .’” <’ . $email . ‘>’;
$mail = wp_mail( $to, $subject, $message, $headers);
if( $mail ) {
$success = ‘Message successfully sent.’;
}
}
}
?>
<?php get_header(); ?>
<div class=”contact-container”>
<div class=”content-wrapper”>
<div class=”post-<?php the_ID() ?>” class=”post”>
<div class=”entry-content”>
<h2><?php the_title(); ?></h2>
<?php the_content(); ?>
<div class=”message-box”>
<div class=”error-box”><?php if( $error != “” ) { echo ‘<p>’.$error.’</p>’; } ?></div>
<div class=”success-box”><?php if( $success != “” ) { echo ‘<p>’.$success.’</p>’; } ?></div>
</div>
<form action=”<?php the_permalink(); ?>” method=”post” id=”ryans_contact_form”>
<p>
<label for=”contact-name”>Name</label> <br/>
<input type=”text” name=”contact-name” id=”contact-name” value=”<?php echo (isset( $_POST['contact-name'] ) ? $_POST['contact-name'] : ”) ?>” />
</p>
<p>
<label for=”email”>Email</label> <br/>
<input type=”text” name=”email” id=”email” value=”<?php echo (isset( $_POST['email'] ) ? $_POST['email'] : ”) ?>” />
</p>
<p>
<label for=”subject”>Subject</label> <br/>
<input type=”text” name=”subject” id=”subject” value=”<?php echo (isset( $_POST['subject'] ) ? $_POST['subject'] : ”) ?>” />
</p>
<p>
<label for=”message”>Message</label> <br/>
<textarea cols=”46″ rows=”8″ name=”message” id=”message”><?php echo (isset( $_POST['message'] ) ? $_POST['message'] : ”) ?></textarea>
</p>
<input type=”submit” value=”Send” />
<input type=”hidden” name=”action” value=”contact-form”>
</form>
</div><!– end entry-content –>
</div><!– end post–>
</div><!– end content –>
<?php get_sidebar() ?>
<div class=”clear”></div>
</div><!– end container –>
<?php get_footer() ?>
|
That’s it you now have a complete and running built-in contact form page added in your wordpress theme.
0 comments:
Post a Comment