Need a little bit of coding help adding an input field for phone number in the footer?

natantantan
Tourist
14 0 2

Hi guys, we have a Shopify store using the Pipeline theme.
On the bottom of our page, we have a footer that looks like this:

 

b6aJGmD

 

 

Our end goal is to add a second input field, under the email box, where a customer can put his phone number in, like this:

 

sZb7tTc

 

In our theme, we have a snipped called newsletter-form.liquid, and it looks like this

 

4R3HBpr

 

 

If I take that div section, and duplicate it, I can make a second contact box.

Now our website looks like this

 

VArBYAT

 

However, after this, I'm not really sure how to proceed.


We need to integrate this second input field with Attentive, using their Subscribers API


ydJrfTQ

 

At this point, I'm a little lost on how to proceed. I have a coding background, but I usually work with Python, not CSS or Javascript. If anyone can provide any help at all, even just pointing me in the right direction or telling me which lines I probably need to look at, I would be extremely grateful.

 

I need to find out how to make the second input box functional, and so when a customer adds their phone number there, it connects to Attentive API.

 

Here is the code of newsletter-form.liquid,

<!-- /snippets/newsletter-form.liquid -->
{% comment %}
{% render 'newsletter-form', unique: unique, text: block.settings.button_text, style: block.settings.button_style, color: block.settings.button_color %}
{% endcomment %}
{%- liquid
assign style = style | default: 'btn'
assign color = color | default: 'btn--secondary'
assign translation = 'general.newsletter_form.submit' | t
assign text = text | default: translation
assign class = 'newsletter--default-messages'

if success_text != blank
assign class = ''
endif
-%}

{%- if unique -%}
{% form 'customer', id: unique, data-newsletter-form: '', class: class %}
{% if content != blank %}
{{ content }}
{% endif %}

{% if success_text != blank %}
<p class="newsletter__message newsletter__message--success">{{ success_text | newline_to_br }}</p>

<p class="newsletter__message newsletter__message--error"><em>{{ 'general.newsletter_form.error_message' | t }}</em></p>
{% else %}
{% if form.posted_successfully? %}
<p><em>{{ 'general.newsletter_form.subscribed' | t }}</em></p>
{% elsif form.errors %}
{% for field in form.errors %}
<p><em>{{ field }} - {{ form.errors.messages[field] }}</em></p>
{% endfor %}
{% endif %}
{% endif %}

<input type="hidden" name="contact[tags]" value="newsletter">
<input type="hidden" name="contact[accepts_marketing]" value="true">
<div class="input-group input-group--inner-button float__wrapper">
<label for="mail-{{ unique }}">{{ 'general.newsletter_form.email' | t }}</label>
<input class="input-group-field"
type="email"
placeholder="{{ 'general.newsletter_form.newsletter_email' | t }}"
id="mail-{{ unique }}"
aria-label="{{ 'general.newsletter_form.newsletter_email' | t }}"
autocorrect="off"
autocapitalize="off"
name="contact[email]"
data-newsletter-field />
<span class="input-group-button">
<button
type="submit" {% unless show_icon %}class="{{ style }} {{ color }} uppercase"{% endunless %}
aria-label="{{ text }}"
name="subscribe"
id="subscribe-{{ unique }}">
{%- if show_icon -%}
{%- render 'icon-arrow-right-long' -%}
{%- render 'icon-check-slim' -%}
{%- else -%}
{{ text }}
{%- endif -%}
</button>
</span>
</div>
{% endform %}
{%- endif -%}


Once again, an help at all, even just some advice, would be extremely appreciated.

Replies 0 (0)