Enter Promo Code

Submit

Adding form fields to FormBuilder

FormBuilder is a script that generates self-validating AJAX web forms by specifying their fields as regular PHP arrays. FormBuilder can handle text boxes, text areas, select dropdowns, check boxes and radio groups. This article is about configuring the form by adding or editing existing form fields.

This article is about adding and editing form fields in FormBuilder. See the more basic configuration options.

The configuration file of the script is located at assets/includes/config.php. To add fields to the form, you need to assign them to the $config['fields'] array. You can see a sample conifguration below:

You can see the configuration of a sample form below:

$config['fields']	= array(
	array(
		'label' 	=> 'Your name',
		'type'		=> 'textField',
		'required'	=> true,
		'errorText'	=> 'Please enter a valid name.',
		'fromName'	=> true
	),
	array(
		'label' 	=> 'Email',
		'type'		=> 'textField',
		'required'	=> true,
		'validation'	=> 'email',
		'errorText'	=> 'Please enter a valid email.',
		'fromEmail'	=> true
	),
	array(
		'label'		=> 'Subject',
		'type'		=> 'select',
		'default'	=> 0,
		'items'		=> array(	'Please Choose',
        					'Business proposition',
        					'Partnership',
        					'General Inquiry'),
	),
	array(
		'label' 	=> 'Message',
		'type'		=> 'textArea',
		'required'	=> true,
		'errorText'	=> 'You are missing a message.'
	),
);

To add new form fields, just add more arrays to $config['fields']. It might look a bit intimidating at first, but once you grasp the idea, there is practically no limit to building everything from simple contact forms to huge self-validating surveys.

Each field type has the following properties in common:

Property Name Possible Values Explanation
label arbitrary text, html This is the textual label that is displayed next to the field.
type textBox, textArea, select, radio, checkBox This property specifies the type of the field. The different field types are explained in detail in the next section.
required true / false Whether the field is required. If set to true, a red star will be displayed next to the label and the form will raise validation errors if empty. The errorText property is used to define the message that is shown to the user.
validation email, url, phone, zip, date, time, custom regex The validation property defines how FormBuilder is going to validate the data entered into the field. A few validatoin rules are provided for your convenience (listed in the possible values to the left), and you can provide your own custom regex by passing it as a string. If an error is encountered, the errorText property is displayed to the user.
errorText arbitrary text This is the message that will be shown to the user if they fail to enter correct data into the field (the field either failed validation, or is left blank when marked as required).
fromName true / false This is a flag, which tells FormBuilder that the contents of this field is to be treated as the name of the person who sends the message. This will also be the name from which the email is sent. False by default and should be provided only once in the form.
fromEmail true / false The same as above. This is needed, because you could collect more than one email in your forms, and explicitly set which one is to be used as the originating address for the email you will receive in your inbox.
items array of strings This property is only required by select and radio fields. It provides a set of items to be included in the dropdown list (in case of the select), or as radio buttons in a radio group.
default number, zero based This field is only applicable to a select input. It specifies which item of the items array should be treated as the default, initially selected element.

If you mark a select item as required, and the default field is the currently selected one, this would mean that the user has not selected anything and a validation error will be displayed. You would usually mark the "Please choose" item of the dropdown as the default one (note that this is a zero based number, the first element of the items array has the index 0).
value text or number This is the default value that is displayed inside of the individual fields. For a textBox / textArea fields, it is treated as text inside the field. For select this is the zero-based index of the selected element from the dropdown. For radio this is the zero-based index of the selected radio button. For checkBox this is either true or false (the check box will be either checked or unchecked).

Supported Field Types

Form builder supports several types of form fields (specified in the type attribute of each field in the config file):

All of these fields support the list of properties in the above table and you can easily add validation and labels to every one of them. Adding a new field will automatically include it in the email you receive.

Examples

Create a required radio group with three radio buttons and an error message:

array(
    'label'	=> 'Choose a Family Member',
    'type'	=> 'radio',
    'items'	=> array('Mother','Father','Child'),
    'required'	=> true,
    'errorText'	=> 'Please choose a family member'
)

Create a textBox with custom validation regex, error message and default text:

array(
    'label' 	=> 'Your City (in capital letters)',
    'type'	=> 'textBox',
    'value'	=> 'NEW YORK'		// default text
    'validate'	=> '/^[A-Z]+$/',	// will accept only capital letters
    'errorText'	=> 'Please only use capital letters!'
)

Create a mandatory checkbox (e.g. agree with our terms):

array(
    'label' 	=> 'I agree with <a href="http://example.com/tos">Site's Terms</a>,
    'type'	=> 'checkBox',
    'required'	=> true,
    'errorText'	=> 'You need to agree with our TOS in order to use our services.'
)

Embedding your forms

And now that you've created and configured your form, you can embed it into any page you want (even on a different domain)!