Add a contact form in wordpress without using a plugin

tutorials

I previously posted an article about how to ‘Get Admin Email address’.
Now I am gonna tell how to add a complete contact form in wordpress without using a plugin.
You may want to see the final work, just click here->

The codes I am using are as following:
[php]
<?php
/**
* Template Name: Contact Form
*
* The contact form page template displays the a
* simple contact form in your website’s content area.
*
*/

get_header();

$nameError = ”;
$emailError = ”;
$commentError = ”;
$mathCheck = ”;

//If the form is submitted
if( isset( $_POST[‘submitted’] ) ) {

//Check to see if the honeypot captcha field was filled in
if( trim( $_POST[‘checking’] ) !== ” ) {
$captchaError = true;
} else {

// Check math field
if( $_POST[‘mathCheck’] != 9 && strcasecmp( $_POST[‘mathCheck’], ‘nine’ ) != 0 ) {
$mathCheck = __( ‘You got the maths wrong.’, ‘ultra’ );
$hasError = true;
} else {
$math = trim( $_POST[‘mathCheck’] );
}

//Check to make sure that the name field is not empty
if( trim( $_POST[‘contactName’] ) === ” ) {
$nameError = __( ‘You forgot to enter your name.’, ‘ultra’ );
$hasError = true;
} else {
$name = strip_tags( trim( $_POST[‘contactName’] ) );
}

//Check to make sure sure that a valid email address is submitted
if( trim( $_POST[’email’] ) === ” ) {
$emailError = __( ‘You forgot to enter your email address.’, ‘ultra’ );
$hasError = true;
} else if ( ! eregi( "^[A-Z0-9._%-]+@[A-Z0-9._%-]+.[A-Z]{2,4}$", trim($_POST[’email’] ) ) ) {
$emailError = __( ‘You entered an invalid email address.’, ‘ultra’ );
$hasError = true;
} else {
$email = sanitize_email( trim( $_POST[’email’] ) );
}

//Check to make sure comments were entered
if( trim( $_POST[‘comments’] ) === ” ) {
$commentError = __( ‘You forgot to enter your comments.’, ‘ultra’ );
$hasError = true;
} else {
$comments = sanitize_text_field( stripslashes( trim( $_POST[‘comments’] ) ) );
}

//If there is no error, send the email
if( ! isset( $hasError ) ) {

$emailTo = get_bloginfo(‘admin_email’);
$subject = __( ‘Contact Form Submission from ‘, ‘ultra’ ).$name;
$sendCopy = trim( $_POST[‘sendCopy’] );
$body = sprintf( __( "Name: %s nnEmail: %s nnComments: %s", ‘ultra’ ), $name, $email, $comments );
$headers = __( ‘From: ‘, ‘ultra’) . "$name <$email>" . "rn" . __( ‘Reply-To: ‘, ‘ultra’ ) . $email;

wp_mail( $emailTo, $subject, $body, $headers );

if( $sendCopy == true ) {
$subject = __( ‘You emailed ‘, ‘ultra’ ) . get_bloginfo( ‘title’ );
$headers = __( ‘From: ‘, ‘ultra’ ) . "$name <$emailTo>";
wp_mail( $email, $subject, $body, $headers );
}

$emailSent = true;

}
}
}
?>
<script type="text/javascript">
<!–//–><![CDATA[//><!–
jQuery(document).ready(function() {
jQuery( ‘form#contactForm’).submit(function() {
jQuery( ‘form#contactForm .error’).remove();
var hasError = false;
jQuery( ‘.requiredField’).each(function() {
if(jQuery(this).hasClass(‘math’)) {
if( jQuery.trim(jQuery(this).val()) != 9 && jQuery.trim(jQuery(this).val()).toLowerCase() != ‘nine’ ) {
jQuery(this).parent().append( ‘<span class="error"><?php _e( ‘You got the maths wrong’, ‘ultra’ ); ?>.</span>’ );
jQuery(this).addClass( ‘inputError’ );
hasError = true;
}
} else {
if(jQuery.trim(jQuery(this).val()) == ”) {
var labelText = jQuery(this).prev( ‘label’).text();
jQuery(this).parent().append( ‘<span class="error"><?php _e( ‘You forgot to enter your’, ‘ultra’ ); ?> ‘+labelText+’.</span>’ );
jQuery(this).addClass( ‘inputError’ );
hasError = true;
} else if(jQuery(this).hasClass( ’email’)) {
var emailReg = /^([w-.]+@([w-]+.)+[w-]{2,4})?$/;
if(!emailReg.test(jQuery.trim(jQuery(this).val()))) {
var labelText = jQuery(this).prev( ‘label’).text();
jQuery(this).parent().append( ‘<span class="error"><?php _e( ‘You entered an invalid’, ‘ultra’ ); ?> ‘+labelText+’.</span>’ );
jQuery(this).addClass( ‘inputError’ );
hasError = true;
}
}
}
});
if(!hasError) {
var formInput = jQuery(this).serialize();
jQuery.post(jQuery(this).attr( ‘action’),formInput, function(data){
jQuery( ‘form#contactForm’).slideUp( "fast", function() {
jQuery(this).before( ‘<div class="woo-sc-box tick"><p><?php _e( ‘<strong>Thanks!</strong> Your email was successfully sent.’, ‘ultra’ ); ?></p><div>’ );
});
});
}

return false;

});
});
//–>!]]>
</script>

