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).
Solved
Change Width of Blocks in Sign-Up Forms to be Different?
+2Best answer by MANSIR2094
Hello
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.
+19Hi 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!
+2Is 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.
+42
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
+2
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).
+19Hello
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.
+2
+19Alright 👍
Let me know if you need anything else.
Log in to the Community
Use your Klaviyo credentials
Log in with Klaviyo
Use your Klaviyo credentials
Log in with KlaviyoEnter your E-mail address. We'll send you an e-mail with instructions to reset your password.