 there are lots of wordpress plugins for contact forms but wouldnt it be nice to have more control over the markup in this tutorial i am going to show how to use a custom page template to create a contact form in wordpress without a plugin some people may want to skip the post and get to the demo and source files view demo download source files so why not use a plugin well i think that a contact form is so simple that a wordpress plugin that doesnt provide exactly what i want is pretty lame plus i dont need all those fancy interfaces for building the form i just need the code the plan our plan is to create a custom wordpress page template then create a page that uses that template finally we will add in a little jquery to improve the form lets write a little pseudo code to help determine how our page template will be structured pseudo code codeif form was submitted validate it if the form was submitted successfully send email s else set variables to show errors if the form was submitted successfully show thank you message else show form with errors if there are any creating the wordpress page template alright so first we are going to start with some basic stuff define the template name include the header sidebar footer and setup the basic structure of our pseudo code code php template name contact form php if the form is submitted if isset $ post submitted if there is no error send the email if isset $haserror php get header php if the email was sent show a thank you message otherwise show form if isset $emailsent $emailsent == true php else php php get sidebar php get footer the form next lets code the actual form i also want to provide the ability for the user to enter some text to go above the form so we are going to use the regular loop code php if isset $emailsent $emailsent == true div class= thanks h1thanks =$name h1 pyour email was successfully sent i will be in touch soon p div php else php if have posts php while have posts the post h1 php the title h1 php the content php if isset $haserror isset $captchaerror p class= error there was an error submitting the form p php form action= php the permalink id= contactform method= post form php endwhile php endif if the emailsent variable is set to true we display the thank you message otherwise we show the form so we are outputting the title of the page and any content that was entered then we are checking to see if there was an error finally we display the form codeol class= forms li label for= contactname name label input type= text name= contactname id= contactname value= php if isset $ post contactname echo $ post contactname class= requiredfield php if $nameerror = span class= error =$nameerror span php li li label for= email email label input type= text name= email id= email value= php if isset $ post email echo $ post email class= requiredfield email php if $emailerror = span class= error =$emailerror span php li li class= textarea label for= commentstext comments label textarea name= comments id= commentstext rows= 20 cols= 30 class= requiredfield php if isset $ post comments if function exists stripslashes echo stripslashes $ post comments else echo $ post comments textarea php if $commenterror = span class= error =$commenterror 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 send a copy of this email to yourself label li li class= screenreader label for= checking class= screenreader if you want to submit this form do not enter anything in this field label input type= text name= checking id= checking class= screenreader value= php if isset $ post checking echo $ post checking li li class= buttons input type= hidden name= submitted id= submitted value= true button type= submit email me button li ol note line wrapping added for readability ok wow that may seem like a lot so lets break down the name field to see what this code is actually doing codelilabel for= contactname name label input type= text name= contactname id= contactname value= php if isset $ post contactname echo $ post contactname class= requiredfield php if $nameerror = span class= error =$nameerror span php li we are displaying each form field in a list item displaying the label input field and then showing an error message if there is one we are also displaying the value in the form field if it was already submitted so in essence we are just doing that for each field of the form you could easily go into the code to add more fields we are also using honeypot captcha to see if a bot was trying to submit the form codeli class= screenreader label for= checking class= screenreader if you want to submit this form do not enter anything in this field label input type= text name= checking id= checking class= screenreader value= php if isset $ post checking echo $ post checking li that list item is pushed off the page with css and if there is a value in that field we can assume that it is not a human trying to submit the form code screenreader left 9999px position absolute top 9999px the validation next we are going to have a conditional statement to determine if the form was submitted or not code php if the form is submitted if isset $ post submitted within that conditional is where we are going to do all of our validation of the required fields first lets check to see if our honeypot captcha form field is filled in if it is then we will display an error and not check anymore of the form code check to see if the honeypot captcha field was filled in if trim $ post checking == $captchaerror = true else so if the captcha field was left blank we will continue to validate the required fields code check to make sure that the name field is not empty if trim $ post contactname === $nameerror = you forgot to enter your name $haserror = true else $name = 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 $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 $haserror = true else $email = trim $ post email check to make sure comments were entered if trim $ post comments === $commenterror = you forgot to enter your comments $haserror = true else if function exists stripslashes $comments = stripslashes trim $ post comments else $comments = trim $ post comments again that may seem like a little much so lets just take a look at the validation on the name field codeif trim $ post contactname === $nameerror = you forgot to enter your name $haserror = true else $name = trim $ post contactname if the name field if empty set a variable that will display the name error and set a flag saying that there was an error on the form otherwise set a variable that will contain the name value from the form sending the email now we want to send the email if there are no errors code if there is no error send the email if isset $haserror $emailto = strongme somedomain com strong $subject = contact form submission from $name $sendcopy = trim $ post sendcopy $body = name $name nnemail $email nncomments $comments $headers = from my site $emailto rn reply to $email mail $emailto $subject $body $headers if $sendcopy == true $subject = you emailed strongyour name strong $headers = from strongyour name strong strongnoreply somedomain com strong mail $email $subject $body $headers $emailsent = true note items bolded are values that you will want to change before implementing i personally like to have the contact form submission come from myself that way i just setup a filter in gmail and i can guarantee that it wont get caught in my spam filter the second email is only sent if the user checks the checkbox to send a copy to themselves view entire custom page template creating the page in wordpress first you want to upload the contact form php page template to your themes folder next you will create the page in wordpress and select contact form as the page template then just publish your page and you will have your contact form well the form will be usable but we are going to add in some css and jquery to finish it off styling the form i recently wrote an article about styling forms so we are just going to stick with some basic styles code screenreader left 9999px position absolute top 9999px thanks background f2f3f6 border 1px solid 7e8aa2 padding 10px forms ol forms float left list style none margin 0 width 100% ol forms li clear both float left margin bottom 18px position relative width 100% ol forms label cursor pointer display block float left font weight bold padding right 20px width 100px ol forms input ol forms textarea border 1px solid 7e8aa2 border radius 3px font inherit moz border radius 3px padding 2px webkit border radius 3px width 214px ol forms textarea height 300px width 334px ol forms input focus ol forms textarea focus background color f2f3f6 border color ff9800 error color f00 ol forms li error font size 12px margin left 20px ol forms li textarea error display block position absolute right 0 top 0 width 100px ol forms li screenreader margin bottom 0 ol forms li buttons button background ff9800 border none color 000 cursor pointer font 16px 16px avenir lt std helvetica arial sans serif overflow hidden padding 6px 3px 3px 3px text transform uppercase width auto ol forms li buttons button hover color 222 ol forms li buttons button active left 1px position relative top 1px ol forms li buttons ol forms li inline float right width 460px ol forms li inline input width auto ol forms li inline label display inline float none width auto so drop that css in your theme stylesheet and you will see the form start to look much better enhancing the form with some jquery i have also already written about creating ajax forms with jquery but i thought i would specifically talk about an ajax script for a contact form first we want to execute our jquery when the document is ready and the form was submitted code$ document ready function $ form contactform submit function return false next we want to hide any error messages if there are any and validate any required fields which are denoted with a class of requiredfield code$ form contactform error remove var haserror = false $ requiredfield each function after that we want to validate that the field is not empty and append an error message if it is codeif jquery trim $ this val == var labeltext = $ this prev label text $ this parent append span class= error you forgot to enter your labeltext span haserror = true if the field is not empty and also has a class of email we want to validate that the email address is valid code else if $ this hasclass email var emailreg = w w w 2 4 $ if emailreg test jquery trim $ this val var labeltext = $ this prev label text $ this parent append span class= error you entered an invalid labeltext span haserror = true if there are no errors then we want to replace the submit button with a loading image codeif haserror $ form contactform li buttons button fadeout normal function $ this parent append img src= wp content themes td v3 images template loading gif alt= loading height= 31 width= 31 note you will need to update the source of the image to wherever you upload it in your theme finally lets submit the form via an ajax request slide the form up and show a thank you message codevar forminput = $ this serialize $ post $ this attr action forminput function data $ form contactform slideup fast function $ this before p class= thanks strongthanks strong your email was successfully sent i check my email all the time so i should be in touch soon p take a look at the entire script code$ document ready function $ form contactform submit function $ form contactform error remove var haserror = false $ requiredfield each function if jquery trim $ this val == var labeltext = $ this prev label text $ this parent append span class= error you forgot to enter your labeltext span haserror = true else if $ this hasclass email var emailreg = w w w 2 4 $ if emailreg test jquery trim $ this val var labeltext = $ this prev label text $ this parent append span class= error you entered an invalid labeltext span haserror = true if haserror $ form contactform li buttons button fadeout normal function $ this parent append img src= wp content themes td v3 images template loading gif alt= loading height= 31 width= 31 var forminput = $ this serialize $ post $ this attr action forminput function data $ form contactform slideup fast function $ this before p class= thanks strongthanks strong your email was successfully sent i check my email all the time so i should be in touch soon p return false just include it in the head of your document after jquery and you are good to go codescript type= text javascript src= php bloginfo template directory scripts jquery js script script type= text javascript src= php bloginfo template directory scripts contact form js script note you may need to change the source depending upon where you upload the files in your theme conclusion view demo download source files thats it just upload the files and youve got your form since youve got the code right in front of you it should be very easy to tweak and add on to enjoy centurylink deals internet phone tv bundles 