Contact Us Form With File Upload Option

Views

Contact us page is a must and one of the most important part of any website. Let your readers communicate with you and send messages directly in your inbox. They also have an option to download a file directly from your website. They can upload JPEG, HTML, ZIP, GIF, JPG, PNG, still depends on whatever you will choose to allow.The form that I am currently using right now is from EmailMeForm a free Online Form Builder. My form is now customized with CSS so this looks better than a simple form. I will show you how you can add CSS on your EmailMeForm contact us page.The HTML code of contact form can also be used to any website.

SIGN UP FOR FREE ONLINE FORM

• First, Create your account on EmailMeForm
• After signing up, Log in and click ADD  FORM

• Choose #2 on the pop-up message box

• There you will see your form settings, You can add everything you need to your contact form.
• Just click the blue buttons for your desired field.
• You can always customize your chosen field, Just click the field that you wan to customize at the right side of your form page.

• Every time you add a field on your form you can see the effect on the right side of your form builder
• In my case, this is what I added on my form:

1. Full Name *
2. Email *
3. WebSite URL *
4. Subject: * (with drop down option)
5. MESSAGE *
6. Upload File *
7. Image Verification (optional)

• And this is how my form looks like LIVE DEMO
• Uncheck boxes that you don’t want to be shown,
• Personalize your form description , in my case I don’t want the tittle header to be shown
• Click Styling Options, this section lets you ad CSS style on your form.

• After clicking that, you will see a pop-up box like this…

ADDING  CSS CUSTOMIZATION ON YOUR CONTACT FORM

• COLOR TEXT #ffffff represent the color of your text
• Background #0a0a0a for your form background color
• I leave the header , footer & td section empty
• STYLE CSS TABLE is responsible for customizing your form box appearance, Border radius, Color, Thickness, etc.
• In my CSS form box I added some Border radius, Box Shadow, and Border color.
• This is the CSS code for my table, You can use it if you want but you can always add your own.

border:1px double #A2A3A2;
   border-radius:25px;
  -moz-border-radius:25px; /* Firefox 3.6 and earlier */
  padding:0;
  margin-bottom:15px;
  box-shadow: 2px 5px 10px #666;

NOTE: In adding CSS code, There’s no need to include { } to enclose stylesheet . Only enter the actual style properties. This style will be applied to the content of the table.

• Change #A2A3A2 for your box border color,
• Increase 25px to make your border more rounded,
• Change #666 for your box shadow color,
• After adding your CSS code click save.
• In your Dashboard, You can preview your actual form by clicking view.
• And on getting your HTML code, Click Code.

• In your code section, Choose HTML ONLY,

• Copy the entire code,

APPLYING THE CODE TO BLOGGER

• Create a new page name it Contact us or whatever you want your name page will be,
• Click Edit HTML,
• And then paste your HTML FORM CODE,
• Click publish.

NOTE: DON’T SWITCH BACK TO COMPOSE TAB AFTER PASTING YOUR HTML CODE, BECAUSE THAT WILL COLLAPSE YOUR FORM CODE AND IT WILL NOT WORK AS EXPECTED.

CLICK PUBLISH AND YOUR DONE!

The tutorial was very lengthy but believe me its indeed worth the reading. You can see it working perfectly on your blog.

ARE YOU CONFUSED REGARDING THIS TUTORIAL?

If you have any difficulties implementing and/or following this tutorial, Feel free to keep in touch with me and ill try my best to work it out.