Skip to main content
Solved

How to customise embedded forms (height / width)?

  • September 6, 2023
  • 6 replies
  • 1053 views

Forum|alt.badge.img+1

Hi all!

I am creating an embedded form to feature on a webpage, but I do not understand how to customise its height and width.

Essentially, I want it to fill the screen space in between the nav and the footer, but I can only expand its height by increasing padding.

Can anybody help?

Thank you!

Best answer by David To

Hey @in.parallelAlisei,

If you’re trying to set up a full page sign-up form, I would recommend taking a look through our How to use a full page sign-up form as a landing page Help Center article. 

I believe one of the confusion’s you’re running into is that when it comes to creating an embedded form, the size of the form will depend on the container you’re embedding the form in.

To me, it sounds like the container/area you’re embedding the form into is rather smaller than you would like. To adjust this, you can always edit your site code to enlarge the container to the size you want. 

If you need more hands on editing your site code, I suggest reaching out to some of our highly knowledgeable Klaviyo Partners through our Partner Directory to help further. 

David

View original
Did this topic or the replies in the thread help you find an answer to your question?

6 replies

Brian Turcotte
Forum|alt.badge.img+37

Hi @in.parallelAlisei!
 

In the form editor, Klaviyo allows you to increase the form width to 100% of the container, and allows you to input a minimum height as seen here:

Form editor menu

 

Or, you could set the minimum height to auto, and place the form in a flexible container, so that you can adjust the form size by adjust the container size:

Form editor menu

 

I hope this helps, and thanks for using the Community!
- Brian


Forum|alt.badge.img+1

Hi @Brian Turcotte !

Thanks for the above - unfortunately I did know about that, but it does not help with the issue I am trying to solve for.

Selecting 100% width will not allow you to fill the entire screen and increasing the minimum height only allows you to stretch the form vertically, which is not useful.

Thanks though!

Does anyone else know how to do this by any chance? Or do you know if it’s possible at all!
Many thanks all! 


David To
Klaviyo Employee
Forum|alt.badge.img+60
  • Klaviyo Employee
  • 2456 replies
  • Answer
  • September 8, 2023

Hey @in.parallelAlisei,

If you’re trying to set up a full page sign-up form, I would recommend taking a look through our How to use a full page sign-up form as a landing page Help Center article. 

I believe one of the confusion’s you’re running into is that when it comes to creating an embedded form, the size of the form will depend on the container you’re embedding the form in.

To me, it sounds like the container/area you’re embedding the form into is rather smaller than you would like. To adjust this, you can always edit your site code to enlarge the container to the size you want. 

If you need more hands on editing your site code, I suggest reaching out to some of our highly knowledgeable Klaviyo Partners through our Partner Directory to help further. 

David


Forum|alt.badge.img+1

Hi @David To,

thanks for the advice! :) 

Unfortunately, even after trying with our Dev Team, turns out it’s not possible to achieve the look we want for this embedded sign-up form as adjusting the size of the container won’t make the embed responsive to screen size changes.

 

Hopefully in the future this will change! :)


Forum|alt.badge.img+1
  • Contributor I
  • 1 reply
  • November 12, 2023

Hi @David To 

 

Would you happen to know why when I’m using the embedded form does the “Submit” button show on the sidebar? It wasn’t doing this previously on my forms and so now I’m confused as to what’s happening. I’ve tried to figure out how to remove it but I’m thinking it’s some sort of coding issue?

 

 

Thanks,

Malisha


Brian Turcotte
Forum|alt.badge.img+37

Hi @msMbellished!

 

Is this still occurring? And if so, have you tried testing it on other browsers?

Best,

Brian