Forms & Customization

Forms Customizations and Layouts

28 views November 4, 2017 November 20, 2018 Hover Lead 0

Form customization is where you can control the design and behavior of a form.

You can customize you forms before or after serving them to your users.

There are few sections that you can customize and each one of them is in charge of different settings:

  • General Layout – setting the form position and behavior on the page that is hosting it.
    • Layout Position:
      • Popup – display it as a popup on top of the page (using lightbox).
      • Top – display it as a floating strip on the upper side of the browser.
      • Bottom – display it as a floating strip on the bottom of the browser.
      • Right – display it as a floating box on the right side of the browser.
      • Left – display it as a floating box on the left side of the browser.
      • Inline – display it inside an existing HTML element.
    • Enable Badge – Available only with Popup, Left and Right layouts – Determine if the form will have a badge (a call to action button) state or not.
    • Enable Badge Draggable – Determine if a badge on the form will be draggable by the user.
    • Start When Form Is Open – Available only when “Enable Badge” is on – Set if the form will load in open state, if not set – a badge or a strip will be displayed instead, and the form will be opened only after the user clicks on it.
    • Show Fields Labels – Determine if fields labels will be displayed or not.
    • Reset Form After Close – Determine if the form will clean its fields and revert back to its original position after being closed.
    • Resize to Window – Determine if the form size is relative to the browser window or to its container HTML element.
  • Form Display Timing
    • On Page Load – Form will be displayed when the hosting page loads (default).
    • On Exit Intent – Form will be displayed when the user exits the browser window with his mouse.
    • On Scroll – Form will be displayed after scrolling to a specific point (set by pixels).
    • On Click – Form will be display when the user will click on the configured HTML element.
    • After Time – Form will be displayed after a configured number of seconds.
  • Skins – Available suggested configurations of fonts and colors to match the hosting page.
  • Texts
    • Form Title – The title that will be displayed on the top for the form.
    • Badge Label – The title that will be displayed on the badge.
  • Colors – Set of colors for different parts of the form.
  • Positions – The position of the form and the badge.
  • Font – The font of the text to be used in the form.
  • More
    • Attach Form to HTML Element – The HTML element id, class or name to attach the form onto it.
    • Direction – Determine if the form will be displayed in a Right to Left or Left to Right format (also determine the alignment of the texts).

To update any of the form layouts configurations, please follow these steps:

  1. Click on “Forms” at the side bar
  2. Click on the “Settings” button of the form you want to adjust
  3. Click on the “Layout” tab
  4. Change any configuration using the list above
  5. Click on the “Update Layout” button

Note – when changing a form settings, you can use the “Preview Form” button to see the changes affected and the “View Live Form” button to see the actual form as it is displayed to your users.

Was this helpful?