Shopify themes, liquid, logos, and UX
We're moving the community! Starting July 7, the current community will be read-only for approx. 2 weeks. You can browse content, but posting will be temporarily unavailable. Learn more
I added an opt-in check box under a contact form but when submitting on the form, it does not show up on the email result from the form; only name, email, phone number and message. What else do I need to do to make it functional? Below is a screenshot and the code used.
Code used on contact-form.liquid:
<input type="checkbox" class="input-checkbox" id="consent" required>
<label for="consent-message"> <span>Opt-In to receive text messages from <strong>HTX Fluid Power</strong> at the phone number provided above. <br><br>Message frequency varies and may include order updates, product information/pricing, promotional products, etc. Message and data rates may apply. Opt-out at any time by replying 'stop' or 'unsubscribe'.</span></label>
Solved! Go to the solution
This is an accepted solution.
Hello @HTX-Fluid-Power ,
Name attribute is missing in input.
Update
<input type="checkbox" class="input-checkbox" id="consent" required>
to
<input type="checkbox" name="contact[consent]" class="input-checkbox" id="consent" required>
If problem solved don't forget to Like it and Mark it as Solution!
And if you need help with customization/code part you can contact me for services
You can find the email in the signature below.
Thanks
This is an accepted solution.
Hello @HTX-Fluid-Power ,
Name attribute is missing in input.
Update
<input type="checkbox" class="input-checkbox" id="consent" required>
to
<input type="checkbox" name="contact[consent]" class="input-checkbox" id="consent" required>
If problem solved don't forget to Like it and Mark it as Solution!
And if you need help with customization/code part you can contact me for services
You can find the email in the signature below.
Thanks
Hello
I have the below code, but I am not receiving the checkbox status (checked or not checked) in the notification email. can you please help me?
<div class="contact-form form-vertical">
{%- assign formId = 'ContactForm' -%}
{% form 'contact', id: formId %}
{% include 'form-status', form: form, form_id: formId %}
<div class="grid grid--half-gutters">
<div class="grid__item medium-up--one-half">
<label for="{{ formId }}-name">{{ 'contact.form.name' | t }}</label>
<input type="text" id="{{ formId }}-name" name="contact[{{ 'contact.form.name' | t }}]" value="{% if form[name] %}{{ form[name] }}{% elsif customer %}{{ customer.name }}{% endif %}">
</div>
<div class="grid__item medium-up--one-half">
<label for="{{ formId }}-email">{{ 'contact.form.email' | t }} <span aria-hidden="true">*</span></label>
<input
type="email"
id="{{ formId }}-email"
name="contact[email]"
autocorrect="off"
autocapitalize="off"
value="{% if form.email %}{{ form.email }}{% elsif customer %}{{ customer.email }}{% endif %}"
aria-required="true"
{%- if form.errors contains 'email' -%}
class="input--error"
aria-invalid="true"
aria-describedby="{{ formId }}-email-error"
{%- endif -%}
>
{%- if form.errors contains 'email' -%}
<span id="{{ formId}}-email-error" class="input-error-message">
<span class="visually-hidden">{{ 'general.accessibility.error' | t }} </span>
{% include 'icon-error' %}
<span>{{ form.errors.translated_fields['email'] | capitalize }} {{ form.errors.messages['email'] }}.</span>
</span>
{%- endif -%}
</div>
</div>
<label for="{{ formId }}-phone">{{ 'contact.form.phone' | t }}</label>
<input type="tel" id="{{ formId }}-phone" name="contact[{{ 'contact.form.phone' | t }}]" pattern="[0-9\-]*" value="{% if form[phone] %}{{ form[phone] }}{% elsif customer %}{{ customer.phone }}{% endif %}">
<p style="display: inline-flex; align-items: baseline;"><input type="checkbox" class="input-checkbox" id="{{ formID }}-consent" required>
<label for="{{ formID }}-consent_checkbox">By checking this box you agree to receive text messages from Grappling SMARTY, at the number provided. Frequency messages may vary. Data rates may apply, text HELP to 514-613-5700 for assistance. Reply stop to opt-out at any time. </label></p>
<label for="{{ formId }}-message">{{ 'contact.form.message' | t }}</label>
<textarea rows="10" id="{{ formId }}-message" name="contact[{{ 'contact.form.message' | t }}]">{% if form.body %}{{ form.body }}{% endif %}</textarea>
<input type="submit" class="btn" value="{{ 'contact.form.submit' | t }}">
{% endform %}
</div>
</div>
</div>
</div>
Hello @SamRiad ,
Same issue name attribute is missing
Update
<input type="checkbox" class="input-checkbox" id="{{ formID }}-consent" required>
to
<input type="checkbox" name="contact[consent]" class="input-checkbox" id="{{ formID }}-consent" required>
Regards
Guleria
Thank you.
Now I have this code in place after updating:
<p style="display: inline-flex; align-items: baseline;"><input type="checkbox" name="contact[consent]" class="input-checkbox" id="{{ formID }}-consent" required>
<label for="{{ formID }}-consent_checkbox"><span>Yes, text me! By checking this box, I consent to receive SMS messages from <strong>COMPANY NAME</strong>. Message and data rates may apply. Message frequency may vary. Text "STOP" at any time to opt out. Text "HELP" for assistance. For more information, please visit our <a href="https://COMPANY.com/policies/privacy-policy" rel="noopener" target="_blank">Privacy Policy</a> and SMS <a href="https://COMPANY.com/policies/terms-of-service" rel="noopener" target="_blank">Terms of Service</a>.</span></label></p>
the problem now is that the entire paragraph looks like a link (cursor becomes a hand) and the links are not underlined.
Any idea why?
Thank you again