Formloom 2 Manual

Avatar
Mike
Follow

FormLoom 2 plugin

FormLoom Basics

Start by adding a FormLoom page to your site. then you can editing form properties.

FormLoom Navigation Overview

When in Page Edit view, The Form Loom plugin contains five separate input areas (Simply switch between views using the buttons at the bottom of your RapidWeaver window). These views are

Form Items
These are the fields presented in your form

Header/Footer
The header and footer content areas above/below your Form Items

Templates
Email templates for both the form submission and customer receipt emails

Text
Provide detailed text messages specific to your form - errors, instructions, etc

MySQL Link
If you wish to save your form results to a hosted MySQL database, you'll configure that here.

Page Inspector

Overall Page Settings for the entire plug-in are located here.

Form Items (Fields)

To add a form item, click the + symbol. Once the item's been added, you can configure it.

Form Input Elements (Field Types)

Edit Form Item
FormLoom2 supports a variety of input types and options

Type
The first selection which must be made is the field TYPE. Choose the from the following fields in the Type menu

  • Text Field A single line text field for short text input
  • Popup Menu A menu pre-populated with choices. User selectes ONE
  • Radio Menu User can select ONE of the predfined option values you provide via selection of a button styled input
  • Multi Select Allows the user to select MULTIPLE pre-defined choices by using CMD-CLICK.
  • Checkbox Menu Allows user to select MULTIPLE pre-defined choices by simple on/off checkboxes
  • Hidden Form element not visible to the user. For example, if you your site were available in multiple languages, you might embed a field value for English on the form submitted from the English version of your site to allow you to know what language the submitter prefers.
  • Text Area A multi-line text area suitable for longer text input
  • File Input Allow users to attach files to form submissions.
  • Password A single line text input field with masked characters - character entry is hidden
  • Form Break This is essentially a style text field available for the site designer to add additional style text instructions or details - can be placed anywhere within a form
  • Column Break This is another styling option for the site designer. Add a column break where you'd like one column of inputs to end and your second (or third) to begin. NOTE that the body of your page MUST have enough width to support columns. You can adjust column widths in the Page Inspector -> Style tb
  • Date Picker Adds a calendar type input for users to select a date.
  • Submit Add this field type where the form SUBMIT button should appear.
  • Reset Add this field type if you'd like to give users the option to clear their form and start over.
  • reCaptcha Add a graphical text challenge to insure humans, not bots, are placing form submissions
  • Row Break Add a row break (Manually force following form elements down and to the left margin) and define its width.

Styling your Fields

EVERY form element has it's own specific styling options. You can select any of your created fields to modify or re-style the field. Most fields allow you to modify individual input widths. Radio and Checkbox fields allow you to display option choices either vertically or horizontally.

Label
The Label is how the field is reference on the form. For example, if you create a text field and enter FIRST NAME then the text FIRST NAME will be displayed next to your text field on the form.

Sub-Text
Additional text that will be displayed UNDERNEATH the input field on the form. Useful to provide input examples or field-specific instructions to users.

Input Width
This will establish the pixel width of the actual field (not including the Label) area. Row Break and Column break fields will allow you to define column or width break. For a video tutorial on working with columns and rows for complex forms, be sure to checkout the screencast on our help page.

List Inputs Vertically
For applicable field types, this will format input choices horizontally, allowing for a shorter form length.

Mark as Required
Enabling this checkbox will add your REQUIRED symbol next to the field. NOTE that adding this symbold does NOT actually activate any validation or verify that the field is not empty. You will also need to ENABLE Validation and choose the NOT EMPTY validation type.

