Captcha is shown after contact us form is submitted

Highlighted
Tourist
7 0 5

I have a contact us form in the site as shown below. The form when submitted redirects to /challenge#contact_form and shows the captcha, upon which the form is submitted. This captcha is shown because of the setting enabled in Preferences > Spam protection > Enable google recaptcha.

How can I make the captcha show up in the form itself and not after the form is submitted ?

<div class="popup-form formContactUs">
  {% form 'contact' %}
  <div class="formContent">
    {% if form.posted_successfully? %}
    <div class="alert alert-success">
      {{ 'contact.form.post_success' | t }}
    </div>
    {% endif %}
    {% if form.errors %}
    <div class="alert alert-danger">
      {{ form.errors | default_errors }}
    </div>
    {% endif %}
    <div class="row">
      <div class="form-group">
        <input type="hidden" class="formHeading" name="contact[form]" value="Inquiry For - {{ product.title }}">
      </div>
      <div class="col-xs-12">
        <div class="form-group">
          {% assign name_attr = 'contact.form.name' | t | handle %}
          <label for="ContactFormName" class="hidden-label">{{ 'contact.form.name' | t }}</label>
          <input type="text" id="ContactFormName" class="form-control" name="contact[{{ name_attr }}]" placeholder="{{ 'contact.form.name' | t }}" autocapitalize="words" value="{% if form[name_attr] %}{{ form[name_attr] }}{% elsif customer %}{{ customer.name }}{% endif %}">
        </div>
      </div>
      <div class="col-xs-12">
        <div class="form-group">
          <label for="ContactFormEmail" class="hidden-label">{{ 'contact.form.email' | t }}</label>
          <input type="email" id="ContactFormEmail" class="form-control" name="contact[email]" placeholder="{{ 'contact.form.email' | t }}" autocorrect="off" autocapitalize="off" value="{% if form.email %}{{ form.email }}{% elsif customer %}{{ customer.email }}{% endif %}">
        </div>
      </div>
    </div>
    <div class="form-group">
      <label for="ContactFormMessage" class="hidden-label">{{ 'contact.form.message' | t }}</label>
      <textarea rows="3" id="ContactFormMessage" class="form-control" name="contact[body]" placeholder="{{ 'contact.form.message' | t }}">{% if form.body %}{{ form.body }}{% endif %}</textarea>
    </div>
    <div class="form-button">
      <input type="submit" class="btn btnVelaOne" value="{{ 'contact.form.send' | t }}">
    </div>
  </div>
  {% endform %}
</div>

 

0 Likes