Commands in the Style section

Step 4 - Pages > Contact Form Object >

Commands in the Style section

Previous pageReturn to chapter overviewNext page

Use the commands in this section to set the style of the contact form you are creating.

First of all, select the Form Item you want to work on: choose it from the drop-down menu or click on the item in the preview.

You can customize these items:

Labels: this is a descriptive text of the field and it either indicates what information is required, or it asks a question.

Fields: this is where the visitor enters the necessary information.

'Send' button: these buttons are added automatically at the bottom of the contact form. They send the form or clear all the fields, respectively.

Field Description and Validation: these are messages that may be displayed while the form is being filled in. They give extra information, indicate incorrect data or remind the visitor that a mandatory field has not been filled in.

The options available for these items are in the Style section and the ones you see depend on the selected item.

The options for the Labels are:

Font Type: specifies the font, style and size to use for the text. The menu shows the command for applying the Default Font (defined by the style of the Page Text item in the Text Style window), the list of safe fonts (those which are present on all devices and do not need to be published, and all the Google fonts and web fonts added in the Add web fonts window, which is opened by the Other font types command.
Color: specifies the color to use for the text.
Repeat: you can indicate where the field labels are to be. There are 3 choices: Display Labels above the Fields, Display Labels inside the Fields and Display Labels on the left of the Fields. If you choose to have labels on the left of the fields, you can specify the Width (%) as a percentage of the row in which it appears, and the Alignment of the labels.

The options for the Fields are:

Border: this specifies the thickness of the borders and the corner bevel, as a whole or singularly.
Margin: this sets the inner margin (in pixels) around the text in the form fields.
Drop Shadow: applies a shadow inside the fields to give an impression of depth.
Colors: this defines the colors to be used for the Background, Text and Border of the fields in their various states (Field, Selected field, Field error).

The options for the 'Send' button are:

Content: this specifies the text on the OK button, to replace the default text.
Font Type: specifies the font, style and size to use for the text. The menu shows the command for applying the Default Font (defined by the style of the Page Text item in the Text Style window), the list of safe fonts (those which are present on all devices and do not need to be published, and all the Google fonts and web fonts added in the Add web fonts window, which is opened by the Other font types command.  
Text Color / Background Color: these specify the colors to use for the buttons' texts and backgrounds.
Border: this specifies the color and thickness of the borders and the corner bevel of the buttons.
Margin: this sets the inner margin (in pixels) around the text in the buttons.
Background Image: indicates the image file (.JPG, .GIF, .PNG.) for the picture to use as the background.
Alignment: specifies how the buttons are to be aligned. Choose Left, Center or Right.

Finally, the options for the Field Description and Validation are:

Field Description icon file: you can import a graphic file (in .JPG, .GIF and .PNG format) to use as an icon next to the field, indicating that further information is available.
Show the Description when the Field is selected: select this option if you want a message with more information to be displayed automatically when the visitor clicks inside the field.
If an error occurs during data validation: you can choose how the default message is to be displayed when a field is filled in incorrectly, or when a mandatory field has not been filled in. You can choose from Display the Browser's dialog window, Display internal popup window or Show Tip next to invalid Field.

 


Best practices:

-

How to work with the Contact Form Object