Change Newsletter Footer input fields and style

[Aryaluna]

Hi, I have a newsletter tab on footer of my website. I have added a Name field, it works good. But I have some issues I cannot solve:

• when someone insert the name and email the input field rectangle turns white, I 'd like to change the colour

• The name and email field are one next to other and I cannot understand how to make a space between the two of them

• I cannot understand how to change the newsletter green frame area (width, height, spaces)

• also, is there any chance of addind an image frame around the newsletter area perhaps? thank you

If someone could help me please that would be great, expecially with the input space.

This is the code that I used, in the “newsletter liquid” area :

{{ ‘component-newsletter.css’ | asset_url | stylesheet_tag }}
{{ ‘newsletter-section.css’ | asset_url | stylesheet_tag }}

{%- for block in section.blocks -%} {%- case block.type -%} {%- when '@app' -%} {% render block %} {%- when 'heading' -%}

{{ block.settings.heading | escape }}

{%- when 'paragraph' -%}

{{ block.settings.text }}

{%- when 'email_form' -%}

{% form 'customer', class: 'newsletter-form' %}

{{ 'customer.register.first_name' | t }}

<input

id=“NewsletterForm–{{ section.id }}”
type=“email”
name=“contact[email]”
class=“field__input”
value=“{{ form.email }}”
aria-required=“true”
autocorrect=“off”
autocapitalize=“off”
autocomplete=“email”
{% 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=“{{ ‘newsletter.label’ | t }}”
required

{{ 'newsletter.label' | t }} {% render 'icon-arrow' %}

{%- if form.errors -%} {% render 'icon-error' %}{{ form.errors.translated_fields['email'] | capitalize }} {{ form.errors.messages['email'] }} {%- endif -%}

{%- if form.posted_successfully? -%}

{% render 'icon-success' %}{{ 'newsletter.success' | t }}

{%- endif -%} {% endform %}

{%- endcase -%} {%- endfor -%}

{% schema %}
{
“name”: “t:sections.newsletter.name”,
“tag”: “section”,
“class”: “spaced-section spaced-section–full-width”,
“settings”: [
{
“type”: “select”,
“id”: “color_scheme”,
“options”: [
{
“value”: “accent-1”,
“label”: “t:sections.newsletter.settings.color_scheme.options__1.label”
},
{
“value”: “accent-2”,
“label”: “t:sections.newsletter.settings.color_scheme.options__2.label”
},
{
“value”: “background-1”,
“label”: “t:sections.newsletter.settings.color_scheme.options__3.label”
},
{
“value”: “background-2”,
“label”: “t:sections.newsletter.settings.color_scheme.options__4.label”
},
{
“value”: “inverse”,
“label”: “t:sections.newsletter.settings.color_scheme.options__5.label”
}
],
“default”: “background-1”,
“label”: “t:sections.newsletter.settings.color_scheme.label”
},
{
“type”: “checkbox”,
“id”: “full_width”,
“default”: true,
“label”: “t:sections.newsletter.settings.full_width.label”
},
{
“type”: “paragraph”,
“content”: “t:sections.newsletter.settings.paragraph.content”
}
],
“blocks”: [
{
“type”: “heading”,
“name”: “t:sections.newsletter.blocks.heading.name”,
“limit”: 1,
“settings”: [
{
“type”: “text”,
“id”: “heading”,
“default”: “Subscribe to our emails”,
“label”: “t:sections.newsletter.blocks.heading.settings.heading.label”
}
]
},
{
“type”: “paragraph”,
“name”: “t:sections.newsletter.blocks.paragraph.name”,
“limit”: 1,
“settings”: [
{
“type”: “richtext”,
“id”: “text”,
“default”: “

Be the first to know about new collections and exclusive offers.

”,
“label”: “t:sections.newsletter.blocks.paragraph.settings.paragraph.label”
}
]
},
{
“type”: “email_form”,
“name”: “t:sections.newsletter.blocks.email_form.name”,
“limit”: 1
},
{
“type”: “@app”
}
],
“presets”: [
{
“name”: “t:sections.newsletter.presets.name”,
“blocks”: [
{
“type”: “heading”
},
{
“type”: “paragraph”
},
{
“type”: “email_form”
}
]
}
]
}
{% endschema %}

[saim007]

@Aryaluna Please provide store URL so I can check.

[Aryaluna]

https://www.butterflygarmentscouture.com/

The password is chaybi2

Thank you

[saim007]

Hi @Aryaluna Just copy and paste below CSS code in your theme.liquid file above tag

You can change the border color of input as of your choice for now it is RED also you can increase/decrease the GAP between the inputs.

Please let me know if works and mark as solve!

[Aryaluna]

It worked, thank you

By the way how could I have the first sentence a bit lower? Thank you so much

[saim007]

Hi @Aryaluna Go to Online Store > Customization > Footer section > Newsletter > Heading. Just change the title whatever case-sensitive words you want and Save. That’s it. for reference attaching screenshot-

[lazzy99]

Can you help me change my input text to white for the newsletter please! In my footer. lazlarastudios.com

[saim007]

Hi @lazzy99 It is already in white color.