<?php if( isset( $hasError ) || isset( $captchaError ) ) { ?>
<p class="alert"><?php _e( ‘There was an error submitting the form.’, ‘ultra’ ); ?></p>
<?php } ?>
<form action="<?php the_permalink(); ?>" id="contactForm" method="post">
<ol class="forms">
<li><label for="contactName"><?php _e( ‘Name’, ‘ultra’ ); ?></label>
<input type="text" name="contactName" id="contactName" value="<?php if( isset( $_POST[‘contactName’] ) ) { echo esc_attr( $_POST[‘contactName’] ); } ?>" class="txt requiredField" />
<?php if($nameError != ”) { ?>
<span class="error"><?php echo $nameError;?></span>
<?php } ?>
</li>
<li><label for="email"><?php _e( ‘Email’, ‘ultra’ ); ?></label>
<input type="text" name="email" id="email" value="<?php if( isset( $_POST[’email’] ) ) { echo esc_attr( $_POST[’email’] ); } ?>" class="txt requiredField email" />
<?php if($emailError != ”) { ?>
<span class="error"><?php echo $emailError;?></span>
<?php } ?>
</li>
<li class="textarea"><label for="commentsText"><?php _e( ‘Message’, ‘ultra’ ); ?></label>
<textarea name="comments" id="commentsText" rows="10" cols="30" class="requiredField"><?php if( isset( $_POST[‘comments’] ) ) { echo esc_textarea( $_POST[‘comments’] ); } ?></textarea>
<?php if( $commentError != ” ) { ?>
<span class="error"><?php echo $commentError; ?></span>
<?php } ?>
</li>
<li><label for="mathCheck"><?php _e( ‘Solve:’, ‘ultra’ ); ?> 3 + 6</label>
<input type="text" name="mathCheck" id="mathCheck" value="<?php if( isset( $_POST[‘mathCheck’] ) ) { echo esc_attr( $_POST[‘mathCheck’] ); } ?>" class="txt requiredField math" />
<?php if($mathCheck != ”) { ?>
<span class="error"><?php echo $mathCheck;?></span>
<?php } ?>
</li>
<li class="inline"><input type="checkbox" name="sendCopy" id="sendCopy" value="true"<?php if( isset( $_POST[‘sendCopy’] ) && $_POST[‘sendCopy’] == true ) { echo ‘ checked="checked"’; } ?> /><label for="sendCopy"><?php _e( ‘Send a copy of this email to yourself’, ‘ultra’ ); ?></label></li>
<li class="screenReader"><label for="checking" class="screenReader"><?php _e( ‘If you want to submit this form, do not enter anything in this field’, ‘ultra’ ); ?></label><input type="text" name="checking" id="checking" class="screenReader" value="<?php if( isset( $_POST[‘checking’] ) ) { echo esc_attr( $_POST[‘checking’] ); } ?>" /></li>
<li class="buttons"><input type="hidden" name="submitted" id="submitted" value="true" /><input class="submit button" type="submit" value="<?php esc_attr_e( ‘Submit’, ‘ultra’ ); ?>" /></li>
</ol>
</form>
</div><!– #content –>
</article><!– #post-<?php the_ID(); ?> –>
<?php endwhile; // end of the loop. ?>
<?php } ?>
</div><!– #content –>
</div><!– #primary –>
<?php get_sidebar(); ?>
<?php get_footer(); ?>
[/php]

This snippet allows users to submit a message to admin by
1 – providing a name and email,
2 – completing a simple math (3+6),
3 – choosing or not to send a copy to himself,
4 – not entering anything in ‘screenReader’ as human can not see this field except machines – line 173, you have to add some styles to let this field disappear from the screen. What i am using is
[css]
.screenReader {
left: -9999px;
position: absolute;
top: -9999px;
[/css]

Community Talk

Add a contact form in wordpress without using a plugin