Validation Settings
FormLoom2 supports several input validations. By default, field validation is set to NONE. You can enable the following validation types:

  • None [default] Field Validation Disabled
  • Not Empty Verifies that the field is NOT empty (accepts ANY value as long as it's not empty) This setting is often used in conjunction with the MARK AS REQUIRED option.
  • Email Address Verifies that the field contains a properly formatted email address (ie, must have @ and domain name)
  • Equal to Field Used to validate fields against one another. This is commonly used on password type fields. Use this to verify that the user is providing IDENTICAL data in both fields
  • Equal to Value Used to validate a predefined value. This field type can be used as a simple challenge to deter form bots. For example, create a text field with label What is 5 + 3. Set the value to 8. The form will not submit unless the user supplies the value of 8 in their form submission

You can supply a custom error message in the Validation Error Message field. This text will be displayed to the user if validation fails on THIS particular field. If you have multiple validated fields on a form, use this text to help call attention to the field not passing validation.

Default Value
Many field types will allow you to provide a default value. Text type fields have a Default Value text field where you can enter your desired text. Radio/Checkbox/Multiselectfields have a checkbox next to Option values. Simply enable the checkbox for values you would like to be enabled on the form by default.

Here you are given the option to place content above (header) and below (footer) your FormLoom generated form. These ares are STYLED TEXT - use the WYSIWYG editor to format text as you'd like it to appear. You can also drag in images to header or footer areas.

Text

The Form Text panel contains text you can customize within the page:

Basics

  • Form InstructionText displayed at the top body area of the form
  • Success MessageText displayed in the form boday ara after a successful submission
  • Enter Security Code (captcha)Instructional text that appears above the Captcha challenge

Errors

  • General Error MessageGeneric error message displayed to users if form is unable to submit - generally due to mis-configuration of form
  • Capthca FailedText displayed when user does not correctly complete a reCaptcha challenge
  • Files Too LargeText displayed if user attaches file that exceeds limits as specified in Security Settings
  • File Not AllowedText displayed if user attaches file that is not allowed as established in Security Settings
  • Missing Required FieldText displayed when user fails to provide data in a Not-Empty validation field.
  • Invalid LoginIf you have Login ENABLED on the security tab and the user fails to provide proper username/password, this text will be displayed.

Email Template

The Form Templates view has two tabs - Email and Receipt(Toggle between the two at top of screen). Templates in FormLoom allows you to format your emails however you like. To include values entered in your form, you will use placeholders. A placeholder is a representation of each form field based on it's name. To view your placeholders, click the Placeholders button in the top right hand corner of the screen. This will open a slideout panel showing all placeholders. You can simply drag them in to your message are.

An example of this would be as follows...

Say we have three fields named name, email and message. In this case the place holders would be #name#, #email# and #message#.

So your Email Template may look something like this....

Name: #name#
Email: #email#
IP: #fl-ip#
Browser: #fl-browser#
Page: #fl-page#
Date: #fl-date#

Message:
#message#

Global Placeholders
As you probably noticed in the above example, we also provide some global placeholder you can use in your templates.

  • #fl-ip#
    will insert the user's IP address.
  • #fl-browser#
    will insert the user's browser and platform.
  • #fl-page#
    will insert the page the form was sent from.
  • #fl-date#
    will insert the date and time form was submitted.

Receipt Email

This template behaves exactly like the one above for emails to the Site admin except the emails are sent to the person submitting the form. FormLoom2 allows you to send attachments along with receipts also ( see Page Inspector->Extras->Files ).

MySQL Link

MySQL Database Connection

FormLoom is capable of generating forms which not only submit results via email, but also archive form results in a MySQL database. You'll need to get the following information about your database (this is usually available from the company that hosts your site);

Server Address
The address of your MySQL server. Default is normally localhost.

MySQL Username
The Username used to connect to your MySQL database server ( provided to you by your hosting company ).

MySQL Password
The Password used to connect to your MySQL database server ( provided to you by your hosting company ).

Database Name
The name of the database to use (some hosts offer multiple MySQL databases).

Table Name
You'll also probably want to create a table in your database to separate your Form data from other MySQL data.

Field Assignments

This is basically a simple mapping of form fields to db fields. Select a form field to save to the database. Then use the Field Name text area to enter the field name in your database this form field data should be written to.

Extras

Browser
This will attempt to save the user's browser type to the designated field name in your database.

IP Address
This will attempt to save the user's IP Address to the designated field name in your database.

Date and Time
This will attempt to save the Date and Time to the designated field name in your database. It is best that you make this field of type DATE/TIME in your database structure.

Page Inspector

Once you've setup your basic form on the Form Items pane, it's time to take a look at the form settings in the Inspector - this is where you'll establish rules for processing and sending the form to the desired parties.

On your FormLoom page, you'll see four tabs under the Page Inspector

  • Settings
    The basics - where the form will be sent, who it will be sent from, etc
  • Security
    Rules for file attahments and user authentication
  • Code
    CSS and PHP overrides
  • Style
    Enable custom styling to select custom colors/fonts/widths for your form
  • Extra
    More advanced settings, contains the following tabs:
    • Redirect
      If you'd like the form to redirect to another page altogether after a failed or successful submission, specify those pages (or offsite URL's here)
    • Files
      If you'd like to attach files to receipt emails, hit the + symbol and add them to the list. Keep it reasonable, some hosts will have limitations on file size or # of files that may be attached to script generated mail.
    • Debug
      If you're having trouble getting your form to work and would like server-level errors on what's going on, enable the debug options will allow script errors to show more detail - you can even have errors emailed to you.
    • Misc
      More advanced settings, contains the following tabs:

