PHPForms incredible and simple web form builder

Managing Forms

2.2 Editing a form



Form Editor or Form-Builder can be called by clicking Create a new Form button or selecting Edit option for any of Forms List items.

form editor


Form-Builder consists of workspace and toolbox.

Workspace is an area of Form-Builder interface which displays form elements added to the forms, some options to apply to them and allows to adjust their layout by drag-n-dropping the elements.

workspace


Toolbox consists of 3 tabs: Add Field, Element Properties and Form properties.
Add Field tab provides a list of form elements available. Clicking on a certain element button adds this element to the form and it appears on workspace at once. By dragging the element from Add Field tab to the workspace you will get the same result.

add field


Element properties tab is a tool to adjust properties of form's element such as Label, Value, Validation Properties etc. Element properties are different for each of form elements.

Element properties


Form Properties tab provides a set of fields to adjust the form: Form name, description and others.

Form Properties


2.2.1 Form Properties



Here is the list of properties every form possesses and the respective fields of Form Properties tab.
Form name field can take any text value. It is shown as a form title to visitors and is used as a name of Forms List item.

list of properties


Description field can take any text value. It is shown as to visitors and displayed in the Forms List.

description


Message displayed after submission field take any text value. It is a message shown to visitors every time the form is successfully submitted.

thank you message


Forms Options section contains several more fields.

Form color is a picker-widget to adjust color-scheme of the form.

color of your form


Form width field defines the width of the form. You can input your values in pixels.

width of the form


Ultimate SPAM protection is a check-box which switches on/off reCAPTCHA test for the form. It is a system that uses CAPTCHA to help digitize the text of books while protecting websites from bots attempting to access restricted areas. You must be registered at reCAPTCHA to use this preference. There are also fields to input Public/Private Keys.

spam protection


Limit to one entry per IP address check-box forbids visitor to submit the form twice using the same IP-address.

ip address


Back to form option is checked by default, which means visitors will stay on the form page after form is submitted. When this option is unchecked, you can input special URL user to be redirected to.

Back to form


Send to e-mail option is unchecked by default. When this option is checked, you can input e-mail address you need the submissions to be sent to. You can also choose E-mail template to customize the submission fields and format of email: HTML and attachment.

Send to e-mail


2.2.2 Text Field



Text Field is a common GUI widget which allows visitor to input text values. It is a single line text area which can contain up to 255 symbols.

text field


Element Properties tab for Text Field provides the following controls to adjust the element.

Label field can take any text value. It is shown as a name of the field.

text field properties


Value field allows to predefine the content of the field.

Value


Validation Rules drop-down menu is to set a format of values allowed to input.

validation


Equal To Value Field allows to realize verification of the text field content with respect to another text field. Right after you select this option, Equal To Field drop-down menu appears. It provides a list of another text fields added to the current form. You can choose any of them to compare the values.

Equal To Value Field


Required option marks the field as essential one.

Required


To specify minimal and maximal length of the text field string use Limit option.

field length


2.2.3 Radio Button



Radio button is an element which allows the user to choose only one of a predefined set of options.

radio button


Element Properties tab for Radio Button provides the following controls to adjust the element.

Label field can take any text value. It is shown as a name of the field.

label


Predefined List allows to apply ready selection options list to the widget.

create predefined list


use ready list


Selection options can be also added manually.

Similarly to other elements Radio Button can be marked as essential one. It also supports other field option which allows visitor to input his own value not mentioned in the options list.

radio button


input own value


You can also select where to place the radio buttons using Control Position section.

radio buttons


control position


Direction option allows to choose vertical or horizontal position for items

position


positions


2.2.4 Check Boxes



Check Box control which can be clicked upon to select or deselect an option. Multiple check boxes in a group may be selected.

chek box


Check Boxes are very similar to radio buttons. The only difference is that Check Box allows to select several options simultaneously, so Check Box properties are same to the Radio Button, except Field check control.

check box


With Field check option you can control the amount of options visitor is allowed to select.

2.2.5 Text Area



Text Area is a common GUI widget which allows visitor to input text values. It is a multi-line text area which can contain up to 255 symbols.

text area


Its properties are similar to the Text Field: Label, Value, Validation Rules, Check it, Limit.

2.2.6 Password



Password element is a particular case of Text Field. The only difference is its input type which makes the data obscured as it is entered.

password


Obviously, there is no use of checking the password to match email format. So Password properties are similar to the Text Field, the only difference is that Validation Rules has no Email option.

password field


2.2.7 Select Box



Select Box (drop-down menu) is one more multiple selection widget which allows the user to choose one value from a list. When a drop-down list is inactive, it displays a single value. When activated, it displays (drops down) a list of values, from which the user may select one. When the user selects a new value, the control reverts to its inactive state, displaying the selected value.

select box


The only preferences of Select Box element are Label, Predefined Lists, Options and Check It.

preferences of select box


Similarly to other multiple selection elements Label determines the name of the element, Predefined lists allows to select some predefined sets of options, which can be also added manually with Options field. Just like any other element Select Box can be marked as essential with Check it option.

2.2.8 Line



Line is a horizontal line in an HTML page. This element can be used to separate content in a page.

line


It's properties are Label, Style, Color and Width.

Line style allows user to choose any of the dashes available.

Color picker-widget allows to choose a colour of the line, and width option helps to adjust the width of the dash.

color picker

2.2.9 Multiple Choice



Multiple Choice is a widget that allows the user to select one or more items from a list contained within a static, multiple line text box.

multiple choice


It's preferences are common for all multiple selection widgets (Check Boxes and Radio Buttons) Label, Predefined Lists, Field check, Options and Check it.

preferences


2.2.10 Confirmation Box



Confirmation Box is a group of standard GUI elements which allows to check visitor's consent to some rule or statement.

confirmation box


It's preferences are Label, Value, Confirmation message and Height.

preferences of the field


Value allows to input a text of Statement the visitor will be asked for his consent to. Confirmation message helps to adjust the message shown to user near the check-box. Height option provides a facility to specify the height of Statement textarea.

2.2.11 File Upload



This input widget automatically creates a text field and a "Browse" button that the user can click in order to select a file to upload from his local hard drive.

file upload


It's preferences are Label, Max file size, File extensions and Check it options.

file extention


Max file size is to input maximum size of file allowed to upload. File extensions can be specified by inputting them divided by spaces into the corresponding option field.

2.2.12 HTML



HTML widget allows visitor to embed interpretable HTML-code into the form.

html code


This element has 2 adjustable preferences: Label and Value.
Label can be disabled not to be shown to visitors. Value option contains the code needed to be interpreted.

Label


2.2.13 Date



Date element is a set of inputs which allows visitors to input date and time values.

date


It can be adjusted with several specific options: Date Format, Time Format, Range of years, Calendar and Default Time.

date options


Date Format option allows to select one of 2 date formats: days/months/years or months/days/years.

date format


Time Format option provides 3 choices: 24-hour time format, 12-hour time format and option to disable Time fields of Date Element.

Calendar option enables date-picker tool.

time


Default time option automatically inserts current time value into the form.

Range of years field specifies minimal and maximal years value allowed to input.

range of years


2.2.14 Phone



Phone element is a text-field with pre-designed rules of data-format allowed to input.

phone field


Its only preferences are Label, Format value and Check it option.

Format value provides several choices +## (###) ###-#### / (###) ###-#### or none.

phone value


2.2.15 Section Break



This element is just another way to embed your HTML-code to the form and it also divides the form into sections.

2.2.16 Page Break



Page Break element allows to divide the form into separate pages.

page break


The only property of the widget is Label which allows to specify your own next-page button message.

next page