Contact form : hidden placeholder field with {{product.url}} is empty when submitted

Highlighted
Anonymous
Not applicable
0 0 54

Hi Guys,

 

I need to identify from what product page my contact form was submitted.

So I added the code below to the product.form.liquid.

After submission, all fields in the form work well, apart from the hidden product field.

When I receive an email with the submitted date the Product field in the email comes like this: "Product:          ".

Would appreciate if you can help to resolve this issue.

 

The code for the product field:

<label class='hide' for="ContactFormProduct-{{ blockId }}"></label>
<input type="text" class ='hide' id="ContactFormProduct-{{ blockId }}" name="contact[Product-id]" placeholder="{{product.url}}">

 

Full contact form code:

{%- assign blockId = block.id -%}
{% if product %}
{%- assign blockId = block.id | append: product.id -%}
{% endif %}

<div class="index-section">
<div class="page-width">

<div class="grid">
<div class="grid__item{% if block.settings.narrow_column %} medium-up--three-quarters medium-up--push-one-eighth{% endif %}">
{% if block.settings.title != blank %}
<div class="section-header">
<h2 class="section-header__title">
{{ block.settings.title }}
</h2>
</div>
{% endif %}

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

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

{{ form.errors | default_errors }}

<div class="grid grid--small">
<div class="grid__item medium-up--one-half">
<label for="ContactFormName-{{ blockId }}"></label>
<input type="text" id="ContactFormName-{{ blockId }}" class="input-full" name="contact[name]"placeholder="NAME" required autocapitalize="words" value="{% if form.name %}{{ form.name }}{% elsif customer %}{{ customer.name }}{% endif %}">
</div>

<div class="grid__item medium-up--one-half">
<label for="ContactFormEmail-{{ blockId }}"></label>
<input type="email" id="ContactFormEmail-{{ blockId }}" class="input-full" name="contact[email]" placeholder = "EMAIL" required autocorrect="off" autocapitalize="off" value="{% if form.email %}{{ form.email }}{% elsif customer %}{{ customer.email }}{% endif %}">
</div>
</div>
<div class="grid grid--small">
<div class="grid__item medium-up--one-half">
<label for="ContactFormDate-{{ blockId }}"></label>
<input type="text" id="ContactFormDate-{{ blockId }}" class="input-full" name="contact[date]"placeholder='EVENT DATE' required">
</div>

<div class="grid__item medium-up--one-half">
<label for="ContactFormTime-{{ blockId }}"></label>
<input type="text" id="ContactFormTime-{{ blockId }}" class="input-full" name="contact[time]" placeholder ="EVENT TIME" required">
</div>
</div>

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

<label for="ContactFormMessage-{{ blockId }}"></label>

<textarea rows="5" id="ContactFormMessage-{{ blockId }}" class="input-full" name="contact[body]" placeholder="MORE DETAILS" required>{% if form.body %}{{ form.body }}{% endif %}</textarea>

<label class='hide' for="ContactFormProduct-{{ blockId }}"></label>
<input type="text" class ='hide' id="ContactFormProduct-{{ blockId }}" name="contact[Product-id]" placeholder="{{product.url}}">

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

{% endform %}
</div>
</div>
</div>
</div>
</div>

 

0 Likes
New Member
12 0 0

If you change this a tiny bit it should work: 

<label class='hide' for="ContactFormProduct-{{ blockId }}"></label>
<input type="text" class ='hide' id="ContactFormProduct-{{ blockId }}" name="contact[Product-id]" placeholder="{{product.url}}">

To: 

<label class='hide' for="ContactFormProduct-{{ blockId }}"></label>
<input type="text" class ='hide' id="ContactFormProduct-{{ blockId }}" name="contact[Product-id]" value="{{product.url}}">

You may also consider using "value="{{ product.handle }}" to get the unique ID in place of the full URL.  

 

Good luck. 

0 Likes