Forcing Left Alignment on Classic Forms

If you do not want to use stationery that doesn't center content such as 'Stock: None', you can make this change via the one of the methods described below. There are two ways to accomplish this: via Custom Stationery or through the Form CSS editor. 

The steps to force left-alignment of form fields are listed below. Please choose one of the two options (custom stationery or the form editor CSS option), as they accomplish the same goal.

Custom stationery option

• Create custom stationery for the form with the Stationery Builder or use pre-existing stationery.
• Click Edit HTML.
• Locate the <style> block in the body section.
• Make a space after the other closing CSS selectors (ending in "").
• Add the following inside the style tag:

  • #ao_alignment_container, #layout td { text-align: left !important; }
    

• If you wish to modify an existing stationery style, open the form with the stationery applied and re-save it to refresh the stationery applied to it.

Form editor CSS option

• Click on Content, and choose Forms
• Open an existing form or create a new form.
• In Step 2, click CSS.
• In any of the CSS text boxes, paste the following (if there is already code in the text box, paste this at the end of it):

  • } #ao_alignment_container, #layout td { text-align: left !important; 
    

Note how the closing '}' is not present and there is an extra '}' at the beginning. This is a trick for adding new classes into the CSS editor. It works by closing out the editor-provided class and beginning a new one in its place. Do not overwrite any existing CSS in the editor unless you are certain it can be removed.

Explanation

For those who would like to understand why we are using this CSS:

<div id=“ao_alignment_container” align=“center”> is a component of the form HTML assembled by Act-On that is seen when using the 'view source' on the completed form (via a web browser). This is a wrapper for the form that opens at the beginning of the form and closes toward the bottom. This draws boundaries around all the assembled form inputs and text areas to center-align everything. It isn’t shown in stationery and is instead added by the Act-On web page document assembler, but you can modify its style by adding a CSS selector for it inside the stationery, as shown above. 

In you have HTML/CSS knowledge and you would information on other edits that are possible, please see the article Customizing Form Appearance and Functionality