Forum

Thread tagged as: Problem, Forms

Form not Submitting in IE

I have a form that is working fine and submitting in Chrome Firefox & Safari. However, I've tested with Internet Explorer 8 -11 and I've found that clicking the send button just links back to the top of the page, and the form is not processed. All error messages work fine in IE.

Here is the debug info from the form page:

DIAGNOSTICS:
SELECT * FROM perch2_pages WHERE pagePath='/setup-a-consultation.php' LIMIT 1
SELECT * FROM perch2_pages WHERE pagePath='/setup-a-consultation.php' LIMIT 1
Using template: /templates/pages/attributes/default.html
Using sub-template: /templates/pages/attributes/seo.html
SELECT * FROM perch2_pages WHERE pageNew=0 AND pageHidden=0 ORDER BY pageTreePosition ASC
SELECT pageTreePosition FROM perch2_pages WHERE pagePath='/setup-a-consultation.php' LIMIT 1
SELECT pageID FROM perch2_pages WHERE pageTreePosition IN ('000-004', '000')
Using template: /templates/navigation/off-canvas-menu.html
SELECT * FROM perch2_pages WHERE pageNew=0 AND pageHidden=0 ORDER BY pageTreePosition ASC
SELECT pageTreePosition FROM perch2_pages WHERE pagePath='/setup-a-consultation.php' LIMIT 1
SELECT pageID FROM perch2_pages WHERE pageTreePosition IN ('000-004', '000')
Using template: /templates/navigation/main-menu.html
SELECT regionKey, regionHTML FROM perch2_content_regions 
WHERE regionPage='/setup-a-consultation.php' OR regionPage='*'

I can send the template code and the address to the live site privately.

Justin Kaiser

Justin Kaiser 0 points

  • 7 years ago
Drew McLellan

Drew McLellan 2638 points
Perch Support

Is that the diagnostics after the form has been submitted?

I get the same debug information both before and after clicking the submit button (so it doesn't seem like it is really submitting). It's behaving exactly as if the submit button was just a link back to the top of the form.

Drew McLellan

Drew McLellan 2638 points
Perch Support

Do you have any rewrite rules in place that might be affecting it?

I have forwarding setup to go from mysite.com to https://mysite.com. I'm hosting with Media Temple grid and followed thier guide to setup my htaccess file. Below are the instructions that I followed: https://kb.mediatemple.net/questions/85/Using+.htaccess+rewrite+rules#-htaccess--

I'm also using the free version of cloudflare CDN, I'm not sure if that would affect anything or not.

Drew McLellan

Drew McLellan 2638 points
Perch Support

I'm wondering what might trip it up in IE but nothing else. Are you using HTML5 form validation?

The form template that I'm using is based straight off of the one in the perch docs, it's really just a "contact us" template with a few extra information fields. I'm not sure if using the "required" value within the perch:input tag would trigger form validation at the browser level or at the server level?

The site is also built using the foundation 5 framework, I'm not sure if that adds anything to the mix, but I would suspect that it would be compatible with, at least, the more modern versions of IE.

<perch:form id="consultation" method="post" app="perch_forms">

<div class="row">
  <div class="small-12 columns">
    <h1>Setup a Consultation</h1>
    <p>I’d love to hear from you to setup a free consultation or answer any questions you may have. To reach me fill out the contact form below, or send an email to <a href="mailto:me@mysite.com">me@mysite.com</a>.</p>
  </div>
</div>

<div class="row">
  <div class="large-2 columns">
    <perch:label class="inline" for="your_name">Your Name</perch:label>
  </div>
  <div class="large-10 columns">

    <perch:input type="text" id="your_name" required="true" label="Your Name" placeholder="Jane Smith" /></perch:input>

    <perch:error class="error" for="your_name" type="required"><p class="medium alert button">Please add your name.</p></perch:error>
  </div>
</div> 

<div class="row">
  <div class="large-2 columns">

    <perch:label class="inline" for="your_email">Your Email</perch:label>

  </div>
  <div class="large-10 columns">

    <perch:input type="email" id="your_email" label="Your Email" required="true" placeholder="janesmith@gmail.com" required="true"/></perch:input>

    <perch:error for="your_email" class="error" type="required"><p class="medium alert button">Please add your email address.</p></perch:error>

    <perch:error for="your_email" class="error" type="format"><p class="medium alert button">Please check the format of your email address.</p></perch:error>

  </div>
</div> 

<div class="row">
  <div class="large-2 columns">
    <perch:label class="inline" for="due_date">Estimated Due Date</perch:label>
  </div>
  <div class="large-10 columns">
    <perch:input type="date" id="due_date" label="Estimated Due Date" placeholder="mm/dd/yyyy" required="true"/>
    <perch:error for="due_date" type="required"><p class="medium alert button">Please add your due date.</p></perch:error>
  </div>
</div>

<div class="row">
  <div class="small-12 columns altbg">
    <fieldset>
      <legend>Optional Info</legend>
      <div class="row">
        <div class="small-12 columns collapse">
          <perch:label for="provider">Type of Care Provider <em>(i.e. individual Midwife, Midwife Group, doctor etc.)</em></perch:label>
          <perch:input type="text" id="provider" label="Type of Care Provider" placeholder="Dr. Elliot Reid"/>
        </div>
      </div>

      <div class="row">
        <div class="small-12 columns collapse">
          <perch:label for="location">Birth Location <em>(i.e. Name of Hospital, Birthing Center or Your Home)</em></perch:label>
          <perch:input type="text" id="location" label="Birth Location" placeholder="Sacred Heart"/>
        </div>
      </div>

      <div class="row">
        <div class="small-12 columns collapse">
          <perch:label for="where">General Area Where You Live</perch:label>
          <perch:input type="text" id="where" label="General Area Where You Live" placeholder="Minneapolis"/>
        </div>
      </div>
    </fieldset>
  </div>
</div>

<div class="row">
  <div class="small-12 columns bump1line">

    <perch:label for="message">Message</perch:label>
    <perch:input type="textarea" id="message" required="true" label="Message" />
    <perch:error for="message" type="required" class="medium alert button"><p class="medium alert button">Please write a message.</p></perch:error>

    <perch:input type="submit" id="submit" class="radius button" value="Send"/>

    <perch:success>
    <div class="row">
      <div class="small-12 columns">
        <perch:content id="success" type="textarea" label="Thank you message" textile="true" editor="markitup" show-form="false"/>
      </div>
    </div>
  </perch:success>
</div>
</div>

</perch:form>
Drew McLellan

Drew McLellan 2638 points
Perch Support

I suspect the date field. I don't think IE supports that field type, and your placeholder is in the wrong format (should be ISO YYYY-MM-DD)

Drew, you're absolutely correct. I changed the date field to just a text field and it worked fine. I didn't realize that IE had such limited support of that.