Creating forms for your site using EmailMeForm

Forms are often times an important part of a website. They are used to gather different kinds of information from users viewing your site. Forms can be found all over the web, whether they be membership forms, surveys, order forms, etc. Since forms are often an integral part of a website, it’s no wonder that numerous websites can be found devoted to generating forms for developers.

In this tutorial, we will be looking at EmailMeForm.com. EmailMeForm offers several form templates that users can customize and easily integrate into their website. For this tutorial, we will create a simple website, create a form with EmailMeForm.com, and then add it to our website. This will demonstrate how simple it is to create powerful, flexible forms using the tools available at EmailMeForm.

Create a new web site using a WebMatrix template

For this tutorial we will be using a free tool from Microsoft called WebMatrix. WebMatrix allows you to create, customize and publish websites. It’s amazingly easy to use, and can be downloaded from http://www.microsoft.com/web/webmatrix. Need help downloading and installing WebMatrix? You can view step by step instructions in Getting Started with WebMatrix.

WebMatrix gives you a number of different ways that you can create a new web site. You can use an existing open source application such as WordPress, Joomla, DotNetNuke or Umbraco, or you can create a site yourself by either coding everything or by using a small, simple template. In this tutorial, we will be using a small, simple html template.

1. Open WebMatrix. On the Welcome screen, choose “Site from Template”

clip_image001

2. Create an “Empty Site,” name it and press OK

clip_image002

3. You now need to open your files workspace. To do this, click on Files on the lower left hand of your screen

clip_image003

4. Now that we are in our files workspace, we need to create a new file. You can either click on the new file icon on the menu ribbon at the top or in the middle of the screen. Create a new .html file and give it a name.

clip_image004

5. We now have a valid, html5 empty webpage. Let’s add a few elements before we create our form.

Directly after our <body> tag, add a header:

<h1>Fourth Street Coffee Co.</h1>

Now let’s add some style. Somewhere between <head> and </head>, add:

<style type="text/css">
   body { background-color: black }
   h1 { text-align: center; color: white }
   form { text-align: center }
</style>

6. Run your file. You should have blank page with a header.

clip_image005

Create an account with EmailMeForm

Using EmailMeForm.com requires a user account. We will create an account now.

1. Visit http://www.emailmeform.com/ to create an account.

clip_image201

2. Click the “Signup Now for Free” button to create your account

3. We will now see a screen that prompts us to sign up for an account or to log into an existing account. If you already have an account, sign in.

clip_image202

Otherwise, fill in the Sign Up form, agree to the terms of service and click the “Sign Up” button to submit your information.

clip_image203

4. After completing the form you will receive a confirmation email. Click on the link in the email to confirm your account. You will be directed to a webpage confirming your signup.

clip_image204

5. To continue on to create a form, click the “here” link in “Please click here to go into your Form Manager.”

Creating a Form for our Webpage

EmailMeForm offers two options for creating a form for your webpage: using a template or creating your own form. For this tutorial, we will use a pre-made template.

1. In your file manager, click the “Add Form” button.

clip_image301

2. Once the “add form” button is clicked, a pop up box will appear with two options.

clip_image302

Click the first option: “Go to the template section”

3. There are numerous form options to choose from here. For our example, we will be using the “Cupcake Order Form” under the Business tab.

clip_image303

4. Clicking on the “Cupcake order form” will cause the form to appear to the right. It has default fields and is styled. We could use the form like this on our website, but most likely we will need to change some of the form fields to match our form needs.

clip_image304

To change this form we need to customize it. Click the “Customize” button at the top of the screen

clip_image305

5. We can now add, change or delete fields on our form. You can click the options on the left or by clicking on the form fields to the right.

clip_image306

clip_image307

6. Once you done customizing your form, click the “save form” button.

clip_image308

7. Clicking the save button will cause a pop up box to appear.

clip_image309

You can choose to modify email notifications for this form. EmailMeForm emails the form results to the email address attached to the form (the default is the email you entered to create your account).

You can also view all these options under Form manager:

clip_image310

8. Choose the “open new window and view my form” option. This shows how your form will appear when you paste it on your webpage.

clip_image311

9. Now, we need to copy and paste your form code onto your website. At your form manager, click the “code” button.

clip_image312

This opens the code options for that form. Here there are several options on how you can do this.

  • Adding a URL to an email or instant message
  • Adding a HTML link in your webpage
  • Adding a HTML button that is linked to your form
  • Add the HTML form with CSS and JavaScript to your webpage
  • Add the HTML form to your webpage – no style or CSS

For this example, we will be using the HTML with JavaScript/CSS code since it seems the most appropriate for our website. Copy the entire length of code.

clip_image313

Add our Form to our Webpage

Now, let’s go back to our webpage and add our form.

1. In our html file, let’s add our form code.

After the <h1> tag we added earlier, paste our form code. Make sure it is placed before the closing </body> tag.

2. Now, run your file by clicking the “Run” icon on the menu ribbon.

clip_image401

Note: You can copy and paste this code any page on your website, it just needs to be located in the <body></body> of the page.

Now customers can order cupcakes on our site. After they fill in our form, it is submitted to the EmailMeForm databases and we will receive an email with all of the customer’s information from the form.

You can discuss this article using the adjacent Facebook talkback.

For technical questions please visit our discussion forums, where we have a vibrant community of developers like you, as well as Microsoft engineers who are ready to answer your questions!