Skip to main content
Solved

Altering Column Widths in Sign Up Forms using CSS

  • February 19, 2021
  • 2 replies
  • 836 views

Forum|alt.badge.img+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

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.

 

Best,

Caroline

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

2 replies

caroline
Forum|alt.badge.img+8
  • Klaviyo Alum
  • 215 replies
  • Answer
  • February 19, 2021

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.

 

Best,

Caroline


caroline
Forum|alt.badge.img+8
  • Klaviyo Alum
  • 215 replies
  • March 5, 2021

Hi @spinach2.0,

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

Best,

Caroline