Settings Tab

Recipients
Enter names and email addresses for form destinations. You can send TO, CC and BCC multiple addresses. Just click the + symbol to add a new recipient.

From Email
Enter the email address you'd like the form to be sent FROM - NOTE: Many hosts require the FROM address on email sent through their servers to match an actual account that exists on their network. If you're having trouble with forms not getting emailed, try entering a valid email address that exists on your host (ie, don't use an @gmail.com address as the from address on your @yourdomain.com form)

From Name
The name that will display in the email client as the FROM name. You might wish to use something like WebForm or Site Contact Submission if you use mail rules to perform actions on your form based mails.

Reply Email
The reply-to address on an email can be different than the FROM address, which is handy in cases where your host requires the form to be sent FROM an address associated with YOUR domain but you'd like replies to go directly to the sender. Select an email address on your form as the Reply-to address. This way your replies go directly to the person that submitted the form.

Reply Name

If you're soliciting the sender's name on the form, use the Popup menu to select their name to be populated as the reply-to name.

Subject
Select a form field to be used as the Email Subject. If you want to use a CONSTANT value, simply create a hidden field with and enter in your desired subject as the field value.

Security Tab

File Filter
Specify allowable file types to be attached. Any files sent to you must be of one of the allowable types you specify in this field. Separate allowable types with the | symbol (Shift + \ on most keyboards)

Word Filter
A comma-delimited list of words ( or strings ) to be filtered out of any form submission. This is good for removing any spam injection related strings like "bcc:" or "to:".

Max Attachment Size
The max allowable size of each SEPARATE attachment here. (Note, if you have 3 file attachment fields and specify 10MB as your Max Attachment Size, that means each file may be up to 10MB - - or a total of 30MB for your form. Check with your host or ISP to make sure you don't exceed their maximum attachment size).

User Authentication
When authentication is ENABLED, users will need to supply a username and password before they can access your form. Add such username/password combos by pressing the + sybol at the bottom of the inspector.

SSL Mode
Enabling this feature will tell FormLoom to call any external scripts or stylesheets via HTTPS. Users should enable this if they are serving their FormLoom pages via a HTTPS (SSL) connection.

Code Tab

CSS Override Code
Customizing FormLoom forms is very *simple. All you need to do is use your own CSS code to override the default styles shipped with FormLoom. Just click on the Inspector icon, then the CSS tab, there you will enter in your custom CSS based off the classes and ids listed below...

  • #formloom-page# = id for wrapping div of all FormLoom content. 'page#' will actually be unique for each FormLoom page. ( i.e. formloom-page0 )
  • #fl-form = id for div wrapping form.
  • #formloom-header = id for FormLoom Header text or html.
  • #formloom-footer = id for FormLoom Footer text or html.
  • #formloom-ajax-form = form id for ajax version of FormLoom.
  • #formloom-form = form id for non-ajax version of FormLoom.
  • .fl-text = class for text input fields.
  • .fl-textarea = class for textarea boxes.
  • .fl-password = class for password fields.
  • .fl-multiselect = classfor multiple select boxes.
  • .fl-select = class for pull-down select menus.
  • .fl-required = class for Required Symbol.

* This is an advanced feature and requires general knowledge of CSS and HTML

PHP Override Code

This feature is for power-users that are very efficient with PHP. Any code entered here has the potential to break your form so USE IT AT YOUR OWN RISK!. If you have entered anything in this field, and your form stops working, then you are on your own. Do not send support tickets regarding this feature. Look at the output code and figure it out yourself. Not trying to sound harsh, but this is for experienced developers that need FormLoom to do a little extra.

So what can I do with this you ask? Well looking at the example below, let's assume you have a select menu named "department" and you want your form sent to a specific email address based on this input. Below may be a way you could do this.

switch($_POST['department'])
{
	case "sales": 
	$sendToEmail = "sales@yoursite.com"; 
	break;
	case "support":
	$sendToEmail = "support@yoursite.com"; 
	break;
	case "returns":
	$sendToEmail = "returns@yoursite.com"; 
	break;
	default: 
	$sendToEmail = "info@@yoursite.com"; 
	break;
}

BE CAREFUL! You are on your own with this one.

Style Tab

Style Settings
If you'd like to utilize custom style defaults for your field, enable custom styling. When enabled, the settings in the following fields can be modified: <

  • Font - Comma separated list of fonts -- fonts will be displayed (when available on client computer) in order listed. Hint: USE WEBSAFE FONTS.
  • Label Styling - define color and size for field labels
  • Subtext Styling - define color and size for field subtext
  • Input Styling - define color and size for field input (what the user enters)
  • Input Width - default width for all inputs
  • Starter Column Width - This setting will set the fixed with for the first column in your form.

Extras Tab

Redirect
FormLoom2 gives you the option to redirect users to separate pages upon successful or failed form submissions. Enabling redirects will override any custom success/fail messages you have established. You can select either another page in your RW project OR enter a full URL to redirect to.

Files

You can supply file attachments WITH email receipts if you like. Simply enable File Attachments and then use the + symbol to open the file browser and add desired files to send along with the receipt email. Some hosts may limit the size of receipt files which can be sent, so pay attention to file sizes.

PHPMailer
PHPMailer is an alternative mail script included with FormLoom as an option for users whose host will not work with the internal mailer. Use of PHPMailer is completely optional - but if you're having trouble getting your form to function once published, this is something you'll want to try. Additionally, PHPMailer supports direct connection to SMTP servers and SSL/TLS Authentication.

  • Use PHPMailer to Send Mail - Enabling this checkbox will enable PHPMailer script as your form's mailer.
  • SMTP - PHPMailer can send directly via php mail() (default) or optionally, via SMTP. Check this box to enable SMTP and provide credentials below.
  • Host Name - your SMTP server's host name [Ex: mail.yourdomain.com]
  • Host Port - The port your SMTP server accepts connections on. This will probably vary depending on whether or not you are using a secure protocol (see below)
  • Secure Protocol - If your host supports secure mail connections, select the proper protocol (SSL or TLS).
  • SMTP Authentication - Provide the username and password required to connect to your SMTP server.

Debug
The FormLoom script can capture and report error event data. Enable DEBUG mode to see error messages on-screen during form submission. If you'd like to receive email notifications when errors occur, enable Notifications and supply a valid email address.

Misc
Additional/advanced customization options

Required Symbol
The symbol that will appear next to form fields that you have designated as required fields. This is * by default.

Date Format
NEED INFO

Username Label
Text label that will be displayed next to username prompt if Authentication is enabled.

Password Label
Text label that will be displayed next to password prompt if Authentication is enabled.

Login Button
Text label that will be on the login button if Authentication is enabled.

Receipt Prefix
Text that will be prepend the Receipt Email's subject (Re: is standard US/English abbreviation for Reply and is a common prefix for the email subject line if it is a reply to an inquiry. For no prefix, simply leave blank.

Email Charset
If your language utilizes characters not supported by ISO-8859-1, which is the default setting, choose a compatible character set from the pulldown menu.

Transfer Encoding
If you have a specific encoding requirement or are connecting to an BITMIME SMTP server, you may need to update your encoding selection. The defualt will work for most users. If your mail host or an application you'll be working with to manage mail specifies alternate encoding, you can select your desired method here.

Calendar Locale
The language set that will be utilized for Datepicker field labels (ie, month, date, day of week name)

 

 

FormLoom 2.0.4 / Revision Date May 20, 2011

Have more questions? Submit a request

0 Comments

Article is closed for comments.
Powered by Zendesk