ArtsAutosBooksBusinessEducationEntertainmentFamilyFashionFoodGamesGenderHealthHolidaysHomeHubPagesPersonal FinancePetsPoliticsReligionSportsTechnologyTravel

Web Content Management System CMS Made Simple: How to Build a Form Part 1

Updated on October 27, 2015

A quick way to copy an existing form

Most of us do not have the time to build forms from scratch, so here is an easy way to get a headstart.

Inside Formbuilder
When you are on the Forms tab, you will notice XML icons for each of the sample forms. Since you cannot do a 'save as' function for forms, you will use the XML files to accomplish the same thing.

On the sample you want to copy

  1. Click on the XML icon
  2. Download the XML file to your desktop and rename the XML file
  3. On the Forms tab, go to Browse for XML file
  4. Fill in a name and alias for the form
  5. Upload XML file

Your form will now appear on the Forms tab.


Install Formbuilder
If you need to create a form for your CMS Made Simple Web site, the first step is installing the module Formbuilder. The Formbuilder module comes with three sample forms and a style sheet associated with those forms.

To install the module:

  1. Login to your admin tool (www.yoursite.com/admin)
  2. Navigate to Extensions>>Module Manager
  3. Click on the Available Modules tab inside the Module Manager
  4. Click on F and browse down to Formbuilder
  5. Click on Install

Once the module has been installed, you can access the module by going to Extensions>>Formbuilder.

Inside Formbuilder
When you open Formbuilder, you will notice there are three pre-loaded sample forms. These three forms demonstrate the various options available in the module. Options like: drop-down menu, text areas, checkboxes and a way to capture email addresses, to name a few.

To get a feel for what the forms look like, copy one of the three smarty tags and place it on a page. One thing I have noticed on the version of CMS Made Simple I have is if you place the smarty tag inside the content well in the WYSIWYG mode, the system will automatically install a table around the form -- something you may not want. I always click on the View HTML option and then paste the smarty tag inside the content well.

Changing the elements of the form
Besides the main tab for each sample form, there is also a Configuration tab. The Configuration tab allows you to set your preferences for Formbuilder. For example, if you do not want form errors to be seen by a user, you would select the Hide Errors checkbox.

Clicking on the name of the first form, you will be directed to a page with seven tabs. In the beginning stages you will care mostly about the first 4 tabs.

One: Main tab
On this tab, you need to fill in three lines: Name of Form, Form Alias and CSS Class. Fill in the CSS Class even if you don't know if you will need it, it will save you time in the long run. By placing a CSS Class in the line, you can access that name and apply styles to your form.

Two: Form Submission tab
There are a couple items you may want to fill in on this tab. These include:

  • Page to redirect to after form submission -- if you want users redirected after they submit their information
  • Form Submit Button Text: This is the text the user will read on the submit button
  • Form "Next" and "Previous" Button Text: This is for navigation on multipage forms

Three: Form Display Settings tab

  • Fill in all three lines (or leave the default)

Four: Captcha Settings
To use this feature you will need to install the Captcha module. It is probably in your best interest to install this module since it will improve the security of your form submissions by forcing users to input text that randomly appears beneath the form.

To Install Captcha go to Module Manager>>Captcha>>Install

Form Basics

  • Your form should have a minimum of three elements. Begin with the Fieldset Start element and end with the Fieldset End -- this will create the lined border for your form. If you do not want the line, you can remove the Fieldset elements. if you keep the Fieldset elements, then all of your form elements must remain between the Start and End element.
  • If you use an existing form, you can click and drag the elements to rearrange the order. You can delete any existing element by clicking on the trash can icon.
  • To edit an element, click on the element name and you will be directed to that element's attributes.

Common elements and what they do:

  • Email "From Name" Field: This element is used to capture the email address a user inputs. If it needs to be required check the required box. Once check, the form will not submit unless the user fills in their email address.
  • Static Text: Just like it sounds, use this element to place static text, for example a greeting, on the form.
  • Email "Subject" Field: Whatever the user inputs into this field will become the Subject line of the email sent to you.
  • Text Area: This is the 'content well' of the form. Users will input their message to you by typing inside this element.If you want a message, check the required button when you set this up. You can also change the numbers of rows and columns displayed for the text area.
  • Email Results to set Address(es): This will ensure that the email is sent to a predetermined email address when the user hits the Submit button. When you set up this element make sure you change the default words inside the "From name" for email & "From Address" for email to values for your site. Also,change default destination email to an email address associated with your site. You can also check options to force a BCC or CC of the email.

Part II of this lesson explains how to fine-tune each element to accomplish a specific task.

Comments

    0 of 8192 characters used
    Post Comment

    • ronhi profile image

      ronhi 4 years ago from Kenya

      Getting a form builder application that is flexible is the biggest challenge I have. Anyways, thanks for the detailed informative and interesting hub. Voted up

    Click to Rate This Article