Issue with width of embed Form in Framer

Forum|Forum|1 year ago
August 17, 2025
3 replies
224 views

Hi there,

I’ve embedded a signup form in Framer via an embed within a full-width frame. The form shows up, the height is correct, but I cannot get it to have the right width. The container (the Framer frame in this case) is set to full width. In Klaviyo, the form is set to full width too. The code (attached) seems to reflect that but somehow the form doesn’t expand… I’m at a loss - would anyone have any idea how to fix this?

Thanks!

Sign-up forms

Best answer by clement_amicaliste

Thanks @bluesnapper !

Adding CSS worked, not exactly the one you suggested, here’s what worked (with some help from ChatGPT):

<style>
/* Cap the form to 600px and center it */
.klaviyo-form-VfFtr6,
.klaviyo-form-VfFtr6 .klaviyo-form,
.klaviyo-form-VfFtr6 iframe {
  width: 100% !important;
  max-width: 600px !important;
  margin-left: auto !important;
  margin-right: auto !important;
  display: block !important;
}

/* Mobile safety: let it go full width below 600px */
@media (max-width: 640px) {
  .klaviyo-form-VfFtr6,
  .klaviyo-form-VfFtr6 iframe {
    max-width: 100% !important;
  }
}
</style>

Thanks again!

bluesnapper

Champion & Partner

Welcome to the community @clement_amicaliste

Your issue may be a CSS conflict. You could try to force precedence of the Klaviyo form styling with !important to see if that resolves it by adding the following CSS:

.klaviyo-form-VffJj6 {
width: 100% !important;
max-width: none !important;
}

Hope that helps.

Regards

Andy

https://bluesnapper.com - Klaviyo Champion '24 & Partner

C

clement_amicalisteAuthorAnswer

Contributor I

Thanks @bluesnapper !

Adding CSS worked, not exactly the one you suggested, here’s what worked (with some help from ChatGPT):

<style>
/* Cap the form to 600px and center it */
.klaviyo-form-VfFtr6,
.klaviyo-form-VfFtr6 .klaviyo-form,
.klaviyo-form-VfFtr6 iframe {
  width: 100% !important;
  max-width: 600px !important;
  margin-left: auto !important;
  margin-right: auto !important;
  display: block !important;
}

/* Mobile safety: let it go full width below 600px */
@media (max-width: 640px) {
  .klaviyo-form-VfFtr6,
  .klaviyo-form-VfFtr6 iframe {
    max-width: 100% !important;
  }
}
</style>

Thanks again!

bluesnapper

Champion & Partner

Hi @clement_amicaliste

Pleased to hear you got a working solution! Thanks for posting back.

Have a great week.

Regards

Andy

https://bluesnapper.com - Klaviyo Champion '24 & Partner

Sign up

Use your Klaviyo credentials

Log in to the Community

Use your Klaviyo credentials