Newsletter form - adjust first name and email address

[JHP_photo]

Hi all,

I wanted to add a ‘first name’ form to the newsletter section and footer, so I picked some code from this website, which actually works pretty good.

But I’m a perfectionist, and I would love to have maybe a 5 or 10px space between the two forms, so that they are nog connecting in the middle.

Can anyone guide me how to adjust this in the section and in the footer of my website?

www.jophermans.com

Thanks legends

[made4Uo]

Hi @JHP_photo ,

Please follow the instructions to provide 10px space in between inputs.

1. From you Admin page, go to Online store > Themes > Click the three dots on the theme you want to edit > Edit code
2. Go to Asset folder and open the theme.css file
3. At very end of the code, add the code below

input[name="contact[first_name]"] {
    margin-right: 10px;
}

[JHP_photo]

That’s epic @made4Uo , works like a charm for the section.

Would you mind sharing the same trick but now for the footer?

[made4Uo]

@JHP_photo

Of course, here you go

1. From you Admin page, go to Online store > Themes > Click the three dots on the theme you want to edit > Edit code
2. Go to Asset folder and open the theme.css file
3. At very end of the code, add the code below

.site-footer__item-inner .input-group {
    gap: 10px;
}

.site-footer__item-inner button.btn.newsletter__submit {
    margin-top: 0;
}

[JHP_photo]

@made4Uo You’re a legend, thanks for helping me out with these pieces of code.

[JHP_photo]

What do you coders think of this?

I’ve been using different pieces of code from this forum. To prevent my code fields becoming a complete mess, I add new code to the bottom of .liquid files this way:

The text in brown won’t be visible on the website when written this way.

[made4Uo]

Hi @JHP_photo

Yes, the code in brown is a comment and that is not visible. Just make sure the comments are close properly since this will not execute the lines after the error.

We developers usually make comments for other developer to understand the code at first glance.

NOTE: You cannot just add a CSS code on every liquid file, make sure you have a style tag

[ellenmarie]

Hello, do you happen to know the code necessary to create the ‘first name field/box’ in the first place? I’m new to all of this and support isn’t really helping.