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

New Member
3 0 0

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:





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:




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





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

Now our website looks like this




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



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 = ''

{%- 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 }}">{{ '' | t }}</label>
<input class="input-group-field"
placeholder="{{ 'general.newsletter_form.newsletter_email' | t }}"
id="mail-{{ unique }}"
aria-label="{{ 'general.newsletter_form.newsletter_email' | t }}"
data-newsletter-field />
<span class="input-group-button">
type="submit" {% unless show_icon %}class="{{ style }} {{ color }} uppercase"{% endunless %}
aria-label="{{ text }}"
id="subscribe-{{ unique }}">
{%- if show_icon -%}
{%- render 'icon-arrow-right-long' -%}
{%- render 'icon-check-slim' -%}
{%- else -%}
{{ text }}
{%- endif -%}
{% endform %}
{%- endif -%}

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

Replies 0 (0)