The Form Element.

The Form Element adds customizable form to your pages.

Webydo Support avatar
Written by Webydo Support
Updated over a week ago

Forms are used to obtain information the site visitor might want to provide, such as contact details and answers to online surveys, and register to events.

When a site visitor fills a form and clicks its Send button, a message is sent to a user-defined set of email addresses. In addition, the message is stored in the dashboard's Inbox. The message contains the information provided by the user.

You can add the email address and change the message sent on the right side panel when selecting the form element.

Building a form consists of adding form sub-elements: text boxes, drop-down lists, check boxes and radio buttons, as well as the shape, image and text elements. When you select the Form element, it already appears with a default text field and the Send button.

There is also an option to Add Integration which you can use to send successful form data to a third-party service.

Adding Fields

While the form element is selected, click or drag a new field into the form area from the right side panel

Click once inside the label text area or the text field area to select it, and use the sizing functions to change the size.

Text field

When you'd like to edit the text field properties simply double click on the field box itself, the properties will appear on the right.

  • Direction

You can change the typing direction from LTR to RTL

  • Type

You can change the field to "multi line" to allow for message fields

  • Validation

Select one of the options to have the form check the validity of the entry in the live website. For example, if you select E-Mail, the form will expect the visitor to enter the “at” @ character and a period. If not, an error message is displayed and the visitor is required to enter the data in the correct format.

  • Font and color

Select the font and color in which the entry will appear.

  • Field Space

This option sets the left margin of the data entered in the live website.

  • Predefined Text

Enter some text that will appear inside the text field as the user opens the form. This can be a help text that shows the user what to enter. For example, Enter your name here.

  • Required Field

If you check this box the site will not send the form if this filed is not filled, and will display an error message.

  • Error Message

If the user tries to send the form without entering data in a required field, the error message appears next to the relevant field. The message will not appear as default in the published site, it will appear only if the field has not been filled in correctly.

Multiple choice fields

All multiple choice fields (dropdown, checkbox, radio button) have the same settings, the main editable feature are the options of the field, they can be edited in the "items" list on the right side panel when the field box is selected.

  • List Space

Specifies the left margin of the list entries. The higher the value the more the entry moves to the right.

The Checkbox and Radio controls create a set of checkboxes and radio buttons, respectively. They are configured in the same way as Dropdown only the options appear as checkbox or radio button labels. Their tools and properties are the same.

  • Direction

Click the arrows of the Direction tool to change the orientation of the checkboxes.

  • Horizontal, Vertical

The Vertical tool re-arranges the checkboxes vertically. Horizontal restores the default disposition.

  • Checkbox Space 

This property works in the same way as the Stroke property and sets the distances between the boxes and the labels, as well as the top and bottom margins. The distances are kept separately for each Direction.

Form properties and send button

Click an empty area in the form to display its properties.

When a form is sent you have two options for confirmation.

Message on page displays a message that replaces the form on the current page. Click the Edit Message on Page button to display the message text.

The messages are Text elements: you can edit them and design them as you see fit. The frame itself may include the elements shown on the elements bar, which allow you to design a confirmation message to your taste.

Click Return to Form to quit the message and restore the form display

The Redirect Link option sends the user to one of the pages included in the site or to a page in an external site. Select Page and in the drop-down list that appears now select the page. Select Link and in the address box that appears now enter the address of the external page to which you want the user to switch.

Send Button

The button consists of a Shape element and a Text element. Edit them to your liking, make sure that the textbox always remains within the shape and do not attempt to separate the two.

Did this answer your question?