Support Center

Working with Forms

Last Updated: Jun 28, 2018 04:02AM EDT
You can add two types of web Forms that can help you interact with your site visitors or gather user information. The Form editor is very similar to the Text and Image editor.

To add a Form to your website:

  1. Click Elements > Forms at the Left Menu
  2. Drag-and-drop the element on page. Blue rectangles will appear to indicate the locations where a form may be dropped.

There are two ends in the Form editor - Layout and Form Properties. In the Layout you will configure the Form content and the Call To Action Button required for submitting the form. In the Form Properties section you will specify where the form is sent to.


Layout - Types of fields, checkboxes and buttons   

1. Text Field    

The Text Field may be used in your form to type text which is fairly short, and does not need to be split in lines. Now click over the Text Field you have added and you will see a set of options displayed in the right pane of the Form editor.

Type determines what information users should fill into this field.

  • Text: the text users fill in will appear just as they typed it
  • Password: the text will appear as **** so other users may not see it
  • Hidden: can be used when you need to gather system-related information (like IP or browser used to submit the form) or add data which users should not see. A hidden field will not be visible on the page.
  • File*: visitors can upload image, audio, video and other binary files to your site. When your site visitors submit to the form on your site you will receive an email with the information and a click-able link to the "File" they uploaded.
  • Name is used to identify the form field when you need to refer to it anywhere inside the form editor as well as in the email entry generated by this form. That is why each form field should have a unique Name.
  • The Width of the text box either by typing a different width number or by just dragging the resize controls of the field text box (the resize controls will appear when you click over the form field).
  • Max Length is the maximum number of symbols this form field can accept. Your form may visually be very short, but it will accept as many symbols as you define in Max Length.
  • Validate As field will let you define the type of content users are required to fill into this form field. If they don't fill in the proper content type - they won't be able to submit the form. E.g your form field Email may be validated to accept just content type Email. Thus if some user submits a form with incorrect email address (like me@yahoo or on trying to submit of the form the user will see a notice to correct the email. Most fields in the Form editor have Validate As option.
  • Hint is the text that will appear next to the field when the visitor clicks inside it. You can enter instructions or examples of the content that needs to be entered.
  • Default Value - This value will be pre-filled upon opening of the form and the visitor will be able to change it. The following special strings will be replaced with the corresponding values:
            $date  - Date in format YYYY-MM-DD
            $date_time  - Date and time in format YYYY-MM-DD HH:MM
            $browser_ver  - Browser version and type of operating syste
            $referrer  - The page the visitor came from (referrer page)
            $ip  - Visitor's IP address

*Files - In order to preserve the files sent via web form, the Form needs to be connected with a Database. Files that become part of the database will use the account storage and will remain accessible as long as they are in the Database. File links that are sent to an email do not use account space and therefore will expire in 2 weeks.

2. Text Area   

The Text Area form field is similar to the text box field but can hold longer, multi-line text. Click over the Text Area field you have in the Form to see its customization options displayed to the right. The options Name, Width, Hint, Validate As and Default Value are identical to those of the Text Field. In addition, here we have:

  • Height of the text area - you may change it either by changing the number in the height field or by dragging the text area size controls.
  • Wrap - defines the wrapping of the submitted form field text when displayed in an email or forum / blog. Choose Default value to have your browser and mail client (Outlook, etc) wrap the text according to their default settings. Set wrapping Off to disallow the wrapping of the text when it is typed. Choose Physical to display the text in the mail the way it was wrapped in the text area. Choose Virtual to allow the mail client to decide how exactly the text should be wrapped.

3. Checkboxes   
Checkboxes are used when there is a list of possible options and the user may select any number of choices from them. A stand-alone checkbox may also be used for a single option that the user may turn on or off. Checkboxes are available in the Form element found on the Left Menu > Forms. Select the element to see the customization options in the right panel.

  • The checkboxes, just like all other form fields, have a Name which identifies the field in the form template editor as well as in the email/blog entry generated by this form. You may consider the Name as the question your users will have to answer by checking or un-checking the checkboxes associated with it.
  • The Value of the checkbox is the answer you will get on your question. I.e if you set the checkbox value to Yes when the users checked this checkbox this means they answered your question affirmatively.
  • If you check the Selected by Default option, your checkbox form field will be initially checked when the users load your form.
  • And finally, if you make a checkbox mandatory users will be required to check it before being able to submit the form. e.g if you want them to agree to your Terms and Conditions before they may submit the form - add an Agreement checkbox and make it Mandatory.



4. Call To Action button   
The Call To Action button is essential to the Form. Without it your users cannot submit the form and it cannot complete its actions. It is automatically added in both the Form and Contact Form elements found on the Left Menu > Elements > Forms. To make it a Call To Action button for sending a form, click on it and from the Link drop-down menu select {Submit Form}. You can create a Form {Reset} button using the same process. Use the editable field in the right panel to change the Caption text the button will display.


Call to Action Button Properties and Layout

Button Caption: Define the text that will be visible on the button.
Size: Choose from three pre-defined button sized - small, medium, large.
Color: Choose from three pre-defined colors for the button.
Alignment: Specify the button alignment inside the content - left, centered, right.


Form Properties

Access the Form Properties by clicking on the Form Settings button on the Right properties panel .

1. Next Page: define which page from your site should open after successful submission of the form (it may be a 'Thank You' page for example) or leave empty.

2. Send to Email
To send the content of your form to your email use the Send to Email feature.

  • To Email: Specify the address To which submitted forms should be addressed. We can display customer submitted details by applying $xxxxx$ wildcards for the special values of the corresponding Form Field Name.
  • From Email: Specify the address From which the form will be sent. This can be your own specific email address, or we can display customer submitted details by applying $xxxxx$ wildcards for the special values of the corresponding Form Field Name.
  • Mail Subject: of the email that will be received on submission of the form (like New Information Request). We can display customer submitted details by applying $xxxxx$ wildcards for the special values of the corresponding Form Field Name.

Liquid error: undefined method `gsub' for nil:NilClass
seconds ago
a minute ago
minutes ago
an hour ago
hours ago
a day ago
days ago
Invalid characters found