The CAPTCHA object was designed to work in combination with (PHP) forms. It helps to stop spammers from submitting form data automatically. CAPTCHA (an acronym for "Completely Automated Public Turing test to tell Computers and Humans Apart,") dynamically generates an image with (random) letters and numbers.
The letters, because they're part of an image and not text, are difficult for a spambot or other computer program to read. Yet, a person has little trouble reading the letters in a captcha image.
Tip:
The CAPTCHA object must be part of a form. And because it uses PHP, it can only be used/tested on a web server with PHP support!
To be able to generate the CAPTCHA image the GD-library (version 2) must be enabled in your PHP setup.
In some cases an error message may be displayed on your website. The message is will look something like this:
Warning: imagepng(): Unable to open './captcha.png' for writing in /../../captcha.php on line x This problem may occur when the captcha script is placed in a folder on the website. The solution is to change the properties of that folder after publishing. The correct properties are 757 or 777. You can use the built-in FTP client to change the permissions of the folder.
Some web servers that do not allow to set the GDFONTPATH option.
In that case you can disable this option in Menu->Tools->Options->HTML
CAPTCHA image
Width
Specifies the width of the image Height
Specifies the height of the image Font type
Specifies the font used for the letters/number of the image.
Note that Web Builder will upload the selected font to your website, so PHP can use it to generate the image.
Font size
Specifies the font size.
Background
Specifies the background color of the image.
Generate random background
This will generate a random background with polygons and lines in different colors which is more difficult to read by spam bots.
Editbox
Offset
Specifies the offset between the image and the editbox.
Tip: If you enter a negative value, then the editbox will be positioned below the image!
Access key
This attribute assigns an access key to the object. An access key is a single character.
Pressing the access key gives focus to the element.
Tab Index
All elements (except hidden elements) in a form are part of the form's tab order.
When the user presses the Tab key, the browser shifts the input focus from element to element in order the elements appear in the HTML code.
However, sometimes you want the tab order to flow a little differently. In that case, you can number the fields using tabindex attribute.
Usually the first tabindex start on with value '1'. To exclude an element from the tab order, set the value of tabindex to 0. In that case the element is skipped when the user tabs around the form.
Title
Specifies the tooltip displayed by the browser
Validate
For more information about validation please read the ‘Form validation’ chapter.
Checkbox
Checkboxes are on/off switches that may be toggled by the user.
Use Check boxes if want to allow more than one item to be selected.
General
Name
Name of the checkbox.
Value
Value of the checkbox when it's switched on.
Initial state
Initial state of the checkbox.
Access Key
This attribute assigns an access key to the object. An access key is a single character.
Pressing the access key gives focus to the element.
Disabled
The disabled option disables the control for user input. Disabled controls do not receive focus. Disabled controls are skipped in tabbing navigation. The value of disabled controls will not be submitted with the form.
Tab Index
All elements (except hidden elements) in a form are part of the form's tab order. When the user presses the Tab key, the browser shifts the input focus from element to element in order the elements appear in the HTML code. However, sometimes you want the tab order to flow a little differently. In that case, you can number the fields using tabindex attribute. Usually the first tabindex start on with value '1'. To exclude an element from the tab order, set the value of tabindex to 0. In that case the element is skipped when the user tabs around the form.
Title
Specifies the tooltip displayed by the browser Use default browser styling
Normally it is not possible to change the appearance of a Checkbox with standard HTML. However WWB implements custom code to make it possible to customize the style (and size) of the Checkbox object to override the default browser appearance. This also make the Checkbox responsive so it can have a different size (and color) in breakpoints. If you rather use the standard browser style then this can be disabled with 'Use default browser styling'.
Validate
For more information about validation please read the ‘Form validation’ chapter.
Events
For more information about events please read the ‘Events’ chapter of this document.
Note:
Combobox
Used to allow users to make a selection from a number of different options.
General
Name
Enter an identifier for the field.
Note:
It's important to note that the element name must be in the form name[] for multiple selects! This way you'll receive the selected values in an array (this is a PHP feature).
Type
• Combobox
This will make the object a drop-down list. Only a single line is displayed at once.
• Listbox
This will make the object a standard list box. Multiple lines are displayed at once.
• Datalist (HTML5).
A datalist is a combination between a combobox and an editbox. The user can select data from a list or enter the value manually.
Allow multiple selections
Allows the user to select multiple items at the same time.
Elements
You can Add, Edit and Delete items that will appears in the list.
Add
Add a new item to the list.
Edit
Edit an existing item in the list.
Delete
Remove the selected item from the list.
Import
This option allows you to quickly import lists of predefined data. Select from many predefined values (countries, states, months, days etc) or import from an external file.
Import from external file
The file with items must have two items per line, separated by a semi colon: Item Text;Item Value
For example:
Afghanistan;Afghanistan Albania;Albania
Move Up
Moves the selected item up one position in the list.
Move Down
Moves the selected item down one position in the list.
Disabled
The disabled option disables the control for user input.
Disabled controls do not receive focus.
Disabled controls are skipped in tabbing navigation.
The value of disabled controls will not be submitted with the form.
Tab Index
All elements (except hidden elements) in a form are part of the form's tab order.
When the user presses the Tab key, the browser shifts the input focus from element to element in order the elements appear in the HTML code. However, sometimes you want the tab order to flow a little differently. In that case, you can number the fields using tabindex attribute.
Usually the first tabindex start on with value '1'. To exclude an element from the tab order, set the value of tabindex to 0. In that case the element is skipped when the user tabs around the form.
Title
Specifies the tooltip displayed by the browser Focus state
Removes the default outline styles and applies a box-shadow (with customizable color) in its place.
Validate
For more information about validation please read the ‘Form validation’ chapter.
Conditions
For more information about conditions and calculations please read the ‘Form Conditions’ chapter.
Events
For more information about events please read the ‘Events’ chapter of this document.
Note:
This control is normally part of a form.
Editbox
Single-line field that can be used to add name/e-mail address fields.
General
Name
Enter an identifier for the field.
Initial Value
Value that is initially display in the field.
Place holder (HTML5)
Specifies a short hint to help the user to fill out the input field. The text will disappear as soon as the user enters some text.
Max. Length
Specifies the maximum number of characters a user can enter into the editbox.
Type
• text
A plain text field.
• password
Makes the editbox a password field so any text entry is displayed as asterisks.
• color (HTML5)
The browser displays a visual color picker.
• date (HTML5)
The browser displays a date picker.
• datetime (HTML5)
Input field is for precise, absolute date and time stamps.
• datetime-local (HTML5)
Input field is for local dates and times.
• email (HTML5)
Input field is for email addresses.
• month (HTML5)
The browser displays a month picker.
• number (HTML5)
The browser displays a visual spin box.
• range (HTML5)
The browser displays a range selector.
• search (HTML5)
The browser displays a search input field.
• tel (HTML5)
The browser displays a telephone input field.
• time (HTML5)
Input field is a time input field.
• url (HTML5)
Input field is for web addresses.
• week (HTML5)
The browser displays a week picker.
Note: Currently only text and password fields are supported by all browsers. In other cases some
Disabled
The disabled option disables the control for user input. Disabled controls do not receive focus. Disabled controls are skipped in tabbing navigation. The value of disabled controls will not be submitted with the form.
Access Key
This attribute assigns an access key to the object. An access key is a single character. Pressing the access key gives focus to the element.
Alignment
Specifies the horizontal alignment of the input field.
Auto complete (HTML5)
Specifies whether the input field should have autocomplete enabled (if available in the browser).
Spellcheck (HTML5)
The HTML5 spellcheck attribute specifies whether the element is to have its spelling and grammar checked or not.
Readonly
The readonly option prevents the user from changing the value of the field, but not from interacting with the field. The user can still highlight the text for copying for example. Readonly elements receive focus but cannot be modified by the user. Readonly elements are included in tabbing navigation.
Readonly elements will be submitted with the form.
Tab Index
All elements (except hidden elements) in a form are part of the form's tab order. When the user presses the Tab key, the browser shifts the input focus from element to element in order the elements appear in the HTML code. However, sometimes you want the tab order to flow a little differently. In that case, you can number the fields using tabindex attribute. Usually the first tabindex start on with value '1'. To exclude an element from the tab order, set the value of tabindex to 0. In that case the element is skipped when the user tabs around the form.
Title
Specifies the tooltip displayed by the browser.
Focus state
Removes the default outline styles and applies a box-shadow (with customizable color) in its place.