Skip to main content
Act-On Software

Setting Field Labels to Float to the Left of the Input

AUDIENCE: Web Designers, Web Developers, Marketing Users or Administrators comfortable with CSS
OBJECTIVES: Provide example code to set the label of a form input to float to the left of the input, rather than remaining on top of the input as it is normally positioned

 

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.

Important note:

The following code sample is compatible with the form's One Line Text input block type in medium or small widths only. Also, please note that this will not apply to the default Name & Email block that an Act-On form automatically contains (which includes the first name on the left, last name on the right, and email address below that).

  • Open the form editor for your form.
  • In the Step 1. Layout section of the editor, open the CSS editor by clicking the CSS button at the top of the window.
  • 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;
  • 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;

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; 

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.

Result:

  • 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

 

 

  • Was this article helpful?