This is a pretty common problem if your javascript files aren’t loaded properly. Please check this page: https://contactform7.com/why-isnt-my-ajax-contact-form-working-correctly/
Thread Starter
tbo460
(@thibotus01)
Well my JS files are loaded properly and I don’t have any JS error. If you look at my code.
If you could be more precise in your analysis or tell me what JS you are using that could interfer.
Thank you, Thibault
Thread Starter
tbo460
(@thibotus01)
Plus, the form is working without your plugin. So something interfer with your JS.
with my plugin disabled, are you sure the page is not reloading when submitting the form?
Thread Starter
tbo460
(@thibotus01)
The Ajax just doesn’t work but it submit correctly the form.
Please check the link again: https://contactform7.com/why-isnt-my-ajax-contact-form-working-correctly/
Contact form 7 is not designed to work without ajax submit. If the ajax submit is not working, it means contact form 7 is not working as it should. Hence, if contact form 7 is not working as it should, there is nothing I can do at this point to help you. You need to make sure your contact form works properly WITH ajax submit.
Thread Starter
tbo460
(@thibotus01)
I had this in my functions.php – as the files were loading everywhere.
`// Remove Contact Form 7 to load everywhere
add_filter( ‘wpcf7_load_js’,’__return_false’ );
add_filter( ‘wpcf7_load_css’,’__return_false’ );
So I removed it, the form works now fine with AJAX, but with your plugin it still doesn’t work and submit the form even with empty fields.
You can also check here that everything is fine without your plugin: https://staging-simusamobi.kinsta.com/contact-us/
-
This reply was modified 7 years, 11 months ago by
tbo460.
I can submit the form by leaving the subject and message fields empty
I think I see the problem. I believe you are using duplicate names for some form fields. Please paste your form code here so I can verify.
Thread Starter
tbo460
(@thibotus01)
You were right I had duplicate names. I didn’t think it was an issue this is two seperate forms…
But Thank you, it works properly now 🙂
-
This reply was modified 7 years, 11 months ago by tbo460.
Thread Starter
tbo460
(@thibotus01)
I notice the animation doesn’t work. I checked it’s enabled and set to 200.
Something else I should look into?
Thank you,
you mean the spinning arrows? Working fine over here.
Thread Starter
tbo460
(@thibotus01)
No your option say: ” Use animations while showing/hiding groups (Default: Enabled)”.
So it’s when you click on the button to show / hide groups.
Please share your form code. Are you using any other plugins or custom scripts? It looks like another script is hiding/showing fields instead of letting the plugin handle it.
When the show-hide animation script runs the fields already appear to be switched..
Thread Starter
tbo460
(@thibotus01)
Form code:
<p class="radio-buttons-row">Choose the topic of your inquiry [radio radio-subject id:select-subject use_label_element class:radio-buttons "Sales" "Support"]</p>
<p> </p>
[group group-sale]
<div class="input half">
<label for="name">Name <span class="req">*</span></label>
[text* your-name akismet:author id:name]
</div>
<div class="input half">
<label for="name">E-mail <span class="req">*</span></label>
[email* your-email akismet:author_email id:email]
</div>
<div class="input">
<label for="subject">Subject <span class="req">*</span></label>
[text your-subject id:subject]
</div>
<div class="input">
<label for="message">Message <span class="req">*</span></label>
[textarea* your-message id:message]
</div>
<div class="submit">
[submit class:button class:blue "SEND YOUR MESSAGE"]
</div>
<p> </p>
[/group]
[group group-tech]
<div class="input half">
<label for="name">Name <span class="req">*</span></label>
[text* your-name2 akismet:author id:name]
</div>
<div class="input half">
<label for="name">E-mail <span class="req">*</span></label>
[email* your-email2 akismet:author_email id:email]
</div>
<div class="input">
<label for="message">Message <span class="req">*</span></label>
[textarea* your-message2 id:message placeholder "Please be specific by describing any error messages you can see or hear. Don't hesitate to attach a screenshot below."]
</div>
<p>
<i class="fa fa-cogs"></i> Other important informations that will help us to solve the issue quicker.</p>
<div class="input half">
<label for="usphone">US phone number</label>
[text your-usphone id:usphone placeholder "1112223333"]
</div>
<div class="input half">
<label for="phonemodel">Phone model</label>
[text your-phonemodel id:phonemodel placeholder "Your exact phone model"]
</div>
<div class="input">
<label for="screenshot">Phone screenshot (Wifi off)</label>
[file file-screenshot limit:1000000 filetypes:jpg|png|heic|heif]
</div>
<div class="submit">
[submit class:button class:blue "SEND YOUR MESSAGE"]
</div>
[/group]
<p> </p></p>
