Add Labels Above Form Fields

How to Add Labels Above Form Fields

By default, form labels appear inside the fields for UI and conversion optimization. However, if you’d like to move the labels above the fields, you can do so using custom HTML and CSS. Follow the steps below to make this adjustment.

Steps to Add Labels Above Form Fields

1. Go to the Relevant Step:

• Navigate to the form step where you want to adjust the label placement.

2. Access the Advanced Settings:

• Scroll to the Advanced section of the form settings.

3. Enable Custom Code:

• Expand the Step Teaser Text option.

• Toggle the Custom Teaser Code switch to ON.

4. Add Custom Code:

• Copy and paste the following CSS code into the provided custom code area:

 

  
.leadforms-input-text-wrapper {
&:has(.leadforms-input-text-inner:focus, .leadforms-input-text-inner:valid)
label.form-control-placeholder {
transform: translate3d(0, 0, 0) !important;
}
}
/* Wrapper for form properties */
.leadforms-props {
position: relative !important;
margin-bottom: 20px !important; /* Adjust spacing between fields */
}

/* Neutralize .form-control-placeholder */
label.form-control-placeholder {
position: static !important; /* Reset positioning */
top: auto !important; /* Remove the floating top value */
left: auto !important; /* Reset left alignment */
padding: 0 !important; /* Remove padding */
font-size: 14px !important; /* Keep consistent font size */
color: #333 !important; /* Ensure proper label color */
opacity: 1 !important; /* Make label fully visible */
transition: none !important; /* Disable transitions */
z-index: auto !important; /* Reset z-index */
}

/* Adjust regular labels */
.leadforms-props label {
position: absolute !important;
top: -20px !important; /* Adjust this value to move the label higher */
left: 0 !important; /* Align label to the left of the input */
font-size: 14px !important; /* Adjust font size */
color: #333 !important; /* Set label color */
background-color: transparent !important; /* Ensure no background overlaps */
padding: 0 !important; /* Remove padding */
}

/* Input field styling */
.leadforms-input-text-inner {
position: relative !important;
margin: 0 !important;
padding: 10px !important; /* Adjust padding to maintain consistent input styles */
font-size: 16px !important; /* Maintain readable font size */
border: 1px solid #ccc !important; /* Add input border */
border-radius: 4px !important; /* Optional rounded edges */
width: 100% !important; /* Full-width input */
box-sizing: border-box !important; /* Include padding in width */
}

/* Remove any focus animations on placeholder */
.leadforms-props input:focus + label.form-control-placeholder,
.leadforms-props input:not(:placeholder-shown) + label.form-control-placeholder {
top: -20px !important; /* Prevent label from overlapping */
font-size: 14px !important; /* Maintain font size */
color: #333 !important; /* Keep color consistent */
transition: none !important; /* Disable transitions */
}
 

5. Save Changes:

• Click Save to apply the new label positioning.

Additional Notes

• This customization ensures that labels appear above the fields until the option is natively supported in the UI.
• The provided CSS code can be further adjusted to fit specific design requirements.

If you have further questions or need additional assistance, please contact us! We'd be happy to help!