How can I style a newsletter form in Webflow with custom CSS, specifically to have the submit button inside the input field?

TL;DR

Wrap the input and button in a relative-positioned div.
Set the input field to full width with right padding for the button.
Use absolute positioning to place the button inside the input field.
Add custom CSS in Webflow’s Page Settings for styling and responsiveness.
Publish and test to ensure proper alignment across devices.

You can style a newsletter form in Webflow with custom CSS to position the submit button inside the input field. Since Webflow’s built-in designer doesn’t allow this directly, you’ll need to use CSS positioning tricks. Here’s how:

1. Create the Form Structure

Add a Form Block from the Webflow components.
Inside the form, place a Text Field (input) for email entry.
Add a Submit Button within the same container.

2. Use a Custom Div Wrapper

Wrap both the Text Field and Submit Button inside a Div Block.
Set this Div Block to Position: Relative to allow absolute positioning within it.
Give this wrapper a class (e.g., form-container) for CSS targeting.

3. Adjust the Input Field

Set the input field (Text Field) to 100% width of the parent container.
Add padding-right to create space for the button inside.
Set the border-radius to match the button for a seamless look.

4. Position the Submit Button

Set the Submit Button to Position: Absolute inside form-container.
Position it to the right side using right: 0 and top: 50% with a transform of translateY(-50%).
Adjust width and height to align it properly with the input field.

5. Add Custom CSS in Webflow

Open Page Settings and insert the following inside Inside