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.

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)

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.

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.

it’ll take you to the next page,

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.

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

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

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

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

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

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

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.

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

and just before it past the next code.

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

web forms software

there is nore than one code called

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

Find the next code and delete it

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

By Max

I'm Max, The founder and the admin of AllBlogTools.com I'm a very big van of blogging ,design and coding, I think that i'll die next to my computer.

No related posts found

• 39 responses so far!
•      lyndon ( 4:09 AM on 12/19/08 )

  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.

•      Max ( 5:38 PM on 12/22/08 )

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

•      Editing blogger top menu Links Blogger Templates and Tricks ( 5:45 PM on 12/25/08 )

  [...] Add contact us form to blogger witch going to help you creat contact us page to your blogger blogspot blogs. [...]

•      Alek ( 7:18 PM on 12/31/08 )

  Hi. Good site.

•      web form ( 6:50 AM on 1/2/09 )

  All the steps are clearly mentioned. Thanks

•      Zukca ( 4:11 PM on 1/2/09 )

  Un mil gracias me ha servido de infinitesima ayuda

•      ebenk789 ( 11:13 PM on 1/6/09 )

  Thanks..!!!

•      krishna ( 10:38 AM on 1/16/09 )

  :s.1.s:

•      krishna ( 10:39 AM on 1/16/09 )

  :s.7.s:

•      Max ( 5:45 PM on 1/16/09 )

  whats wrong with you krishna

•      Goacom ( 8:53 AM on 1/26/09 )

  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? ]

•      Max ( 3:16 PM on 1/26/09 )

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

•      goacom ( 2:15 PM on 1/27/09 )

  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

•      Goacom ( 4:16 AM on 1/30/09 )

  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

•      Max ( 9:28 PM on 1/31/09 )

  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

•      WILDLIFE ( 1:25 PM on 2/3/09 )

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

•      Mike ( 7:14 PM on 2/5/09 )

  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

•      Mike ( 7:26 PM on 2/5/09 )

  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/

•      Mike ( 10:12 PM on 2/5/09 )

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

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

•      Max ( 10:12 PM on 2/6/09 )

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

•      kenlevenson ( 8:18 AM on 3/28/09 )

  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

•      kenlevenson ( 8:38 AM on 3/28/09 )

  got huge gap… cant be edit

•      dragon ( 1:45 PM on 4/11/09 )

  Thanks

•      apples ( 7:17 AM on 5/1/09 )

  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″

•      Max ( 4:14 PM on 5/1/09 )

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

•      Panzer ( 3:23 PM on 5/18/09 )

  Good site, admin.

•      Bilal Ahmad ( 3:32 PM on 6/11/09 )

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

•      j-man ( 2:25 PM on 6/21/09 )

  worked flawlessly for my website newstheylose.blogspot.com

  good work!

•      SpeeceMex ( 7:59 PM on 6/22/09 )

  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 .

•      Beben ( 6:12 AM on 6/28/09 )

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

•      Boholik ( 4:09 PM on 8/18/09 )

  Thank you, kind of all happened.

  http://jazz-portal.blogspot.com/2009/05/blog-post_18.html

•      Max ( 5:11 PM on 8/19/09 )

  Hi Boholik. you are always welcome.

•      thiago ( 8:18 PM on 10/10/09 )

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

•      Fatih ( 10:08 AM on 10/27/09 )

  Nice tutorial Max..
  This is useful..

•      beben ( 4:23 PM on 11/17/09 )

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

•      Ramya ( 7:13 AM on 2/7/10 )

  its very useful one……….

•      From Personal to Professional Blog - 100 Tips & Resources |Wordpress|Blogger | OrkutHeroes.com ( 10:10 AM on 3/19/10 )

  [...] Contact Us Page on Blogger is a simple contact us [...]

•      Kit ( 7:44 AM on 4/8/10 )

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

•      masalaking ( 4:24 PM on 7/29/10 )

  Great Trick………….