How can I style a newsletter form in Webflow with custom CSS, specifically to have the submit button inside the input field?
- Wrap the input and submit button in a div with relative positioning and apply right padding to the input to make space.
- Use custom CSS to absolutely position the submit button inside the input field and adjust styles for alignment and responsiveness.
To place the submit button inside the input field of a newsletter form in Webflow using custom CSS, you’ll need to apply specific styles to position the button absolutely within the input wrapper.
1. Create the Form Structure in Webflow
- Drag a Form Block into the canvas.
- Inside it, remove extra fields and keep only the Text Field (for email input) and the Submit Button.
- Wrap the input and submit elements in a Div Block. Give this wrapper a class (e.g.,
form-wrapper). - Set a class for both the input (e.g.,
email-input) and the submit button (e.g.,submit-btn).
2. Add Custom Classes and Set Basic Styles
In the Style Panel, set these properties:
form-wrapper
Position: Relative
Width: Set desired width (e.g., 300px or 100%)
Display: Flex (optional, if you want to control layout)
email-input
Padding-right: Add enough right padding to make room for the button (e.g., 100px)
Width: 100%
Box-sizing: Border-box (ensures padding doesn’t overflow)
Add other styling like border, radius, font, etc.
3. Add Custom CSS in Page Settings or Embed Element
Use an Embed element or go to Page Settings > Custom Code > Footer and add the following inline styles:
<style> .form-wrapper { position: relative; } .email-input { padding-right: 100px; } .submit-btn { position: absolute; right: 10px; top: 50%; transform: translateY(-50%); height: 36px; padding: 0 12px; border: none; background: #000; color: #fff; cursor: pointer; border-radius: 4px; }</style>Adjust the units and values as needed to match your design.
4. Preview and Adjust Responsively
- Preview the layout to ensure the button appears inside the input field.
- Adjust padding, font sizes, and button dimensions for responsiveness.
Summary
To style a newsletter form with the submit button inside the input field, wrap the input and button in a relative-positioned div, add right padding to the input, and use absolute positioning for the button via custom CSS. This approach works reliably in Webflow when applied through an Embed block or Page Settings.