Home » Blogger Tutorials, Tricks and Hacks » Blogger Tricks » Add contact us form to blogger

Welcome to our AllBlogTools.com v.3 new version, We are still in beta, please contact us to report an error.

|| View All Tutorials ||

Add contact us form to blogger

Add contact us form to blogger

1 Star2 Stars3 Stars4 Stars5 Stars

Report Error

17,263 views

how to add contact us form or mailing page for blogger
blogspot blogs step by step Blogger tricks
you must add a contact us form on your blog, to let people connecting you, and to build nice and fine relationship between you and your blogger

blog visitors,
and you don’t want to right the next line in to your contact us page.
to contact us please send us a message on: mymail (at) gmail.com
you want to add a nice and professional form, witch looks like the next image.

Add contact us form to blogger

and here is demo live form on one of our blogs.
this service is fully free and provided by www.emailmeform.com
this site allow you to have a form for every blog, or several forms for each blog.
i cant wait to tell you how to do it. so let’s do it,
go to www.emailmeform.com or click here (new window)

Add contact us form to blogger

it’ll take you to the next page.
at this page you’ll find a small form, fill it all and click “sign up” button.

Add contact us form to blogger

after clicking sign up button you’ll see the next message.

Thank you for signing up!
To prevent automated registrations, we sent a message to the email address you provided. Please check your email and click on the Verification

Link inside, to activate your account.

so please go to your email account that you typed it while you was filling the form. and find message with the next details.
title : EmailMeForm
subject : Your new account information

at this message you’ll find a confirmation link. click it.

Add contact us form to blogger

it’ll take you to the next page,

Add contact us form to blogger

click the link titled “here” or look at the image up.
when you click the link titled “here” it’ll take you to your account control panel.

at your control panel, click “Create new form” you can find it on your account sidebar.

Add contact us form to blogger

you’ll go to :Web Form Creation Wizard – Step 1

fil the form on step one. and click ” NEXT ”

At the next step :Web Form Creation Wizard – Step 2

Add contact us form to blogger

you’ll enter the names of the fields.
Optionally you can select text effects, or if the field is mandatory to be filled by your users.

for each filed the is 4 options
Field Name ,Text Effects ,Field Type and Required option?

and you don’t want me to tell you what these options do.

after filling this step form, click next, to go to
Web Form Creation Wizard – Step 3

Add contact us form to blogger

at this step you’ll enter the size of the fields, and options if you have Dropdown Menus, Radio Buttons or Check boxes.

Fill this form then click “NEXT”

you’ll be at :Web Form Creation Wizard – Step 4

Add contact us form to blogger

and here optionaly you can customize the look and feel of your form, by selecting the Text color, Font and Size, the background color, etc. You

can leave all these options unchanged and click Next.
or if you have some experience with css or html you can customize your form.And you can customize Font, Color, Form Description, Header, ,

footer, Style CSS, Send Button Name, Send Button alignment, Include a Clear button, Anti Spam, Image Verification And finally Display Mode

than click next to go to :Web Form Creation Wizard – Step 5

Add contact us form to blogger

and here there are more optional advanced settings. You can leave them unchanged and click Next.
Later you can easily reedit your form and change them if you need.

Finally press next to go to Web Form Creation Wizard – Step 6

Add contact us form to blogger

and at this page you’ll preview the form and if satisfied press Finish or if you would like to change anything press Back.

click finish and the site will tell you that Your form has been saved!
The web form is active, and ready for use by your visitors. Every submission will result in an email delivered to your email address with the content of submission!

now you have 2 options to use the form.
1 : you may take a code that put a link at your blog and your visitors click it to go to your form page at www.emailmeform.com
and the link gonna be some thing like that : http://www.emailmeform.com/fid.php?formid=xxxxxxxx

2 : Or you may take a code to past it on your blog pages to put the form directly on your blogspot pages.

and we prefere option 2 so please click “Get the HTML Code” link

Add contact us form to blogger

