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

Opt-In check box on contact form not working

Solved

Opt-In check box on contact form not working

HTX-Fluid-Power
Explorer
57 0 16

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.  

 

HTXFluidPower_0-1733237015707.png

 

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>

Accepted Solution (1)

Guleria
Shopify Partner
4299 825 1189

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

 

- Elevate Your Store with Expert Shopify Services. Email: guleriathakur43@gmail.com - Need a quick fix or a tailored customization? I’ve got you covered.
- Looking to enhance your pages? Try GEMPAGES- a powerful drag & drop page builder.
- Let’s make your store stand out. Get in touch today!
- My Apps: Productify Groups – Smart product grouping made easy.

View solution in original post

Replies 4 (4)

Guleria
Shopify Partner
4299 825 1189

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

 

- Elevate Your Store with Expert Shopify Services. Email: guleriathakur43@gmail.com - Need a quick fix or a tailored customization? I’ve got you covered.
- Looking to enhance your pages? Try GEMPAGES- a powerful drag & drop page builder.
- Let’s make your store stand out. Get in touch today!
- My Apps: Productify Groups – Smart product grouping made easy.
SamRiad
Shopify Partner
2 0 0

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>
Guleria
Shopify Partner
4299 825 1189

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

- Elevate Your Store with Expert Shopify Services. Email: guleriathakur43@gmail.com - Need a quick fix or a tailored customization? I’ve got you covered.
- Looking to enhance your pages? Try GEMPAGES- a powerful drag & drop page builder.
- Let’s make your store stand out. Get in touch today!
- My Apps: Productify Groups – Smart product grouping made easy.
SamRiad
Shopify Partner
2 0 0

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 

 

SamRiad_0-1740590141683.png