Static elements in a web form
You can include elements with which the user has no interaction in the pages of the form; these are static elements such as images, HTML content, a horizontal bar, or a hypertext link. These elements are created via the first button in the toolbar, by clicking the Add static element menu.
The following types of field are available:
- Value based on previously provided answers (in the context of the form) or on the database.
- Hypertext link, HTML, horizontal bar. See Inserting HTML content .
- Image saved in the resource library or on a server accessible by users. See Inserting images .
Inserting HTML content
You can include HTML content in a form page: hypertext links, images, formatted paragraphs, video or Flash objects, etc.
The HTML editor lets you enter the content to insert into the form page. To open the editor, go to Static elements>HTML .
You can enter and format your content directly or display the source code window to paste in some external content. To switch to "source code" mode, click the first icon in the toolbar:
To insert a database field, use the personalization button.
The strings entered in the HTML editor are only translated if they are defined in the Texts sub-tab. Otherwise they will not be collected. For more on this, refer to Translating a web form .
Personalizing HTML content
You can personalize the HTML content of a form page with data recorded in a previous page. For example, you can create a car insurance Web form whose first page lets you provide contact information and the brand of the car.
Use personalization fields to re-inject the user name and selected brand into the next page. The syntax to use depends on the information storage mode. For more on this, refer to Using collected information .
For security reasons, the value entered in the <%= formula is replaced with escape characters. To avoid this, and only when necessary, use the following syntax: <%= .
In our example, the first and last name of the recipient are stored in a field of the database, while the brand of their car is stored in a variable. The syntax of the message personalized on page 2 will be as follows:
<P>Welcome <%= ctx.recipient.@firstName %> <%= ctx.recipient.@lastName %>,</P> <P>To start your customized study, please select your car <%=ctx.vars.marque%> and its year of purchase.</P>
This produces the following result:
Using text variables
The Text tab lets you create variable fields which can be used in the HTML between the <%= and %> characters with the following syntax: $(IDENTIFIER) .
Use this method to easily have your strings localized. See Translating a web form
For example, you can create a Contact field that will enable you to display the "Date of last contact:" string to the HTML content. To do this, follow the steps below:
- Click on the Text tab of the HTML text.
- Click the Add icon.
- In the Identifier column, enter the name of the variable
- In the Text column, enter the default value.
- In the HTML content, insert this text variable via the <%= $(Contact) %> syntax.If you enter these characters in the HTML editor, the < and > fields will be replaced with their escape characters. In this case, you need to correct the source code by clicking the Display source code icon of the HTML text editor.
- Open the Preview label of the form to view the value entered in the HTML:
This operating mode lets you factorize the text of Web forms and manage translations using the integrated translation tool. For more on this, refer to Translating a web form .
For images to be included in forms, they must be saved on a server that is accessible from outside.
Select the Static elements>Image menu.
Select the source of the image to be inserted: it can come from the public resource library or be stored on an external server accessible from outside.
If this is an image from the library, select it in the combo-box of the field; if it is located in an external file, enter the access path. The label will be displayed by passing the cursor over the image (coincides with an ALT field in HTML), or when the image isn't displayed.
The image can be viewed in the central section of the editor.