Skip to main content
Act-On Software

Customizing Form Appearance and Functionality

AUDIENCE: Administrators, Web Developers

  • Learn  how to customize CSS for a form or implement JavaScript
  • Define options available for customizing Act-On 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.

To enable JavaScript support within a form's Section Heading rich text blocks, please contact Act-On Support and we will enable it for you (it is off by default unless otherwise requested). For further information, please see the article Using JavaScript in Email Messages, Forms, and Landing Pages.

  • Click on Content, and click Forms.
  • Hover over the form in question, click the Down-arrow and click Edit.
  • Click CSS.
  • 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
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
    • 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 need custom functionality within forms generated by Act-On, this is also possible via custom stationery, the External Web Analytics Support text area, or by entering JavaScript into the Section Heading rich text block (for Javascript usage in stationery or rich text blocks, please read the Using JavaScript article). 

Any HTML, CSS, or JavaScript will work within the External Web Analytics Support text area, since this is designed to accommodate multiple third-party analytics codes. Any code entered here will be embedded on the form web page (it will not be present on the form response web page -- if you need a script present there, you will want to have your form response page be an Act-On landing page or external web page). This will be inserted at the bottom of the document, close to </body>. Be sure to include <script> and <style> tags as needed.

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.


  • Was this article helpful?