Some form stationeries (stock and custom) include form text and inputs that are centered (or somewhat centered). There is a way to ensure everything is left-aligned via some manual CSS entry.

If you do not want to use stationery that doesn't center content such as 'Stock: None', you can make this change via 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 the 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.

Instructions

Using Custom Stationery

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

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

6. 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.

Using Form Editor CSS

1. Click on Content, and choose Forms
2. Open an existing form or create a new form.
3. In Step 2, click CSS
4. 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.

Why are we using this CSS?

<div id=“ao_alignment_container” align=“center”>

This div element is a component of the form HTML assembled by Act-On that is seen when using 'view source' on the completed form (via a web browser). The element is a wrapper for the form that opens at the beginning of the form and closes toward the bottom.

Drawing boundaries around the assembled form inputs and text areas center-aligns 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. 

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