Skip to main content
Act-On Software

Customizing Form Appearance and Functionality

 

If you routinely use the Act-On form editor, you may want to customize the appearance or functionality of forms beyond what the editor allows by default. With some CSS and JavaScript knowledge, just about any edit can be made.
  1. Click on Content, and click Forms.
  2. Hover over the form in question, click the Down-arrow and click Edit.
  3. Click CSS.
  4. From this settings screen, you are able to modify the various classes utilized by Act-On forms. Some fairly advanced edits can be made here, such as changing the form to be variable-width (adaptive, mobile-friendly).

Here is an overview of CSS classes:

Class Name Description
formField  
formFieldLabel  
formFieldSmall  
formFieldMediumLeft  
formFieldMediumRight  
formFieldLarge  
formFieldTextArea  
formFieldTextAreaSmall class on small text areas
formFieldTextAreaMedium class on medium textareas
formFieldTextAreaLarge class on large text areas
formFieldSectionDescription class on the section description
formField1Column class for one column checkbox/radio buttons
formField2Column class for two column checkbox/radio buttons
formField3Column class for three column checkbox/radio buttons
formInputBlock outer div for form fields where we define sizes

Additionally, if you have a style that you would like to frequently re-apply to multiple forms, you may want to create custom stationery.

Unlike stationery for message drafts/templates or landing pages however, forms have a few additional guidelines to keep in mind:

  • Act-On forms will always have the following two CSS files referenced in the form document head to define the default form style. These stylesheets can't be turned off (unless you remove their references with a script):
  •  formNegCap.css, located on http://www.subdomain.yourdomain.com/...formNegCap.css
    • This is to set a 'honeypot' hidden input on Act-On forms to 'display: none;' -- if you look at an Act-On form's HTML structure, you may notice that there is one extra unlabeled input below the Submit button. The idea behind this is that many bots designed to auto-submit forms will fill all form fields, whereas a human would not write data into hidden inputs. Therefore, if the Negative Captcha input contains data, we ignore the submission.

If you are embedding a form on a landing page, you can use JavaScript on the landing page to target specific areas of the form and change how they function. Because forms are generated on-demand for each visitor, they load separately from the rest of the page – this means that code must be entered correctly to ensure it runs after the form is loaded.

Please note: custom code can cause issues and should only be applied by professional web developers.

To target Forms embedded on Act-On Landing Pages:

  1. Create your Form and embed it on an Act-On Landing Page as described here.

  2. In the Landing Page Composer, navigate to the Edit Form Block section
  3. Click on the Form Load JS tab and add your code
    formjs1.PNG
  4. Click OK to save.

Note: If your Form is set to redirect to an external URL, Classic Form or Act-On Landing Page on submit, then any code you want to run once the form is submitted can be added directly to those pages

  • To apply code once a Form is submitted and redirects to a Rich Text Block (or Saved Rich Text Block), add your code in the ‘Form Submit JS’ tab
    formjs2.PNG

If you have highly-customized requirements for your web forms, or have existing web forms you would like to use with Act-On rather than using Act-On-generated forms, please see the article Posting External Forms to Act-On.