How To Add 123 Contact Form For FREE In Blogger

If we invest on business, we need to look at all the angles or possibilities of a long and lasting stronghold of a certain firm. Like also in blogging works, one of the fundamentals is to have a contact form as a vital part of every blog/website. It enables your readers to have an indirect link with you regarding your products or services. In this manner,it gives all visitors a path in which to open a good communication with you and to your clients. There are many types of contact forms that can be used in various occasions like survey questions, polling visitors on various topics, or allowing visitors to join your newsletter. In this tutorial, I will show you on how to add contact form via 123contact form since I used this also in my contact page .

How to Add 123 Contact Form in Blogger 

Step 1. Go to 123 contact form.

Step 2. Create an account there for free.
Step 3. Then follow  all the steps that the  requested from you.
Step 4. Get or copy the codes for your contact form. The codes may look like this:

<!-- 123ContactForm.com script begins here -->

<script type="text/javascript">var servicedomain="www.123contactform.com"; var frmRef=window.top.location.href; var cfJsHost = (("https:" == document.location.protocol)  Some Codes Here.................................................; </script>

Report it!">Report abuse 

<!--123ContactForm.com script ends here-->

Step 5. Go to your Blogger Dashboard >> Click New Post or you may use New Page (static page).
Step 6. In your Blogger Post Editor's Page, paste the code that you have got from 123contact form (in step 5). You may put a title (Contact Us or Contact).

Note: In putting the contact form codes, your Blogger Post Editor's Page must be in HTML mode.

Step 7. Publish it in an earlier period of time so that it will not appear at your home page but if you're using a new page, just simply hide it.

Bonus Tip :

If you want to appear your contact page like mine in a manner that it occupies the whole page of your blog. Please follow the steps below:
1. Go to Blogger Dashboard >> Click Template (have a backup of  it as  your reference)
2. Hit the Edit HTML buttom
3. Locate or Control F the tag below

]]></b:skin>

4. Just below the code  "]]></b:skin>", you paste the code below

<b:if cond='data:blog.url == "
http://mybloggersnipers.blogspot.com/p/contact-us.html''><style>
.main-inner .columns {
padding-left: 0px !important;
padding-right: 0px !important;
}
.main-inner .fauxcolumn-center-outer {
left: 0px !important;
right: 0px !important;
}
.main-inner .fauxcolumn-left-outer, .main-inner .fauxcolumn-right-outer, .main-inner .column-left-outer, .main-inner .column-right-outer {
display: none !important;
}
</style>

</b:if>

Customization:

• Replace the URL (red bold text) with the URL of your Contact page.

5. Since we make your post (contact page) occupies the entire portion of your page, there is already a little problem on its margin, that is your contact form lies at the left side of your page and in order to solve this one, please paste the code below and paste it just above the codes that you have got from 123contact form as shown in the screen shot below:

<center><style>#sidebar-wrapper, #midsidebar-wrapper, .gapad2, .blog-pager, .post-header-line-1, .post-footer { display:none !important;} #main-wrapper { width:900px!important;} .post { width:900px!important; }

</style></center>

6. Save your template and you are done!

If you some questions regarding this post, please leave it at the comment box below or please contact me.

Take care and Enjoy!