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 

      5 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

    working

    This website uses cookies

    As a user in the EEA, your approval is needed on a few things. To provide a better website experience, hubpages.com uses cookies (and other similar technologies) and may collect, process, and share personal data. Please choose which areas of our service you consent to our doing so.

    For more information on managing or withdrawing consents and how we handle data, visit our Privacy Policy at: https://hubpages.com/privacy-policy#gdpr

    Show Details
    Necessary
    HubPages Device IDThis is used to identify particular browsers or devices when the access the service, and is used for security reasons.
    LoginThis is necessary to sign in to the HubPages Service.
    Google RecaptchaThis is used to prevent bots and spam. (Privacy Policy)
    AkismetThis is used to detect comment spam. (Privacy Policy)
    HubPages Google AnalyticsThis is used to provide data on traffic to our website, all personally identifyable data is anonymized. (Privacy Policy)
    HubPages Traffic PixelThis is used to collect data on traffic to articles and other pages on our site. Unless you are signed in to a HubPages account, all personally identifiable information is anonymized.
    Amazon Web ServicesThis is a cloud services platform that we used to host our service. (Privacy Policy)
    CloudflareThis is a cloud CDN service that we use to efficiently deliver files required for our service to operate such as javascript, cascading style sheets, images, and videos. (Privacy Policy)
    Google Hosted LibrariesJavascript software libraries such as jQuery are loaded at endpoints on the googleapis.com or gstatic.com domains, for performance and efficiency reasons. (Privacy Policy)
    Features
    Google Custom SearchThis is feature allows you to search the site. (Privacy Policy)
    Google MapsSome articles have Google Maps embedded in them. (Privacy Policy)
    Google ChartsThis is used to display charts and graphs on articles and the author center. (Privacy Policy)
    Google AdSense Host APIThis service allows you to sign up for or associate a Google AdSense account with HubPages, so that you can earn money from ads on your articles. No data is shared unless you engage with this feature. (Privacy Policy)
    Google YouTubeSome articles have YouTube videos embedded in them. (Privacy Policy)
    VimeoSome articles have Vimeo videos embedded in them. (Privacy Policy)
    PaypalThis is used for a registered author who enrolls in the HubPages Earnings program and requests to be paid via PayPal. No data is shared with Paypal unless you engage with this feature. (Privacy Policy)
    Facebook LoginYou can use this to streamline signing up for, or signing in to your Hubpages account. No data is shared with Facebook unless you engage with this feature. (Privacy Policy)
    MavenThis supports the Maven widget and search functionality. (Privacy Policy)
    Marketing
    Google AdSenseThis is an ad network. (Privacy Policy)
    Google DoubleClickGoogle provides ad serving technology and runs an ad network. (Privacy Policy)
    Index ExchangeThis is an ad network. (Privacy Policy)
    SovrnThis is an ad network. (Privacy Policy)
    Facebook AdsThis is an ad network. (Privacy Policy)
    Amazon Unified Ad MarketplaceThis is an ad network. (Privacy Policy)
    AppNexusThis is an ad network. (Privacy Policy)
    OpenxThis is an ad network. (Privacy Policy)
    Rubicon ProjectThis is an ad network. (Privacy Policy)
    TripleLiftThis is an ad network. (Privacy Policy)
    Say MediaWe partner with Say Media to deliver ad campaigns on our sites. (Privacy Policy)
    Remarketing PixelsWe may use remarketing pixels from advertising networks such as Google AdWords, Bing Ads, and Facebook in order to advertise the HubPages Service to people that have visited our sites.
    Conversion Tracking PixelsWe may use conversion tracking pixels from advertising networks such as Google AdWords, Bing Ads, and Facebook in order to identify when an advertisement has successfully resulted in the desired action, such as signing up for the HubPages Service or publishing an article on the HubPages Service.
    Statistics
    Author Google AnalyticsThis is used to provide traffic data and reports to the authors of articles on the HubPages Service. (Privacy Policy)
    ComscoreComScore is a media measurement and analytics company providing marketing data and analytics to enterprises, media and advertising agencies, and publishers. Non-consent will result in ComScore only processing obfuscated personal data. (Privacy Policy)
    Amazon Tracking PixelSome articles display amazon products as part of the Amazon Affiliate program, this pixel provides traffic statistics for those products (Privacy Policy)