Having a contact page on your blog can help you land the best deals with companies or build a connection with your readers. It’s really up to you to decide which way of contact is best for you & your brand. I personally love using both- displaying my email address on my social media as well as including contact form to my blog + website.
Adding a contact form to your blog can be done by adding a few coding tweaks and I’m here to follow you through those steps.
WordPress.org
Let’s get this out of the way as it’ss more than easy. With all of the awesome plugins, you can use for your WP blog you only have to set up your actual form by selecting what sections you need & simply use a shortcode on your page. My favourite plugin to use is Contact Form 7.
Follow these steps to set up:
Step 1: Go to your PLUGINS section, select and search for ‘ Contact Form 7 ‘.
Step 2: Download, activate & install.
Step 3: You should now be able to see CONTACT option in your WordPress sidebar:
Step 4: Go ahead and select ‘ ADD NEW ‘
Step 5: You will be taken to the page to create your contact form. You can adjust it to your needs, but the default options are pretty decent too:
Step 6: Once you added all the fields you’d like to have in the form, make sure you save it.
Step 7: Then, go ahead & copy the shortcode underneath the Form Title. You will need to have this ready to insert into your Contact Page.
Step 8: Now go to your Contact Page and select Edit. Make sure to have your editor set to HTML mode. Simply paste in the shortcode & save the page.
You should now be able to see a contact form on your page!
That was quick, I told ya!
Blogger
Now to add a contact form on Blogger might look a bit scary as you actually have to go into HTML editor of the template, so make sure to Back Up your template before you begin. You can do this by going to TEMPLATE-> BACK UP/RESTORE-> DOWNLOAD FULL TEMPLATE.
OK, now when your blog design is safe, we can get started. Do add a contact form to a page on Blogger you will have to perform the following steps:
Step 1: First of all, go to LAYOUT page & select to add NEW WIDGET, find a Contact Form widget & insert it into the layout. It doesn’t matter where it’s placed as it won’t be visible for now.
Step 2: Now go to TEMPLATE-> EDIT HTML.
Click inside of the editor text area and press CTRL+F (CMD+F on a Mac). In the search bar type ContactForm then hit enter.
You should find this line:
<b:widget id='ContactForm1' locked='false' title='Contact Form' type='ContactForm'>
under it, you should see this code:
<b:includable id='main'> <b:if cond='data:title != ""'> <h2 class='title'><data:title/></h2> </b:if> <div class='contact-form-widget'> <div class='form'> <form name='contact-form'> <p/> <data:contactFormNameMsg/> <br/> <input class='contact-form-name' expr:id='data:widget.instanceId + "_contact-form-name"' name='name' size='30' type='text' value=''/> <p/> <data:contactFormEmailMsg/> <span style='font-weight: bolder;'>*</span> <br/> <input class='contact-form-email' expr:id='data:widget.instanceId + "_contact-form-email"' name='email' size='30' type='text' value=''/> <p/> <data:contactFormMessageMsg/> <span style='font-weight: bolder;'>*</span> <br/> <textarea class='contact-form-email-message' cols='25' expr:id='data:widget.instanceId + "_contact-form-email-message"' name='email-message' rows='5'/> <p/> <input class='contact-form-button contact-form-button-submit' expr:id='data:widget.instanceId + "_contact-form-submit"' expr:value='data:contactFormSendMsg' type='button'/> <p/> <div style='text-align: center; max-width: 222px; width: 100%'> <p class='contact-form-error-message' expr:id='data:widget.instanceId + "_contact-form-error-message"'/> <p class='contact-form-success-message' expr:id='data:widget.instanceId + "_contact-form-success-message"'/> </div> </form> </div> </div> <b:include name='quickedit'/> </b:includable>
Delete everything in red so you’re only left with:
<b:includable id='main'></b:includable>
Step 3: Save the template & go to PAGES. Create a new Contact page, make sure you set page editor to HTML mode and paste in this code:
Your form should now be visible!
Step 5: If you also want to adjust the styling of it, go to TEMPLATE->CUSTOMIZE->ADVANCED-> ADD CSS and paste in this code:
.contact-form-widget {
margin-left:auto;
margin-right:auto;
width: 600px;
max-width: 100%;
padding: 0px;
color: #000;
}
.fm_name, .fm_email {
float:left;
padding:5px;
width:48%
}
.fm_message {
padding:5px;
}
.contact-form-name, .contact-form-email {
width: 100%;
max-width: 100%;
margin-bottom: 10px;
height:40px;
padding:10px;
font-size:16px;
}
.contact-form-email-message {
width:100%;
max-width: 100%;
height:100px;
margin-bottom:10px;
padding:10px;
font-size:16px;
}
.contact-form-button-submit {
border-color: #fff;
background: #000;
color: #fff;
text-transform: uppercase;
width: 20%;
max-width: 20%;
margin-bottom: 10px;
height: 30px;
font-size: 12px;
letter-spacing: 2px;
font-weight: 100;}
.contact-form-button-submit:hover{
background: #f6f6f6;
color: #000000;
border: 1px solid #FAFAFA;
}
Don’t forget to Save your Template. Your form should now be set up & ready to use! Let me know if you give this a try!