Skip to main content
Solved

Change Width of Blocks in Sign-Up Forms to be Different?

  • December 24, 2024
  • 7 replies
  • 35 views

Forum|alt.badge.img+1

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). 

Best answer by MANSIR2094

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.

 

 

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

7 replies

MANSIR2094
Problem Solver IV
Forum|alt.badge.img+13
  • Problem Solver IV
  • 172 replies
  • December 25, 2024

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!


Forum|alt.badge.img+1
  • Author
  • Contributor II
  • 3 replies
  • December 26, 2024

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.


chloe.strange
Community Manager
Forum|alt.badge.img+41
  • Community Manager
  • 425 replies
  • December 27, 2024

@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


Forum|alt.badge.img+1
  • Author
  • Contributor II
  • 3 replies
  • December 27, 2024

@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).

 

 


MANSIR2094
Problem Solver IV
Forum|alt.badge.img+13
  • Problem Solver IV
  • 172 replies
  • Answer
  • December 27, 2024

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.

 

 


Forum|alt.badge.img+1
  • Author
  • Contributor II
  • 3 replies
  • December 30, 2024

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


MANSIR2094
Problem Solver IV
Forum|alt.badge.img+13
  • Problem Solver IV
  • 172 replies
  • December 31, 2024

Alright 👍 

Let me know if you need anything else.