Embedded form not showing full width inside container

[KrisAndrae]

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;"

[stefen]

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

[PamCotton]

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

[KrisAndrae]

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>

[KrisAndrae]

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. 

[BérangèreL]

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