Simple Theme modification

maritimesaver
New Member
4 0 0

Hi all, I need help with adding more fields to my customer registration form. I want to add "phone number, company name and address" and have the information stored under the customer's profile.  

0 Likes
Zworthkey
Shopify Partner
551 38 87

hii

we will help you

pls share your site detail

thank u

Want to modify or Customize your theme, Hire us. or Want to know more. Read our Shopify Blogs.
If helpful then please Like and Accept the Solution.
Email us: sales@zworthkey.com Contact us: https://www.zworthkey.com/
0 Likes
maritimesaver
New Member
4 0 0

what site details are you asking for? 

0 Likes
maritimesaver
New Member
4 0 0

this is the site url https://mswholesale.ca/

0 Likes
Zworthkey
Shopify Partner
551 38 87

Hii,

 check out This video.

https://youtu.be/1rQnP9sPD0w

Thank you.

 

Want to modify or Customize your theme, Hire us. or Want to know more. Read our Shopify Blogs.
If helpful then please Like and Accept the Solution.
Email us: sales@zworthkey.com Contact us: https://www.zworthkey.com/
0 Likes
maritimesaver
New Member
4 0 0

This video shows me how to create a Contact Us page and not how to add more fields to my registration form and have them saved under each customer's profile. 

0 Likes

@maritimesaver 

Custom fields in the contact form require adding codes to your theme files.

Note: Take a backup of your theme before implementing the solution below.

I followed this tutorial to add the Company Name and Address fields to the Simple theme contact form. I added the code to a fresh install of the theme.

Steps:

1. From your Shopify admin, go to Online Store > Themes.

2. Find the theme you want to edit, and then click Actions > Edit code.

3. In the Templates directory, click page.contact.liquid.

4. Replace the code with the code below. If you are using the default contact page. 

 

 

 

<!-- /templates/page.contact.liquid -->
<h1 class="small--text-center">{{ page.title }}</h1>

<div class="rte">
  {{ page.content }}
</div>

<div class="contact-form form-vertical">
  {% form 'contact' %}

    {% if form.posted_successfully? %}
      <p class="form--success">
        {{ 'contact.form.post_success' | t }}
      </p>
    {% endif %}

    {{ form.errors | default_errors }}

    <label for="ContactFormName" class="label--hidden">{{ 'contact.form.name' | t }}</label>
    <input type="text" id="ContactFormName" name="contact[{{ 'contact.form.name' | t }}]" placeholder="{{ 'contact.form.name' | t }}" autocapitalize="words" value="{% if form[name] %}{{ form[name] }}{% elsif customer %}{{ customer.name }}{% endif %}">

    <label for="ContactFormEmail" class="label--hidden">{{ 'contact.form.email' | t }}</label>
    <input type="email" id="ContactFormEmail" name="contact[email]" placeholder="{{ 'contact.form.email' | t }}" autocorrect="off" autocapitalize="off" value="{% if form.email %}{{ form.email }}{% elsif customer %}{{ customer.email }}{% endif %}">

    <label for="ContactFormPhone" class="label--hidden">{{ 'contact.form.phone' | t }}</label>
    <input type="tel" id="ContactFormPhone" name="contact[{{ 'contact.form.phone' | t }}]" placeholder="{{ 'contact.form.phone' | t }}" pattern="[0-9\-]*" value="{% if form[phone] %}{{ form[phone] }}{% elsif customer %}{{ customer.phone }}{% endif %}">

    <label for="CompanyName" class="label--hidden">{{ 'contact.form.company' | t }}</label>
    <input type="text" id="ContactFormCompany" name="contact[{{ 'contact.form.company' | t }}]" placeholder="{{ 'contact.form.company' | t }}" autocapitalize="words" value="{% if form[name] %}{{ form[company] }}{% elsif customer %}{{ customer.company }}{% endif %}">
  
    <label for="Address" class="label--hidden">{{ 'contact.form.address' | t }}</label>
    <input type="text" id="ContactFormAddress" name="contact[{{ 'contact.form.address' | t }}]" placeholder="{{ 'contact.form.address' | t }}" autocapitalize="words" value="{% if form[name] %}{{ form[address] }}{% elsif customer %}{{ customer.address }}{% endif %}">
  
    <label for="ContactFormMessage" class="label--hidden">{{ 'contact.form.message' | t }}</label>
    <textarea rows="10" id="ContactFormMessage" name="contact[{{ 'contact.form.message' | t }}]" placeholder="{{ 'contact.form.message' | t }}">{% if form.body %}{{ form.body }}{% endif %}</textarea>

    <input type="submit" class="btn" value="{{ 'contact.form.send' | t }}">

  {% endform %}
</div>

 

 

 

 6. Click Save

 

Now you will see two fields in the contact form. But you need to add language translation fields.

Follow the steps below: 

1. From your Shopify admin, go to Online Store > Themes.

2. Find the theme you want to edit, and then click Actions > Edit code.

3. In the Locales directory, click en.default.json.

4. Search for "contact": tag.

5. Add the following code below "phone": "Phone Number",

 

 

"company": "Company Name", 
      "address": "Address", 

 

 

6. Click Save.

Here's how my contact form looks like: 

SarvMarketing_0-1615404664448.png

and in the message in the email:

gjfghhjhdfhdf.png



If helpful then please Like and Accept the Solution.

Best,
Sarv
0 Likes