Adding a form to your web site
We recently learned of a great online service that allows you to create a FREE custom form (with no programming needed) in just minutes, so we wanted to share this useful information with WebSpawner users.
Adding a form to your web site is a great way to collect contact or other information from your site’s visitors. Here is a picture of a sample contact form:
EmailMeForm.com provides a simple online form generator… you can create a custom form and add it to your WebSpawner web site in minutes. Registration and creation of one form is FREE (they also offer an optional paid upgrade to allow for multiple forms and additional features). When a visitor fills out your form on your site, you’ll receive an email message from EmailMeForm.com containing the visitor’s input information.
In this post we will walk step-by-step through the process of creating a form for use on a WebSpawner web site.
To get started creating your own form, go to www.EmailMeForm.com and click the Signup for Free link.
You’ll see a brief sign-up form. Enter your First and Last Name, a Username, a Password (and Re-type it as requested), and a valid Email address (this is important as it used to verify your registration, so be sure it is entered correctly). Then click the Sign Up button as shown.
Next you will receive an email message from EmailMeForm.com which contains a verification link. Check your email and locate the message, then click the verification link. You should then see a confirmation message like the following one in your web browser:
Click the here link in the “Please click here to go into your Control Panel” message as shown above.
Next, in the Control Panel screen, click the Create new form option in the Navigation Bar:
Now you will see Step 1 of the Web Form Creation Wizard:
- Enter a Web Form Name (such as “Contact Form”);
- Enter one or more Recipient Email Addresses (this is where EmailMeForm.com will send the information that visitors enter into your web site form so make sure you enter at least one valid address of your own);
- Enter an optional Email Address to receive any input that EmailMeForm interprets as spam (this can be left blank if you like);
- Enter a full URL address for a Thank You page (if you have created one in your web site) or just enter the address for your WebSpawner web site’s index page if you prefer;
- Enter the number of input fields that you would like your form to have (4 for example);
- Then click the Next button.
Next you will see Step 2:
- Enter the Field Name that you wish to appear for each field of your form (for example: “Your Name” and “Your Email Address” and so on);
- Use the pull-down menus to select the other options for each field, including Text effects (Bold or Italic if you like), Field Type (text, checkboxes, radio buttons, etc.) and Required input (Yes or No);
- Then click the Next button to proceed.
Step 3 of the Web Form Wizard allows you to set specific column and row sizes if you wish; however, default values will automatically appear based upon your previous selections, so you can simply leave these settings as is and click the Next button if you like:
Step 4 will appear next. This step contains a number of optional customization features that you can tinker with if you like, or to simplify things just leave everything as is and scroll down to the bottom. In the last option called ‘Display Mode’ step you should click the first button labeled “Web Form will be inside the web page, visitor never leaves the site” and then click the Next button:
Step 5 contains more optional settings that you can modify if you like, or to keep things easy simply leave these as is and click Next as shown.
Step 6 of the Wizard will show you a preview of the form you have created, as shown below. You can click the Back button to return to earlier steps and make changes if you like, or if you like the form as is, click the Finish button to complete the process.
Creation of your form is now complete, and a message confirming this will appear… now you’ll need to click the “Get the HTML Code” link in the message, as shown below.
In the next window titled “Get the HTML Code for your forms” select your form in the pull-down menu, and click the button labeled “Get HTML for displaying the form inside a page on your site.” Your HTML code will appear in the box below… click inside the box as shown in the image below and Select All of the code (Control-A on a Windows computer or Command-A on a Mac), then Copy it (Control-C on Windows or Command-C on Mac).
Now you are ready to open a new window in your web browser and log into your WebSpawner website account at www.webspawner.com (hint: keep the EmailMeForm browser window with the HTML code open in case you make a mistake and need to copy it again).
In the WebSpawner Member Menu, click to select the page to which you would like to add your new form, then click the Modify button.
In the Modification form, scroll down to the Body Text step and click inside the text box where you would like your form to appear (that is, above, below, or in the middle of any existing text on your page). Now Paste in the copied code (Control-V on Windows or Command-V on Mac). Complete the modification process by clicking ‘Continue’ at the bottom of the form, and then click ‘I Like It’ at the test page preview to publish your changes.
Your website will now include your new form for visitors to see, and when a visitor completes the form, the information entered will be sent to you in an email message from EmailMeForm.com.