How to change the contact and birthday form width in klaviyo sign up form (embedded 100% full width)

Shopify Discussion

Topic summary

Goal: Adjust the Klaviyo embedded contact/birthday sign‑up form so it appears narrower at full width with large left/right padding, without breaking responsive behavior. Shopify’s native form is the visual target; Klaviyo’s default is too wide. Images and a code screenshot are central to understanding the desired layout and the applied fix.

Actions taken: The store URL (with password) was shared. A code change was added under the of theme.liquid (custom CSS) to control the Klaviyo form width/padding. The user confirmed it worked. The code was then updated to apply across other pages (e.g., collection pages); the user again confirmed success.

Latest update: After adding a language option to the form, the top and bottom margins became too small. The user asked for a fix.

Current status and next steps:

  • Developer requested the store’s protected password to investigate the new margin issue.
  • Resolution for the margin-top/bottom problem is pending; discussion remains open.
Summarized with AI on December 23. AI used: gpt-5.
1

Hi!

Can someone help me adjust the width of the contact and birthday klaviyo sign up form (100% full width)?

If I increase the padding on the left and right side, the form will only become narrower when scaling back the responsive design and I don’t want that.

Only at full width the form must have a large padding on both sides.

In the first image you can see how big I want the form to be. This is a sign up form from shopify.

Scherm­afbeelding 2024-01-23 om 14.15.18.png
Scherm­afbeelding 2024-01-23 om 14.15.18.png4096×1112 132 KB

The second image is a form from klaviyo. Here you can clearly see that the forms are too wide.

Scherm­afbeelding 2024-01-23 om 14.14.26.png
Scherm­afbeelding 2024-01-23 om 14.14.26.png4096×1554 182 KB

I hope someone can solve this for me :slightly_smiling_face:

2

Could you share your store URL?

3

Yes that’s: www.aceylabel.com
password: u^KNN(8/</kZHdZ#

4

Go Online store > Themes > Edit code > open theme.liquid file, add this code under element

Screenshot 2024-01-24 at 11.04.41.png
Screenshot 2024-01-24 at 11.04.41.png1638×790 70.1 KB

1 Like
5

Yes it works!!! Thank you so much :hugs:

1 Like
6

Happy I could help :grin:

1 Like
7

I got one question, I want this sign up form also on the other pages on the website. For example, If I put the app in the section area on the collection page, the sign up form is still too wide.

8

Please try to update code to this and check
9

YES!! thank you soooooo much! It works :hugs:

10

Hi! Can you help me with this form again? I’ve added an language option to this form and the margin-top and bottom are too small.

Do you know a resolution?

Greetings :slightly_smiling_face:

1 Like
11

Hi @Marissao6

Please let me know protected password of your store