topic Re: Embedded form not showing full width inside container in Lead Capture Tools

Embedded form not showing full width inside container

KrisAndrae — Fri, 21 Mar 2025 15:44:07 GMT

So I am using a simple email form field and submit button only show 80$ width. When you click the submit to show the error message it expands to the correct width. I have tried to target the form and change the width but it only shows the width on the expanded not the initial.

how it looks when you land on the pagehow it should look as full widthsettings for the very simple form.

this was not working and no other width change works.

style="max-width: 100%; height: auto; margin-bottom: 1rem;"

Re: Embedded form not showing full width inside container

PamCotton — Fri, 21 Mar 2025 21:28:31 GMT

Hey @KrisAndrae, happy Friday!

Try adding width: 100% to your form’s CSS, along with max-width: 100%. This should ensure the form is full width initially, not just when the error message shows.

To our top experts, @Anton and @Jigar_Thakker do you have any other recommendations for @KrisAndrae?

Kindly,

Pam

Re: Embedded form not showing full width inside container

KrisAndrae — Tue, 25 Mar 2025 14:17:08 GMT

I have tried this both using custom CSS in the block editor as well as using a custom css class and changin the theme css and it did not change anything. No edits of the block, change the width. I have changed other aspects of the form but width is not changing it stays unless you trigger the error then it go's full width.

Re: Embedded form not showing full width inside container

KrisAndrae — Tue, 25 Mar 2025 14:37:01 GMT

This was the styling code I was using that works for everything else but the width. It somehow defaults to 200px.

<style>

.receive-updates {

font-family: "stevie-sans", sans-serif !important;

font-weight: 400 !important;

font-size: 15px !important;

line-height: 17px !important;

margin-bottom: 1rem;

text-align: center;

}

.hs-form .hs_email input {

width: 100% !important;

max-width: 100% !important;

border-radius: 5px !important;

}

.hs-form .hs_email input::placeholder {

font-family: "stevie-sans", sans-serif !important;

font-weight: 400 !important;

font-size: 14px !important;

line-height: 18px !important;

}

/* ===== FORM FIELD STYLES ===== */

.hs-form .hs-input,

.hs-form input[type="text"],

.hs-form input[type="email"],

.hs-form input[type="tel"],

.hs-form input[type="number"],

.hs-form textarea {

width: 100% !important;

max-width: 100% !important;

margin: 0 0 1em 0 !important;

border: 1px solid #bfc3c8 !important;

border-radius: 5px !important;

font-family: "stevie-sans", sans-serif;

font-size: 14px !important;

line-height: 18px !important;

}

.hs-form .hs-input::placeholder,

.hs-form input[type="text"]::placeholder,

.hs-form input[type="email"]::placeholder,

.hs-form input[type="tel"]::placeholder,

.hs-form input[type="number"]::placeholder,

.hs-form textarea::placeholder {

color: #bfc3c8 !important;

font-family: "stevie-sans", sans-serif;

font-size: 14px !important;

line-height: 18px !important;

}

.hs-form .hs-button {

width: 100% !important;

max-width: 100% !important

margin: 0 0 1em 0 !important;

border-radius: 5px !important;

background-color: #82afd7 !important;

color: #fff !important;

font-family: "stevie-sans", sans-serif;

font-weight: 400;

font-size: 15px !important;

border: none !important;

cursor: pointer;

}

.hs-form .hs-button:hover {

background-color: #fff !important;

color: #82afd7 !important;

outline: 1px solid #bfc3c8 !important;

outline-offset: 0 !important;

border: none !important;

}

.hs-form .hs-form-required {

color: #82afd7 !important;

}

</style>

Re: Embedded form not showing full width inside container

BérangèreL — Mon, 31 Mar 2025 10:13:58 GMT

Hi @KrisAndrae, thanks for the additional information!

Thanks also for sharing the code with us.

On which page can we see this form, please?

I'd love to put you in touch with some of our Top Experts: Hi @Stephanie-OG, @alyssamwilie and @stefen do you have suggestions to help @KrisAndrae, please?

Have a lovely day and thanks so much in advance for your valuable contributions!

Warmly,
Bérangère

Re: Embedded form not showing full width inside container

stefen — Tue, 01 Apr 2025 17:18:02 GMT

@KrisAndrae if you can share a page preview would be easier to debug.