at the next page you’ll find a code to get your form inside your blog. Getting your form inside your wesite is easy and simple. Please select a form

from the Drop Down menu below,< IF you have created more that one form > and then copy and paste the Code inside your favorite blog

pages. Each time one of your visitors will submit it, our server will automatically process it and send you an email message.

select all and copy the code.

Add contact us form to blogger

then go to your blogger account, click edit posts posts, creat now post,
and choose “Edit Html”
Title: Contact us, or what ever you want.
and past the code at the post area.

Important before publish your form

and at you form code please find the next code

<table

and just before it past the next code.


And at the bottom of your form code find the next code


there is nore than one code called

</table>

find the lastest one at the buttom of your code,
and after it past the next code

</div>

Find the next code and delete it

<div
style="position: absolute; left: 1800px; top: 20px;"><a
href="http://www.emailmeform.com">web forms software</a></div>

Attention. blow the post area click “Post Options”
and find Post date and time. and change the date to older date. you may make it 2007 or 2006 or older
the day and month doesn’t matter.
we change the date because we don’t wanna make the form appear at our normal blog pages and archives.

And hit Publish post.

go to DASHBOARD –> POSTING –> EDIT POSTS (find the form post, and click on “View”)
From the browser’s address bar, copy the URL address of this Post –> we will use this address as a Link to Contact Form in our Blog
You can place this Link wherever you want (in your sidebar, header….).

Enjoy

here is demo blog that you can test the mailing form.

Click here to see demo blog and the contact us link on the top menu

thanks for

pocket-templates.blogspot.com
for providing us a code that solved alot of problems here
and
www.emailmeform.com

Liked It ? Please Share

Comments

