Setting Field Labels to Float to the Left of the Input - Classic Forms Only

With the Act-On form CSS editor or custom stationery, it is possible to set the label of your form's inputs to float to the left of the input.

By default, labels are located above the input.

Furthermore, the CSS example below will also enable your form's input labels to automatically move back above your form's inputs on narrow (smartphone) screens when combined with the Form CSS options to enable adaptive width inputs.

1. Open the form editor for your form.
2. In the Step 1. Layout section of the editor, open the CSS editor by clicking the CSS button at the top of the window.
3. In the CSS editor, place the following into the Field Label Style text area (in the Form Field Styles category). This corresponds to the .formFieldLabel CSS class. This will set your labels to the left of the input on One Line Text fields of small or medium width.

   margin-top: 3px;
   margin-right: 3px;
   float: left;
   width: 80px;
   

4. Next, scroll down to where you see the 'All Fields - Success Icon' text area (in the Error Handling Support category). This corresponds to the .formFieldLabelGood CSS class, and prevents the error image that Act-On shows when invalid inputs are detected from causing layout changes.

    padding-bottom: 2px;
   background: url(/acton/image/12x12yes.gif) center right no-repeat;
   float: left;
   background-position: 50px 0;
   margin-top: 3px;
   margin-right: 3px;
   width: 80px;

5. The same should be done for the 'All Fields - Error Icon' text area (which is directly below 'All Fields - Success Icon'). This corresponds to the .formFieldLabelBad CSS class, and prevents the error image that Act-On shows when invalid inputs are corrected from causing layout changes.

   padding-bottom: 2px;
   background: url(/acton/image/12x12no.gif) center right no-repeat;
   float: left;
   background-position: 50px 0;
   margin-top: 3px;
   margin-bottom: 3px;
   width: 80px; 
   

6. When an input is validated, the .formFieldLabel class becomes either .formFieldLabelGood or .formFieldLabelBad which is why you must ensure that the Good/Bad class has all the same styles as the default .formFieldLabel class. 

If you would prefer to embed the above inside Custom Stationery, you would instead paste the following into your stationery's <style> section inside its HTML file:

.formFieldLabel 
{
margin-top: 3px;
margin-right: 3px;
float: left;
width: 80px;
}
.formFieldLabelGood
{
padding-bottom: 2px;
background: url(/acton/image/12x12yes.gif) center right no-repeat;
float: left;
background-position: 50px 0;
margin-top: 3px;
margin-right: 3px;
width: 80px;
}
.formFieldLabelBad
{
padding-bottom: 2px;
background: url(/acton/image/12x12no.gif) center right no-repeat;
float: left;
background-position: 50px 0;
margin-top: 3px;
margin-right: 3px;
width: 80px;
}

 If you hope to combine this with stationery that also converts your form inputs to be variable width, please see this example stationery and you can easily paste the above into this stationery file's <style> section.

Other notes:

• The form appearance above contains no additional custom styling. If you wish to change the general appearance of the form inputs and labels (e.g., increase their size, use custom fonts, add hover-effects, add backgrounds, etc.) see the article Customizing Form Appearance and Functionality.
• 'width: 80px' may need to be adjusted if your labels are especially long or your font size is larger
• 'background-position: 50px 0;' controls where the error-image appears when invalid entries are detected. You will also likely need to adjust this. It is an X-Y position, so the example of '50px 0' indicates that the image is pushed to the right along the X axis by 50px and is not moved along the Y axis.
• Likewise, 'margin-top: 3px;' and 'margin-right: 3px;' may also need adjusting