Skip to main content

Is there a way to customize the sign-up forms so the widths of the individual blocks can be different widths? I’d like to put a few elements and input fields in one row, but it looks off as all blocks are the same size (since the padding doesn’t actually change the width of the fields/elements). 

Hi Allisonkc

Yes, you can customize sign-up forms to adjust the width of individual blocks. Use custom CSS to style the fields and elements. For example:

CSS

Copy code

.form-block { width: 70%; /* Adjust width */ margin-right: 10px; /* Add spacing */ } .form-block:last-child { width: 30%; }

Apply this CSS in your form editor or website stylesheet. If you need further help with implementation, feel free to reach out!


Is this possible on the sign-up form editor on Klaviyo though? Many of the articles say that HTML/CSS isn’t allowed on the Sign-Up Form tab templates created already.


@allisonkc

That is correct. The sign-up form editor does not currently support custom HTML or CSS content. Have you tried adjusting the padding and/or the width of the form itself?

~Chloe


@chloe.strange Yes, I have tried adjusting the padding & width of the form, and changing the form width allowed me to add more into the row, However, I’m trying to do something similar to this (see image), and even if not exactly the same, the width of the columns would need to be different.

 

Would I need to go into Shopify to achieve something like this, or would something like WooCommerce or a different app be better? I’m hoping to A/B test a taller/stacked embedded sign up form with a thin line embedded form like this (as I see this more regularly on sites).

 

 


Hello ​@allisonkc 

To achieve and A/B test different signup forms, you can use Shopify or WooCommerce depending on your requirements. On Shopify, you can adjust styles through the theme editor, modify CSS and HTML in the theme files, or use apps like Klaviyo or Shopify Forms for customizable designs with built-in A/B testing. WooCommerce allows for greater design flexibility with plugins like Gravity Forms or WPForms and custom CSS adjustments through the WordPress theme. For A/B testing, tools like Google Optimize or Klaviyo work well on both platforms. Shopify is simpler, while WooCommerce offers more customization.

 

 


@MANSIR2094 I’ll look into all options and see which works best for both A/B test designs. Thanks!


Alright 👍 

Let me know if you need anything else.


Reply