Altering Column Widths in Sign Up Forms using CSS

  • 19 February 2021
  • 2 replies

Badge +2

Hey guys, 


I’m new to Klaviyo and loving it so far. I have begun to embed a Sign Up form on my Wordpress/Elementor Site but I was wondering if there was a way using custom CSS to

a) Add more space between the ‘first name’ & ‘email’ fields and

​​​​​​​b) If there is a way of altering the structure of the columns e.g. ‘first name’ would be 40% and ‘email’ would be 60% instead of a 50/50 split.



Appreciate any advice!


Spinach 2.0


Best answer by caroline 19 February 2021, 18:42

View original

2 replies

Userlevel 5
Badge +8

Hi there,


You could add CSS on your site itself (not within the Klaviyo signup form builder), or alternatively, you could utilize Klaviyo’s legacy forms, which allow for more flexibility with CSS.

In terms of the actual CSS needed, you could adjust the size of the input field. This reference describes the “size” attribute for HTML’s “input” element. To add more space between the two input elements, I would probably adjust the padding of one of the elements. Here is a reference on “padding-left” that could be applied to the first name field, for example, to add space between the two fields.

Hope this helps.




Userlevel 5
Badge +8

Hi @spinach2.0,

Just wanted to follow up here -- were you able to give my suggestions a try?