Error notifications not working on form

I’ve been trying to debug my order form yet I’m still stuck on why the error notifications do not work when submitting the form without all the required fields being filled.

The form is contact form 7 a wordpres plugin.
If anyone can see where the js is not loading i’d be very grateful.

www.stevanbarry.com/beta/corndolly/order is the page.

Hi,

in your WP backend, could you go to:

Plugins > Installed Plugins > Contact Form 7 > Settings > Form name

and post the contents of the form.

Sorry I was being lazy,

The shortcode for the form is - [contact-form-7 id=“845” title=“order-form”]

`<div class="row">
   <div class="col-xs-12 col-md-6">
<p>Add your name</p>
       [text* text-name class:form-control placeholder "name*"]
   </div>
   <div class="col-xs-12 col-md-6">
<p>Enter your email</p>
       [email* your-email class:form-control placeholder "email*"]
   </div>
</div>

<div class="row">
   <div class="col-xs-12 col-md-6">
<p>Add your phone number*</p>
       [text* text-contact-number class:form-control placeholder "028 1234 4321*"]
   </div>
   <div class="col-xs-12 col-md-6">
<p>Select a cake size*</p>
       [select* cake-size class:form-control include_blank "4x8 (8-10 slices)" "8x8 (20-25 slices)" "10x8 (30 slices)" "12x8 (35 - 40 slices)" "14x8 (40-50 slices)" "14x14 (50+ slices)" "28x14 (100+ slices)"]
   </div>
</div>
<div class="row">
   <div class="col-xs-12 col-md-6">
<p>Select your cake filling*</p>
       [select* sponge-type class:form-control include_blank "Plain sponge with jam and cream filling" "Chocolate sponge with chocolate cream filling" "Chocolate fudge cake" "Fresh cream sponge" "Gluten free plain sponge with jam and cream" "Gluten free chocolate sponge"]
   </div>
   <div class="col-xs-12 col-md-6">
<p>Add a photo/image to put on your cake (max file size 4mb - only jpg jpeg png files):</p>
       [file your-file filetypes:png|jpg|jpeg limit:5mb class:form-control]
   </div>
</div>
<div class="row">
   <div class="col-xs-12 col-md-6">
<p>Enter a message to put on the cake</p>
       [textarea textarea-message 10x3 class:form-control placeholder "e.g 'Happy Birthday'"]
   </div>
   <div class="col-xs-12 col-md-6">
       <p>Please add any other details including any links to pictures for your cake</p>
       [textarea textarea-extra-info 10x3 class:form-control placeholder "e.g. Sugar paste icing / colour of writing etc."]
   </div>
</div>
<div class="row">
   <div class="col-xs-12 col-md-6">
       <p>Select a date you would like to collect*</p>
       [text* date-collect class:form-control class:vu_datepicker placeholder "Select date"]
   </div>
   <div class="col-xs-12 col-md-6">
<p>Select a location on where you would like to collect*</p>
       [select* collection class:form-control include_blank "Hill Street, Newry" "Monaghan Street, Newry" "Church Street, Warrenpoint" "Bakery, Greenbank Ind Est, Newry"]
   </div>
</div>
<br/>
<button type="submit" class="btn">Submit Order</button>
<p>*Required field</p>`

I copied the HTML you posted into a contact form 7 form on my site and things worked as expected. When I submitted an empty form I saw several validation errors asking me to complete required fields. So it seems that the form’s HTML is fine.

Did you check the mail tab for the contact form? Is anything out of place there?

One thing I noticed is that when you submit an empty form on your site, there is an error message in the browser’s console:

POST http://stevanbarry.com/beta/corndolly/order/ 404 (Not Found)

Thanks Pullo really appreciate this - yes I too found the 404 - I have no idea why this has started to happen. I feel its an error with the theme i’m using.

No worries : )

Maybe try disabling the theme. Does that make a difference?

Tried everything - pulling the hair out at this stage. Was working all well and then boom. Only change I made was to allow the calendar function to work on IE but it worked with that… AAAAAGGGGHHHH!!!

So you got it working?

No i was reffering to a past time sorry. Possible solution is with JS not loading correctly - http://contactform7.com/why-isnt-my-ajax-contact-form-working-correctly/ so I’m going to explore any conflicts resulting in the 404.
I shall report back.

Some of the errors found

Okay have it sussed!!! Ended up it was a permalink / htaccess issue which I need to sort. When I take off post name as links it works fine - http://stevanbarry.com/beta/corndolly/?page_id=177

AAAAAAAAGGGGGGGHHHHHHHHHHHH!!!

Thank @James_Hibbard

1 Like

This topic was automatically closed 91 days after the last reply. New replies are no longer allowed.