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.
Disclaimer: This article refers to Classic Forms, a legacy feature no longer available for new accounts. Classic Forms has limited support. For more information on our newest Forms Composer, see Forms Composer User Guide.
Instructions
Using Custom Stationery
- 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.
Using Form Editor CSS
- 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.
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