Creating a Custom Newsletter Form in Shopify: Phone Number Not Fetching Issue

Shopify Discussion

Topic summary

Issue: A custom Shopify newsletter form successfully creates a customer and subscribes their email, but the phone number is not saved in the backend customer data.

Context and setup:

  • Form posts to /contact with hidden form_type set to customer.
  • Fields: contact[first_name], contact[last_name], contact[email], and contact[phone] (shown via a schema toggle).
  • Phone input uses type=“tel” with pattern=“[0-9]{10}”.
  • Code snippet (Liquid schema + HTML/CSS) is central to understanding the setup.

What works vs. what doesn’t:

  • Customer creation and email subscription function as expected.
  • Phone number is not fetched/saved in the backend despite using name=“contact[phone]” and enabling the field in the schema.

Request:

  • Seeking guidance on ensuring the phone number is captured and stored with the customer record upon submission, and any alternative approaches if the current method is incorrect.

Status: Unresolved; no replies or solutions yet.

Summarized with AI on December 16. AI used: gpt-5.
1

Hi everyone,

I’ve been working on creating a custom newsletter subscription form for my Shopify store and encountered a bit of a hiccup. I want to include fields for First Name, Last Name, Email, and Phone Number, and while the form works well in terms of customer creation and email subscription, the phone number is not being fetched into the backend.

The Code Used for form creation:

{% schema %}
{
  "name": "Subscription Form",
  "settings": [
    {
      "type": "text",
      "id": "form_heading",
      "label": "Form Heading",
      "default": "Subscribe to our Newsletter"
    },
    {
      "type": "checkbox",
      "id": "show_phone",
      "label": "Show Phone Number Field",
      "default": true
    },
    {
      "type": "text",
      "id": "button_text",
      "label": "Button Text",
      "default": "Subscribe"
    },
    {
      "type": "color",
      "id": "button_color",
      "label": "Button Background Color",
      "default": "#007bff"
    },
    {
      "type": "color",
      "id": "button_hover_color",
      "label": "Button Hover Color",
      "default": "#0056b3"
    }
  ],
  "presets": [
    {
      "name": "Default",
      "category": "Newsletter"
    }
  ]
}
{% endschema %}

<section class="newsletter-section">
  <form action="/contact" method="post" class="newsletter-form">
    <h2>{{ section.settings.form_heading }}</h2>

    <input type="hidden" name="form_type" value="customer">
    <input type="hidden" name="utf8" value="✓">

    <label for="first-name">First Name:</label>
    <input type="text" id="first-name" name="contact[first_name]" placeholder="Enter your first name" required>

    <label for="last-name">Last Name:</label>
    <input type="text" id="last-name" name="contact[last_name]" placeholder="Enter your last name" required>

    {% if section.settings.show_phone %}
      <label for="phone-number">Phone Number:</label>
      <input type="tel" id="phone-number" name="contact[phone]" placeholder="Enter your phone number" pattern="[0-9]{10}" required>
    {% endif %}

    <label for="email">Email:</label>
    <input type="email" id="email" name="contact[email]" placeholder="Enter your email address" required>

    <button type="submit" style="background-color: {{ section.settings.button_color }};">{{ section.settings.button_text }}</button>
  </form>
</section>

<style>
  .newsletter-section {
    max-width: 400px;
    margin: 0 auto;
    padding: 20px;
    background-color: #f9f9f9;
    border-radius: 10px;
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
  }

  .newsletter-section h2 {
    text-align: center;
    margin-bottom: 20px;
  }

  .newsletter-form label {
    display: block;
    margin-bottom: 5px;
    font-weight: bold;
  }

  .newsletter-form input {
    width: 100%;
    padding: 10px;
    margin-bottom: 20px;
    border: 1px solid #ccc;
    border-radius: 5px;
  }

  .newsletter-form button {
    display: block;
    width: 100%;
    padding: 10px;
    color: white;
    border: none;
    border-radius: 5px;
    cursor: pointer;
  }

  .newsletter-form button:hover {
    background-color: {{ section.settings.button_hover_color }};
  }
</style>

The Problem:

Everything works smoothly: the form creates a customer, and the email is subscribed as expected. However, the phone number doesn’t seem to be getting saved in the backend.

I’ve already checked that the name=“contact[phone]” input is correct and that I’ve enabled the phone field via the schema, but for some reason, it still doesn’t capture the phone number in the customer data.

Seeking Help:

Has anyone else encountered this issue before? Any tips on how I can ensure the phone number gets fetched properly when the form is submitted? I’d appreciate any insights or alternative solutions.

1 Like