Contact form returns error: "Email - is invalid"

Highlighted
Excursionist
31 0 5

Liquid custom contact form for employment application keeps indicating email is is invalid. I even tried removing class="required" but still returned error:

<pre><code><div class="container cf">
  <div class="page-header cf">
    <h1 class="majortitle">{{ page.title }}</h1>
  </div>

  <div class="row-spacing">
    <div class="user-content">
      {{ page.content }}
    </div>

    <div id="template">
      {% form 'contact' %}
      {% if form.posted_successfully? %}
      <p>{{ 'contact.form.post_success' | t }}</p>
      {% endif %}
  
      {% if form.errors %}
      <ul class="errors">
        {% for field in form.errors %}
        <li>{{ field | replace: 'body','Message' | capitalize }} - {{ form.errors.messages[field] }}</li>
        {% endfor %}
      </ul>
      {% endif %}

      <div class="large_form">
        <label for="contact_name">Full Name</label>
        <input type="text" class="required" id="contact_name" name="contact[name]" />
      </div>
      <div class="large_form">
        <label for="contact_email">{{ 'contact.form.email' | t }}</label>
        <input type="email" class="required" id="contact_email" name="contact[Email]" />
      </div>
      <div class="large_form">
        <label for="contact_phone">Mobile Phone Number</label>
        <input type="text" class="required phone" id="contact_phone" name="contact[Phone]" />
      </div>
      <div class="large_form">
        <label for="contact_local">City, State, Country</label>
        <input type="text" class="required" id="contact_local" name="contact[Local]" />
      </div>
      <div class="large_form">
        <label for="contact_skills">Special Skills</label>
        <input type="text" class="required" id="contact_skills" name="contact[Special Skills]" />
      </div><br />

      <div class="large_form">
        <label for="contact_current_company">Current Company Employment</label>
        <input type="text" id="contact_current_company" name="contact[Current Company]" />
      </div>
      <div class="large_form">
        <label for="contact_current_company_local">Current City, State, Country</label>
        <input type="text" id="contact_current_company_locale" name="contact[Current Locale]" />
      </div>
      <div class="large_form">
        <label for="contact_current_company_dates">Current Dates (from, to)</label>
        <input type="text" id="contact_current_company_dates" name="contact[Current Dates]" />
      </div>
      <div class="large_form">
        <label for="contact_current_company_position">Current Job Title</label>
        <input type="text" id="contact_current_company_position" name="contact[Current Job Title]" />
      </div><br />

      <div class="large_form">
        <label for="contact_prior1_company">Prior Company Employment</label>
        <input type="text"  id="contact_prior1_company" name="contact[Prior Company]" />
      </div>
      <div class="large_form">
        <label for="contact_prior1_company_local">Prior City, State, Country</label>
        <input type="text" id="contact_prior1_company_locale" name="contact[Prior Locale]" />
      </div>
      <div class="large_form">
        <label for="contact_prior1_company_dates">Prior Dates (from, to)</label>
        <input type="text" id="contact_prior1_company_dates" name="contact[Prior Dates]" />
      </div>
      <div class="large_form">
        <label for="contact_prior1_company_position">Prior Job Title</label>
        <input type="text" id="contact_prior1_company_position" name="contact[Prior Job Title]" />
      </div><br />

      <h2>Education</h2>

       <div>
        <label for="Contact_grade">Highest Grade</label>
        <select id="Contact_grade" name="contact[Highest Grade]">
          <option value="">-- Select --</option>
          <option>High School</option>
          <option>Some College</option>
          <option>Associate Arts</option>
          <option>Bachelor's Degree</option>
          <option>Master's Degree</option>
        </select> 
      </div>

      <div class="large_form">
        <label for="contact_college">College Name</label>
        <input type="text" id="contact_college" name="contact[College Name]" />
      </div>
      <div class="large_form">
        <label for="contact_college_local">College City, State</label>
        <input type="text" id="contact_college_locale" name="contact[College Locale]" />
      </div>
      <div class="large_form">
        <label for="contact_college_dates">College Years (from, to)</label>
        <input type="text" id="contact_college_dates" name="contact[College Years]" />
      </div>
      <div class="large_form">
        <label for="contact_college_major">College Major, Minor</label>
        <input type="text" id="contact_college_major" name="contact[College Major]" />
      </div><br />

      <div class="large_form">
        <label for="contact_high_school">High School Name</label>
        <input type="text" id="contact_high_school" name="contact[High School Name]" />
      </div>
      <div class="large_form">
        <label for="contact_high_school_local">High School City, State</label>
        <input type="text" id="contact_high_school_locale" name="contact[High School Locale]" />
      </div>
      <div class="large_form">
        <label for="contact_high_school_dates">High School Graduation Year</label>
        <input type="text" id="contact_high_school_dates" name="contact[High School Graduation Year]" />
      </div>

      <h2>Availability</h2>

      <div>
        <label for="contact_position">Desired Position?</label>
        <select id="contact_position" class="required" name="contact[Desired Position]">
          <option value="">-- Select --</option>
          <option>Salesperson</option>
          <option>Customer Satisfaction Rep</option>
          <option>Order Fulfillment Packer</option>
          <option>Internship</option>
          <option>Other</option>
        </select> 
      </div>
      <div>
        <label for="contact_availability">Availability?</label>
        <select id="contact_availability" name="contact[Availability]">
          <option value="">-- Select --</option>
          <option>Part-Time Remote</option>
          <option>Full-Time Remote</option>
          <option>Full-Time Onsite</option>
          <option>Freelance Onsite</option>
        </select> 
      </div>

      <div class="large_form">
        <label for="message">{{ 'contact.form.message' | t }}</label>
        <textarea id="message" name="contact[body]"></textarea>
      </div>

      <div class="action_bottom">
        <input type="submit" value="Apply" />
      </div>
      {% endform %}
      <p class="align-center caption" style="margin: 30px 5%">Apply only for available position. Complete all sections.</p>
    </div>
  </div>
</div>

2 Likes
Highlighted
New Member
2 0 0

Try to change the snippet 'name="contact[Email]"' to 'name="contact[email]"' (letter "e" lower case).

Exemple:

<input type="email" class="required" id="contact_email" name="contact [email]" />

0 Likes