How to add an input field with button, to let customers enter their phone number?

Hi guys, I want to add a simple input field in the bottom of my footer, where customers can enter their phone number.

Then I want to make an API call to Attentive through their API (https://docs.attentivemobile.com/openapi/reference/tag/Subscribers/) to add that customer as a subscriber.

after a lot of tinkering with Shopify code, here is what I have so far:

{%- liquid
assign style = style | default: 'btn'
assign color = color | default: 'btn--secondary'
assign translation = 'general.newsletter_form.submit' | t
assign text = text | default: translation
-%}

This successfully creates an input field with a Submit button in my footer, but how do I actually add the functionality of taking the phone number and sending it along through the API? Right now clicking the submit button does nothing.

You don’t have to tell me the exact code or solution, but even just a nudge in the right direction would be extremely helpful. Thanks!

Hi @natantantan ,

You do not need an API or external library on this. Your theme should have a newsletter. Please find your newsletter code and paste it here so we can do some adjustments

1 Like

Hi, the newsletter code is what I copied to create my second button.

Originally my theme only had one input field in the newsletter, where customers can enter their emails.

We want to add a second input field with a button, where customer can now also enter their phone number.

Here is the newsletter code

It’s pretty much exactly the same code I have in my opening post, except I further simplified my code for the phone number input field.

Right now, I have the input field, and the button that says Join, but clicking Join doesn’t do anything.

I am asking how I set up the functionality so that when I click Join, something happens.

Thanks so much for trying to help, I really appreciate it.

Hi @natantantan ,

Can you copy paste the code here and not an image? So we can edit easily. And what is the reason you want to have two buttons? Can this customer sign up with newsletter only with phone number?

The JOIN button is a submit button. In every form, which the sign up section uses, should only one submit button unless the actions are different.

1 Like

Hi Made4U0, thanks so much for continuing to help.
Yes sure, I can copy and paste the code, I just wanted to send you an image so you can see the formatting well.

This is the original Newsletter code


{% 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 %}
      

{{ success_text | newline_to_br }}

      

*{{ 'general.newsletter_form.error_message' | t }}*

    {% else %}
      {% if form.posted_successfully? %}
        

*{{ 'general.newsletter_form.subscribed' | t }}*

      {% elsif form.errors %}
        {% for field in form.errors %}
          

*{{ field }} - {{ form.errors.messages[field] }}*

        {% endfor %}
      {% endif %}
    {% endif %}
    
    
    
    

      
      
      
        
      
    

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

Right now, the functionality is that when a customer enter his email and clicks submit, a new customer is created here.

The phone number doesn’t do anything because I created that as a copy, and it doesnt work right now.

One change between the original newsletter code, and my code is that I removed the fact that it’s

a

{% form customer %}{% endform %}

Because when that was active, it acted like you describe, where clicking the submit button would try to use the phone number field as an email, and it would error out on both boxes.

My ideal final solution is to link it to Attentive API

https://docs.attentivemobile.com/openapi/reference/tag/Subscribers/

Where I take the customer email and phone number, and create a new Subscriber through the Attentive API, using our unique signUpSourceId.

If you can tell me how to make the Join button work for the phone number field individually, I think I would be able to figure out the API portion myself. I think if a customer only puts in a phone number, or only puts in a email, I would still want to make the API call. So idk if the best solution for that is to have individual buttons, or somehow link everything to one button and remove the required field.

Once again, thanks a lot, and this is extremely helpful.

Hi @natantantan ,

Try this. I am just editing this blindly. I do not have your theme, therefore, not tested


{% 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 %}
      

{{ success_text | newline_to_br }}

      

*{{ 'general.newsletter_form.error_message' | t }}*

    {% else %}
      {% if form.posted_successfully? %}
        

*{{ 'general.newsletter_form.subscribed' | t }}*

      {% elsif form.errors %}
        {% for field in form.errors %}
          

*{{ field }} - {{ form.errors.messages[field] }}*

        {% endfor %}
      {% endif %}
    {% endif %}
    
    
    
    

      
      
      
        
      
    

  {% endform %}

{% form 'customer', id: unique, data-newsletter-form: '', class: class %}
 
      
      
      
        
      
    

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

Hi, thanks so much for trying to help, but when I paste your code, nothing seems to change. I removed all the changes that I made and pasted your code.

The phone input field does not show up.

I can give you access to my theme if that would make things easier for you.

Hi @natantantan ,

This will require me to see the code customization. Yes if you provide you url, I can send a collaborator’s access

Hi, thanks a lot. Here is our URL

https://sprygrnd.myshopify.com/

Email sent

Hi, I know you must be busy. Was just wondering if you have had a chance to login to our store yet.

Hi @natantantan ,

Sorry about that. I made a copy of your live theme and create a snippet code, newsletter-with-telephone. I am not sure if you are receiving the telephone in the backend but the newsletter form works. I made the email required but not the telephone.

1 Like