Contact Forms for Blogger

Contact Forms Image
Contact Forms are backbone of any blog/website, they provide a way for the readers to contact the author personally. As Blogger doesn't provide any inbuilt Contact Form, so we will be checking out some third party Form providers like ContactMe and Wufoo.

In this post we will see how to add to ContactMe and Wufoo forms into your Blogger Blog and also test some of the extra features these services give. Both these companies also provide premium form services but for any standard blog, there Free service is more than enough to meet all the needs.



ContactMe Forms



See Demo


1. Go to www.contactme.com  and firstly register with them


2. After Finishing the registration and Logging into your account for the first time you will be asked to Import your Contact , Skip this Step and Click on Add-Ons in the menu above .



3. After opening the Add-Ons Tab, There will be a Pre-built Form named "Untitled Form" , now just click on  Edit Form ( ContactMe doesn't allow you to create more than one form )

4. Now make changes to the form according to your needs and then click on "Save Form". Then you will be redirect back to the Add-Ons page and Now Click on Get Code



Now you will be presented with three different options for Using/Embedding your Form

>Embed The Form
   Just copy the code and paste it either into a Static Page or a Post ,wherever you want the form to appear

>Get a ContactMe Button
   Just click on "Create your Button" and customize the buttons style and select the Platform as Blogger and     then click "Generate your Button!" and then you either paste this code directly into a HTML/JavaScript Gadget or you can add it directly by clicking "Add to Blogger"

>Link To Your Form
  Just copy the link and share it on your Blog for contacting purposes


Wufoo Forms



See Demo

The above Form is Integrated into a Facebook Page

1. Go to www.wufoo.com and get yourself registered.


2. After completing the Registration process and logging into your Account you will be taken to the "Form" Tab. Just Click on "New Form!" Icon on the Upper Rigtht


3. Now for creating the Form you will see a lot of Options are present , some of its features include Multi page Form , Likerts , Multiple Choice, etc. (The File Upload option is available to premium users only )

You can use these to create Polls, Surveys ,etc as well as the normal Contact Form. Wufoo Provides option to create three separate Forms with the only drawback being that you can receive only 100 entries a month (That too is a killer deal for not paying nothing)

4. After you have finalized your Form Click on "Save Form" , you will be provided a dialog with 3 options, Click on the 2nd and setup Email Notification.


5. After setting up Email Notification Go back to the Forms Tab and below you will see your Form Name, Now click on Code and then you will be provided with 6 different ways to present your Form. I suggest you use the Embed Form Code option and get the JavaScript Code. Now just copy this into the Blogger Static Page (In Edit HTML mode)


Some others features include Customizing the CSS of the form and also very stylish Reporting options (with Pie-Charts and Bar graphs )

You are ready to go now , its upto you to decide which service suits your style. Have any suggestions or having any problems in implementing , please feel free to ask.

Written by Prayag Verma

Find me on Twitter

Email Newsletter

Like what you read here in this post ?
Get new posts delivered straight to your inbox

Post a Comment

I am using contact me form to one of my blogger blogs. But I don't know how to customize them. I always use the default style.

@California Vet Clinic
There is no option available to modify the CSS of ContactMe forms in its free version, you can change to Wufoo forms which have extensive options for customizing the CSS ,for demo refer to the Wufoo form above and see the changed styling

thank you.you worked hard for this,really very nice tutorial with screen shots.
thank you

I'm using emailme form for my contact page.It can be customized using CSS. But I'm using the default style also because I don't have much knowledge in coding.

@New York City News Resource Blog
If you are interested in changing the CSS of your Forms without any prior knowledge of coding ,shift to Wufoo Forms whose "Theme Designer" can be used to change the styling of the Forms with no coding involved

rahul roy said...

nice post, thanks for sharing!

I was using EmailMe form and they are very strict. I removed their link inside the form and they emailed me after scanning my page ;P

Thanks for the info at contact me form. I tried wufoo but I can't stretch the width of the form. It has a fixed size which do not fit on my blog.

Contact ME offers a lot. I think you should all try this. You can create buttons and even create a mailing list. Plus, i think they are an affiliate of MailChimp.

thanks for you tips n always keep your brilliant post..:D !!!

@Plano Auto Insurance Quotes
There is a option but for that you will have to upload a CSS file using Theme Designer > Advanced

Anonymous said...

thanks

Elia said...

Good post, but I'm surprised your list doesn't include 123ContactForm. It's the alternative I stick to. The features I mostly enjoy are CSS customization, reports over submissions and the possibility to integrate apps like MailChimp. And of course the fact they send me submissions and uploads directly to my inbox :)

JamesW said...

thanks for sharing this with us, I appreciate the hard work.

@EliaThanks for the notice, I will cover them in the upcoming posts

Anonymous said...

I just want to tell you that your site is incredible, i love to read www.stylifyyourblog.com !

i'm using wufoo .. its awesome

Unknown said...

Thanks for this post. After trying Google Docs and FormSmart, I decided to go with Wufoo. It works for me because I only need 2 forms and I don't expect to get 100 entries a month anyway. I was able to tailor the design to my site and the user interface is great too.

For those who may be interested, you can see my form as an example here: http://inspiredbynikki.blogspot.com/p/contact-nikki.html

Click inside a field and you'll see that you have the option to add a highlight color and descriptive text.