Enlarge forms width with CSS

Hello :slight_smile:

I am trying to embed a form inside a landing page. But I struggle to make it look good :sob:

As you can see on the picture above, the field + button are small and stick to the left. Do you know how to make them take the full width of my section? I’ve tried lots of things with the custom CSS section in ActiveCampaign, but could not make it work.

Any idea?

Thanks you so much!

1 Like

To make the form fields and button take the full width of your section, you can use CSS to override the default styles. Here’s a step-by-step guide on how to achieve this:

  1. Identify the CSS selectors for the form fields and button. You can use browser developer tools to inspect the elements and find their class or ID names.

  2. Once you’ve identified the selectors, you can apply the following CSS:

/* Assuming your form fields and button are within a container with class "form-container" */
.form-container input[type="text"],
.form-container input[type="email"],
.form-container input[type="password"],
.form-container button {
    width: 100%;
}

/* Adjust padding or margins as needed */
.form-container input[type="text"],
.form-container input[type="email"],
.form-container input[type="password"] {
    margin-bottom: 10px; /* Example margin */
}

  1. Replace .form-container with the actual class or ID of the container wrapping your form fields and button.

  2. This CSS code will make all text input fields and buttons inside the .form-container take up 100% of the width available.

  3. Adjust padding, margins, or any other styles as needed to achieve the desired appearance.

  4. Add this CSS code to your website’s stylesheet or the custom CSS section if you’re using a platform like ActiveCampaign.

  5. Save your changes and preview the page to see the updated appearance of your form fields and button.

By following these steps, you should be able to make your form fields and button take the full width of your section. If you encounter any issues, feel free to ask for further assistance!

Here are the Excellent CSS online learning platforms:

  1. W3School 2. Iqra Technology 3. JavatPoint