Note: You must have the PageFabric.Dependencies.Forms Web Package in your website for the Forms to work correctly. You can download it directly from the application, read this article to learn how.
Building forms in PageFabric
This article describes how to add forms, form fields and how to connect them to an API to receive data.
Forms
To use form fields and sections, you must place a Form area first.
After having placed a Form area, you'll be able to add children inside it.
Note: It is important that all your fields and sections are in a Form area part. This is how HTML works.
Forms properties
To edit form properties:
- Select a form on your page
- Click on Form tools ribbon tab, then click the Form properties button
- The Form properties dialog opens
Property | Description |
Send URL | The URL to Post the form using Ajax |
Success message | The message to show when the form is sent successfully |
Fail message | The message to show if a problem occurred |
Json entity list name | The name to be used during form serialization |
Important: Due to browser security restrictions, most "Ajax" requests are subject to the same origin policy; the request can not successfully retrieve data from a different domain, subdomain, port, or protocol.
Sections
Form sections can help visually organize fields by categories. Form sections also support Repeater behavior, it is useful if you want your visitors to be able to add multiple items, such as products, depending on the subject of your forms.
Sections properties
To edit section properties:
- Select a form section on your page
- Click on Form tools ribbon tab, then click the Section properties button
- The Section properties dialog opens
Property | Description |
Json entity list name | The name to be used during form serialization to store sub items |
Allow repeat | Enable this option to allow the section to be repeatable |
Make a section repeatable
In some cases, you may want your visitors to be able to add multiple items using a single section (products, people identification...).
Using the visual editor
To add a row to a repeatable section using the visual editor, follow these steps:
- Make sure your form section has a unique Id on your page
- Select the form section
- Click the Form tools ribbon tab, then click the Section properties button
- Enable the Allow repeat option
- Click OK to close the dialog
- Add a button under the section (not inside the section, because all the section content will be duplicated and we don't want to duplicate the button)
- Select the button
- Open the Button properties panel
- Add two custom attributes with the following settings:
Attribute name | Attribute value | Description |
forms-btnclickaction | addSectionRow | This will tell the button to add a row to a section when it is clicked by the visitor |
forms-sectionid | YOUR SECTION ID (Type your section id here, see step 1) | This will tell the button that the corresponding section is the one you specify |
Note: Attributes names should be suggested automatically by the application. If it's not the case, please make sure you have installed the PageFabric.Dependencies.Forms Web Package.
Using code (PageFunctions)
If you prefer to use code to add a row to a repeatable section, you can use the following Javascript peace of code in your PageFunctions file.
PageFabric.Forms.appendSectionRow("__YOUR_SECTION_ID__");
Fields
PageFabric supports various types of fields:
Field type | Description |
Text input | Default field, supports any kind of alphanumeric data |
Numeric field | Only supports numbers |
Date field | Helps the visitor enter a date using a date picker* |
Phone number | Helps the visitor enter a valid phone number* |
Multiline text input | Allows the visitor to type several lines of text |
Radio buttons | Shows a list of options as radio buttons; Only one option can be selected |
Check boxes | Shows a list of options as check boxes; Several options can be selected |
Drop down list | Shows a drop down list with several options; Only one option can be selected |
* We use native browser fields type. Some browsers may not apply the desired type and simply use a default text input.
On mobile devices, browsers transform specific fields to have a better user experience.
Fields properties
You can edit several properties for each kind of field. To edit field properties:
- Select a field on your page
- Click on Form tools ribbon tab, then click the Field properties button
- The field properties dialog opens
This tab contains general properties for the selected field.
Property | Description |
Field technical name | The name of the field when the form is sent (not visible by the visitor) |
Title | The title of the field on the page that is visible by the visitor |
Description | A short description of the field to help the visitor understand what he has to type |
Note: The technical name is the key that will be used when the form will be sent, read Receiving data for more information.
Note: Some properties depend on the type of field you are editing.
This tab contains display properties, that helps you customize the way it will be rendered.
Property | Description |
Layout | The appearance of the field area; You can choose to stack the Title/Description block horizontally or vertically |
Text area height | The height of the text area when the field is a Multiline text input |
Note: Some properties depend on the type of field you are editing.
This tab contains validation properties, that helps you ensure that the visitor will input valid information before he can send the form.
Property | Description |
Required field | Enable this option if the field must be filled to send the form; When enabled, you can set the error message that appears if the field is empty |
Dynamic validator | Enable this option to apply a format validation of the data before the form is sent. Select the kind of format you want to check, see the list below |
Check data length | Enable this option to check the length of the data, for example to force the user to input between 4 and 10 characters |
Note: Some properties depend on the type of field you are editing.
Native Dynamic Validators
Here is the list of dynamic validators that are natively supported by PageFabric (using the PageFabric.Forms Web Package). You can add more formats by downloading more Web Packages.
Validator | Description |
Email | Checks if the data is a valid email address, such as xxxx@xxxx.xxx |
Url | Checks if the data is a valid URL, such as http[s]://xxxx.xxx |
Letters only | Checks if the data contains only letters |
No white space | Checks if the data does not contain any white space |
Alphanumeric | Checks if the data contains only alphanumeric characters |
Number | Checks if the data is a number |
Digits | Checks if the data is only composed of digits |
Note: We use the JQuery Validation Plugin for this feature. You can check their online documentation for more technical details.
This tab contains advanced properties, such as accessibility features.
Note: Some properties depend on the type of field you are editing.
Buttons
Submit the form
To add a submit button, follow these steps:
- Add a button to your Form part (the button must be inside the Form - green area in the visual editor)
- Select the button
- Open the button properties panel
- Add the following custom attribute:
Attribute name | Attribute value | Description |
forms-btnclickaction | submit | This will tell the button to submit the form when it is clicked by the visitor |
Reset the form
To add a reset button, follow these steps:
- Add a button to your Form part (the button must be inside the Form - green area in the visual editor)
- Select the button
- Open the button properties panel
- Add the following custom attribute:
Attribute name | Attribute value | Description |
forms-btnclickaction | reset | This will tell the button to reset (clear all fields) the form when it is clicked by the visitor |
Testing the form and receiving data
Once you have created your form, you can test it using the Forms Tools > Test form button.
It will open the following dialog:
This dialog helps you to test your form before you publish your website.
On the right side, you can generate the Json feed that will be sent to your service using the real values you entered on the left side.
You can use this feed to test your service on a dev environment for example.
As PageFabric doesn't produce server code, you have to create a service that receives the produced Json feed and deploy it on a reachable web server.
Important: Due to browser security restrictions, most "Ajax" requests are subject to the same origin policy; the request can not successfully retrieve data from a different domain, subdomain, port, or protocol.