Add space between name input fields on newsletter form

Store Design
, , ,
1

I’m working in the standard Spotlight theme. I added html in newletter.liquid to get a first name field in the email sign-up form. How do I add space between the first name input field and the email input field? The html I added is below.
<input
id=“NewsletterForm–{{ section.id }}”
type=“text”
name=“contact[first_name]”
class=“field__input”
value=“”
autocorrect=“off”
autocapitalize=“off”
{% if form.errors %}
autofocus
aria-invalid=“true”
aria-describedby=“Newsletter-error–{{ section.id }}”
{% elsif form.posted_successfully? %}
aria-describedby=“Newsletter-success–{{ section.id }}”
{% endif %}
placeholder=“First name”
>
First Name
#contact_form,
#ContactFooter,
#ContactFooter > .newsletter-form__field-wrapper,
#contact_form > .newsletter-form__field-wrapper{
max-width: 500px;
width: 100%;
display: flex;
}
@media (max-width: 749px){
#ContactFooter > .newsletter-form__field-wrapper,
#contact_form > .newsletter-form__field-wrapper{
flex-direction: column;
}
}
2

Hi @tvcandle

Try this two options

Option 1: Use Flexbox gap (recommended)

#contact_form > .newsletter-form__field-wrapper,
#ContactFooter > .newsletter-form__field-wrapper {
  display: flex;
  gap: 12px; /* adjust spacing as you like */
}

This will add 12px space between the first name and email input fields.

Option 2: Use Margin on the First Name Input

#contact_form input[name="contact[first_name]"],
#ContactFooter input[name="contact[first_name]"] {
  margin-right: 12px; /* adds spacing only on desktop */
}

@media (max-width: 749px) {
  #contact_form input[name="contact[first_name]"],
  #ContactFooter input[name="contact[first_name]"] {
    margin-right: 0;   /* reset margin for stacked mobile view */
    margin-bottom: 12px; /* add spacing when stacked vertically */
  }
}
3

Hi @tvcandle,

Please change all code:

<div class="newsletter-form__field-wrapper" style="margin-bottom: 1rem">
                  <div class="field">
                    <input
                      id="NewsletterForm-FirstName-{{ section.id }}"
                      type="“text”"
                      name="contact[first_name]"
                      class="field__input"
                      value=""
                      aria-required="true"
                      autocorrect="off"
                      autocapitalize="off"
                      autocomplete="email"
                      {% if form.errors %}
                        autofocus
                        aria-invalid="true"
                        aria-describedby="ContactFooter-error"
                      {% elsif form.posted_successfully? %}
                        aria-describedby="ContactFooter-success"
                      {% endif %}
                      placeholder="First name"
                      required
                    >
                    <label class="field__label" for="NewsletterForm-FirstName-{{ section.id }}">
                      First name
                    </label>
                  </div>
                </div>

If I helped you, then a Like would be truly appreciated.

4

You’re on the right track by adding the extra input. The easiest way to add spacing between your first name field and email field is with a bit of CSS margin. Since both inputs share the .field__input class, you can target just the first one like this:

#contact_form input[name="contact[first_name]"] {
  margin-bottom: 12px; /* adjust value as needed */
}

This way, your First Name field will always have spacing underneath it, whether on desktop or mobile.

If you want more control on mobile, you could even add a media query:

@media (max-width: 749px) {
  #contact_form input[name="contact[first_name]"] {
    margin-bottom: 16px;
  }
}

That should give you clean spacing without breaking your layout :+1: