July 22, 2011

Create a Contact Form With File Upload Option


Email contact-formThe contact form that I am using on this blog is from emailmeform and it is all free but customized using CSS. I previously published a post on how to customize contact form provided by emailmeform but later due to change in the coding provided by them the styling do not work for new forms so today we will learn to create a simple contact form with no company Ads and along with an upload option that will allow your visitors to send you files straight from your website. The files can be a text file, video, audio, pdf, gif, png, anything. Follow these steps:

 

Live Demo

 

Create a Free Web Contact Form

Sign up for a free account at emailmeform

Once you are registered click the "Add a Form" button and choose the form builder option.

add form

Keep your form simple with some important fields only like Name, Website URL, Email, Age, Country, Subject and Message. The form builder looks like this,

form builder

The form builder has blue buttons at left and display at right. When you click a button on left the effect is displayed on right. Now kindly follow as I instruct for keeping things simple and for creating a simple but informative contact form.

Follow this order:

  1. Click the Name button in advance section
  2. Next click Web site
  3. Next Email
  4. Next Hidden Field. Now click the hidden field section on the right and rename it as Age
  5. Next click Hidden Filed again and rename it as Country
  6. Next click File Upload  (Optional you can leave this option if you don't want users to send you files via email)
  7. Now From the Basic section click Paragraph Text & click it to rename it as Message
  8. To make a specific form option a must to fill then simply click that row and select required as shown below

edit form fileds

 

Your contact form now must look something like this:

contact-form

     9.   Click the Form Title and add some message there for your visitors. For example you can write :

We Love To Hear From You

Feel free to ask for any help. We will catch you back as soon as time allows

If you wish you can remove the form title by unchecking the box and deleting the description text. See below

contact form title

     10.    Now on the form settings choose Redirect URL and insert the page link of your thank you page. A thank you page is something like this

redirect contact form

You may create a separate post for this by giving it an old publishing date. Blogger users can create a Page instead of Post.    

11.  Now replace send Email by submit and align it to right as shown below:

submit button

  12.  Next click the Captcha Code at the bottom and select the none option from the left section as shown below:

remove captcha-code

This security code is often added to prevent spam but I have never used this security code and I honestly have received not even a single spam till today. Just remove it to make the contact form even more neater.

13.   Finally hit the Save Form Button and a window will appear as shown below:

save form

14.   Choose the second option and add a recipient email ID. Choose an ID that you often use so that whenever someone leave a message you may receive it straight in your inbox. You can also add more than one recipients. See below:

add recipient

Leave other options as default. Hit Save! Now choose the third option.

save contact form

15.   In Form manager Click Code

contact-form-code

16.  Choose the HTML Only option and copy the code. Make sure to enter the URL of the page where you want to embed the contact form. See below

copy code

It is therefore better that first you create a Page on Blogger and publish it. Fetch its URL and paste it in the blank "Enter URL where form is embedded"

Now simply copy the code and paste it in your contact page. To delete the emailmeform logo from the contact form find and delete a similar code like the one below from the code you just copied.

  <div><font face="Verdana" size="2" color="#000000">Powered by</font><span style="position: relative; padding-left: 3px; bottom: -5px;"><img src=
  "http://www.emailmeform.com/builder/images/footer-logo.png" /></span><font face="Verdana" size="2" color="#000000">EMF</font> <a style="text-decoration:none;" href="http://www.emailmeform.com/"
  target="_blank"><font face="Verdana" size="2" color="#000000">Forms Online</font></a>
</div><a style="line-height:20px;font-size:70%;text-decoration:none;" href="http://www.emailmeform.com/report-abuse.html?http://www.emailmeform.com/builder/form/r99G329aiV6k6" target=
"_blank"><font face="Verdana" size="2" color="#000000">Report Abuse</font></a>

Publish the page and bingo you are done! I know the steps are lengthy but the result is indeed worth it. In my coming posts you will learn how to completely customize this contact form with your own colors and styles. See our contact form as an example. I just hope you may have found today's tutorial helpful. If you need any help please do not hesitate to post your question. Have fun buddies! :)

Note: Paste the Contact Form code in Edit HTML mode only and hit the publish button on blogger Post Editor. Do not toggle to compose mode because this will collapse the form.

You may also find our previous tutorial helpful:





If you don't want to get yourself into Serious Technical Trouble while editing your Blog Template then just sit back and relax and let us do the Job for you at a fairly reasonable cost. Submit your order details by Clicking Here »

45 comments : Post Yours! Read Comment Policy ▼
PLEASE NOTE:
We have Zero Tolerance to Spam. Chessy Comments and Comments with Links will be deleted immediately upon our review.

  1. wow... awsome bro.. i made a blog and im thinking that it should b abt online earning coz i hav lot of data abt that.. but i dont know how shud i design it or what shud it look like.. would u help me???

    ReplyDelete
  2. @Faisal
    Always welcomed buddy. Oh thats a great thought. Best of luck with it. I will recommend that you use MONOP template which is designed keeping many things in mind. Here is the link:
    Download MONOP

    ReplyDelete
  3. Hi Muhammad ,
    Excellent tutorial bro but i have a problem.When i Embed the html code into my blogger blog page, the contact form appears twice.
    Why this is happening???

    ReplyDelete
  4. salam Muhamad
    greats tutorial...how to create auto reply. Its seem that if we reply the email goes to emailmeform..plez help

    cheer

    ReplyDelete
  5. Try foxyform.com as an alternative.

    See my full comments on the "Create Contact Form" post.

    ReplyDelete
  6. Only one problem for me; i wanted to use it for people to send me .mp3 files, however there's a file size limit of 2MB and the only way to increase this (to a 10MB max) is to get a paid account (which is $10 a month).

    I've had a look in the code and there doesn't seem to be a way to increase this. Any suggestions of a service which will provide this for free?

    ReplyDelete
  7. Hi friend,
    Just happy for this post, I was searching on Google how to do this and finally found it here. I never knew you have such a post despite being your follower. Awesome job

    ReplyDelete
  8. hello
    I would like to ask you,how can I publish a message in the other page of my blog not n the home page, please?
    thank you

    ReplyDelete
  9. Its show emailmeform.com at last it is not good visitor leave the site.

    ReplyDelete
  10. mantaf gan, try here → http://zxc9-fun.blogspot.com/

    ReplyDelete
  11. Hi,
    I did this but it looks like this : http://childrensculturalfestival.blogspot.com/p/submission-page.html can you please check? thanks!

    ReplyDelete
  12. Fantastic post. Here’s a tool that lets you build all types of web forms with email alerts fast and without coding. Just point and click http://www.caspio.com/online-database/features/web-forms-online.aspx

    ReplyDelete
  13. Hey thanks,but i have problem with emailmeform,so i tried it with 123contact form but its not working i dont why, www.bloggersmemo.blogspot.com

    ReplyDelete
  14. I tried it and it worked!
    Thanks!

    ReplyDelete
  15. i need your help for custom for email me at bkhan543@gmail.com i will pay i need urgent help thanks

    ReplyDelete
  16. Hello Moh'd, thanks for your efforts, generally on the blogoshere.

    Recently, I tried creating the contact form for my blog but "Enter URL where form is embedded" in step 16 did not appear.

    What do you suggest.

    Kindest regards,
    Amanda. A

    ReplyDelete
  17. Mr. Mohammad, thank you so much. I truly appreciate this tutorial, and my blog is going to be much more awesome now. Cheers! Liz

    ReplyDelete
  18. i am facing one problem....in the 15th step i.e CODE, i am not getting "enter url where form is embedded".................please help

    ReplyDelete
  19. Thank u Mohammad, you are a Genious

    ReplyDelete
  20. Hi Mustafa,
    You're the best tutor i have found on google . Thank you for your valuable service. God bless you and your work.

    ReplyDelete

  21. Brillant piece of information, I had come to know about your web-page from my friend hardkik, chennai,i have read atleast 9 posts of yours by now, and let me tell you, your webpage gives the best and the most interesting information. This is just the kind of information that i had been looking for, i'm already your rss reader now and i would regularly watch out for the new posts, once again hats off to you! Thanx a million once again, Regards, Andhra Pradesh Educational news updater

    ReplyDelete
  22. Know how to create a contact free form using google docs at
    http://blogatoms.blogspot.com/2012/09/how-to-use-google-doc-to-create-contact.html

    ReplyDelete
  23. great article.....really helpful .....

    ReplyDelete
  24. Thank you very much...:)
    nice post keep it up

    ReplyDelete
  25. Thanks for the tutorial. But i have a problem with step 16. The field for "Enter URL where form is embedded" didn't show up while every other info on the page is available. Am completely pissed off cos i just realized it after taking my time to get step 16. Please help. Thanks for your generosity

    ReplyDelete
  26. This particular blog is obviously entertaining as well as informative. I have chosen many helpful things out of this source. I’d love to visit it every once in a while. Thanks!

    Customer Feedback Form

    ReplyDelete
  27. But the Emailmeform.com is limited to only 100 submission/month for free plan.? That means i can receiev only 100 entries into my email.. Thts too less..
    Is there any other totally free form builder?

    ReplyDelete
  28. does not work tried it on my blooger page and submits takes a while but no results have ever come through to my email

    ReplyDelete
  29. I think its better to use google docs to make contact forms. more convenient and reliable. thanks

    ReplyDelete
  30. Thank you bro.... Now my visitor can contact me.

    ReplyDelete
  31. Aking Web Tech a leading IT company & Provides web services :- website Development in just 1,999 Rs/-, software development like {Billing software, School Management Software, Inventory Software, ERP, CRM}, Domain & Hosting , SEO
    website development in indore

    ReplyDelete
  32. Wonderful information, I had come to know about your blog from my friend nandu , hyderabad,i have read at least 7 posts of yours by now, and let me tell you, your website gives the best and the most interesting information. This is just the kind of information that i had been looking for, i'm already your rss reader now and i would regularly watch out for the new posts, once again hats off to you! Thanks a ton once again, Regards,Flats for sale in hitech city

    ReplyDelete
  33. fantastic article.thanks for sharing.your article is full of information.
    HP0-Y46

    ReplyDelete
  34. This comment has been removed by the author.

    ReplyDelete
  35. Thank you very much .for this valuable Information.......
    I hope it works for me ........
    thanks again....
    www.technotrickies.com

    ReplyDelete
  36. Thank U its very useful i am going to bookmark this site

    ReplyDelete
  37. Hi. This service here allows you to easily edit your PDF documents.
    http://goo.gl/JVjpjp

    You can fill out PDF form, save it, fax it, and email it.

    ReplyDelete
  38. And additionally this is often truly the best factor relating to, your individual terribly initial check of your various Pay day advance additionally to Size loan is clearly captivation NO COST!!! That’s acceptable. Anyone can ne'er got to allot only 1 cent fast ntitle loans connected to captivation on the earliest check. The Pay day advance additionally to Size loan are thought to be thought of one amongst all of our greatest disposition choices, since it ought to so be hassle-free and taking.

    ReplyDelete
  39. Hi, nice post. I have done everything but when I fill the form and click on submit it takes me to the form on emailmeform and tells me to continue filling. what should I do?

    ReplyDelete

 
  • MBT Icons and buttons

    Icons and Buttons

    Our resources have been successfully downloaded over 10K times and found almost every where. Get yours!

  • choosing webhost for a blog

    Why HostGator?

    Learn Why we chose HostGator as our Web Host and find discount coupons to kick start your blog today!

  • SEO Settings for blogger

    ALL IN ONE SEO PACK 2012

    Learn every single SEO tip that will boost your blog's ranking and organic traffic. We got them all!

  • Blogger widgets and plugins

    Visit MBT's Blogger LAB

    Why not take a tour of all great Blogger widgets published so far? You Name it we have it!

  • become a six figure blogger!

    Become a SIX FIGURE BLOGGER

    Learn what it takes to become a successful entrepreneur and build a living online!