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.
- Click on Content, and click Forms.
- Hover over the form in question, click the Down-arrow and click Edit.
- In the Design tab, choose Form CSS.
- From this panel, you can modify the various classes utilized by Act-On forms.
Modify Form Functionality with JavaScript
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:
- Create your Form and embed it on an Act-On Landing Page as described here.
- In the Landing Page Composer, navigate to the Edit Form Block section
- Click on the Form Load JS tab and add your code
- 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
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.