Liquid, JavaScript, themes, sales channels
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.
hii
we will help you
pls share your site detail
thank u
what site details are you asking for?
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.
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:
and in the message in the email:
Portrait of Stephen positioned next to an image of planet Earth, with the Stephen's World ...
By JasonH Mar 18, 2024Digital marketers and app developers have tracked activity in apps and websites for yea...
By Ollie Mar 13, 2024February was an exciting month with Shopify Editions, informative webinars, and more! F...
By JasonH Mar 7, 2024