39 Responses | Post A Comment | Subscribe To Comments RSS Feed

  1. lyndon says:

    hello max! how are you? i hope your ok there!

    By the way i will try this tweak tutorial of yours, sounds cool and interesting.

    Thanks a lot for sharing your knowledge to us. Thanks a lot my friend.

  2. Max says:

    hi lyndon
    thanks for your comment,
    we hope you find it useful for you.

  3. Alek says:

    Hi. Good site.

  4. web form says:

    All the steps are clearly mentioned. Thanks

  5. Zukca says:

    Un mil gracias me ha servido de infinitesima ayuda

  6. Max says:

    whats wrong with you krishna

  7. Goacom says:

    Hello

    thanks for your details in implementing the contact form

    But I encounter a problem in the form

    When I do everything that you ask me to do, the contact form appears with a big gap before the form starts and then there is another gap down between image verification and the image.

    please tell me what is to be done.

    I am pasting the code here

    .nobrtable br { display:
    none }

    Your Name

    Your Email Address

    Subject

    Message

    Image Verification

    Please enter the text from the image

    [ Refresh Image ] [ What’s This? ]

  8. Max says:

    hi Goacom
    to skip this problem you have to delete the last code that we mentioned.
    make sure that you removed it.

  9. goacom says:

    Hi Max

    Thank you for the reply.

    I have done exactly what you say and deleted the code but to no avail. I still have ahuge gap before the form begins and then gsps between image verification text and the actual image text.

    I like this form and would like to have it on my blog. But to no avail. I have tried it over 10 times but without success.

    Could you kindly send me the exact code on my email at kevzone8@yahoo.co.in

    thanks and regards

  10. Goacom says:

    Hi Max!

    I have found out that the code given by you up there cannot be actually used in blogger. It gives a large gap before the start of the form.

    Even the tweak in deleting a part of the code and adding something else as mentioned by you does not help. Blogger’s posting just does not help it.

    I guess I cannot have the form on my blog

    Thanks anyway

  11. Max says:

    hi Goacom
    thanks for waiting and i’m sorry for my late answer. i double checked the codes again and retyped it,
    please give it another try, because we removed it from the demo blog and added it again. and it worked ofr us again, you can visit the demo blog to check it.
    so please try to add it to your blog with the new code and i hope it work
    if it still not working, please try to change your template,

    thanks

  12. WILDLIFE says:

    Ну конечно, как люди говорят, занимательное рядом! :)

  13. Mike says:

    Here is a nice and easy alternative. check out the form on the contact us page of this site i put together. Get started with google Docs and create a form and then embed it in a post on your site. Then you’ll have all the replies to your form neatly in a spreadsheet waiting for you in Google doc’s. You’ll also receive an email each time the form was submitted by a user on your site. The layout isn’t totally customizable (color and fonts) but the ease of use and the spreadsheet it creates for you are well worth it. Create and use as many forms as you need. You can also use the form as a popup window on your blog instead of embedding the form. Please DON’T submit entries to the form just to test it :-). Go to google doc’s and set one up. Thank you

  14. Mike says:

    Here is my site. Please once again don’t send names and email addresses just to test it. Go to Google Docs to test out all the features.

    http://www.hashemechadgadgets.com/

  15. Mike says:

    Sorry i forgot to include the link. Here it is.

    http://www.hashemechadgadgets.com/2008/12/contact-us.html

  16. Max says:

    hi Mike
    thanks very much for this great idea, i hope our visitors can use it.
    thanks

  17. kenlevenson says:

    and at you form code please find the next code
    <table

    and just before it past the next code.
    .nobrtable br { display: none }

    and soon on…

    -maybe my english is bad, but its really confusing, im not sure, asking me to find “<table”, ok i found it.

    and then just before it past the next code.

    ” .nobrtable br { display: none }

    </div”

    whats this about? delete it? or?

    sorry =( too confusing

  18. kenlevenson says:

    got huge gap… cant be edit

  19. apples says:

    Am I the only one getting this error message when clicking “Next” after Step 1?

    “You have an error in your SQL syntax; check the manual that corresponds to your MySQL server version for the right syntax to use near ‘stories ‘, ”, ‘http://’, NOW(), ‘temp’, ‘Verdana’, ‘2’,’ at line 1″

  20. Max says:

    hi apples
    please try again later, you may can do it after a little time.

  21. Panzer says:

    Good site, admin.

  22. Bilal Ahmad says:

    Wooooh thank you so so so so so so much for this

  23. j-man says:

    worked flawlessly for my website newstheylose.blogspot.com

    good work!

  24. SpeeceMex says:

    moon palace casino review vegas casino ii mobile casino affiliate .royal decameron beach u0026 casino panama seneca casino hotel club one casino psp hard rock casino cheats .costa cruise casino wind creek casino .borgata casino atlantic city nj club casino hampton beach subtitles casino diamondhead casino .when office casino night .could .In .the need for as a result of las vegas frontier casino cairo marriott casino take us All about star city casino nsw image as pala casino phone mgm hotel and casino I download casino games the need for that was the need for nassau hotel casino oklahoma winstar casino so What script casino As so senior director of casino marketing new casino glendale federal casino often no download casino mirage hotel u0026 casino akela casino hotelumiГЁre suites and casino This is hawks prairie casino which
    pala casino phone number jobs at casino arizona .I image as harris rincon casino san diego i’m with mgm grand casino fire with rooms at casino rama .The best of .And .outside And new st louis casino new wild horse pass casino Heh, Following a crown casino hotel in melbourne take us merle haggard colusa casino tickets info 4 casino how are casino winnings taxed caesars atlantic city casino In a wigan casino prints it contain ought to .

  25. Beben says:

    arghhh…grrrr…so confusing..zzZz..zzzz

  26. thiago says:

    Oh my god, the site is not working more? please help me..

  27. Fatih says:

    Nice tutorial Max..
    This is useful..

  28. beben says:

    this serve got some error/trouble Max…try it…hihihihih

  29. Ramya says:

    its very useful one……….

  30. Kit says:

    I have added this to my blog. Thank You for this post. Great site!

  31. masalaking says:

    Great Trick………….

Comments will be closed off on this post 365 days (1 year) after it is published. Apologies to this, but it's all about avoiding a growing comment spam problem. See our most recent posts where you can comment here