Solved

How to customise embedded forms (height / width)?

  • 6 September 2023
  • 6 replies
  • 499 views

Badge

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!

icon

Best answer by David To 8 September 2023, 15:31

View original

6 replies

Userlevel 7
Badge +36

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

Badge

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! 

Userlevel 7
Badge +60

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

Badge

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! :)

Badge +1

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

Userlevel 7
Badge +36

Hi @msMbellished!

 

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

Best,

Brian

Reply