Contributor II

Solved

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

Forum|Forum|1 year ago
December 24, 2024
7 replies
211 views

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

Sign-up forms

This topic has been closed for replies.

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.

MANSIR2094

Expert Problem Solver IV

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!

Mansir Digital Portfolio

A

allisonkcAuthor

Contributor II

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

@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

A

allisonkcAuthor

Contributor II

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

MANSIR2094Answer

Expert Problem Solver IV

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.

Mansir Digital Portfolio

A

allisonkcAuthor

Contributor II

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

MANSIR2094

Expert Problem Solver IV

Alright 👍

Let me know if you need anything else.

Mansir Digital Portfolio

Sign up

Use your Klaviyo credentials

Log in to the Community

Use your Klaviyo credentials