I am using contact form plugin for forms in my craft website. For avoiding page redirection, I followed ajax submit for the form, but it is not redirected to controller code.

My form is as below:-

<form method="post" action="" accept-charset="UTF-8" class="basic-form" id="contactForm">
       {{ csrfInput() }}
       <input type="hidden" name="action" value="contact-form/send">
       <div class="form-group">
              <input type="text" class="text-field" id="text-630573652" name="firstName" value="" required="" placeholder="Name *" autocomplete="off">
      <div class="layout-sm-12">
             <button type="submit" class="btn white-btn-outline submit-btn">LET'S TALK<i class="icon-long-arrow-bold-right"></i></button>

My ajax script is as follows:-

$(function () {
        $('#contactForm').on('submit', function (e) {
            type: 'post',
            url: '/',
            data: $('#contactForm').serialize(),
            dataType: 'json',
            success: function (response) {


For this I am getting error in console like 404 page not found. How to redirect to send controller index function using ajax request. As per other tutorials '/' is not working here.

Anyone please help...

  • If you read the docs: The only required fields are fromEmail and message. Everything else is optional. You have neither. – Christopher Dosin Nov 7 '19 at 19:02
  • Thank you for the reply. I am asking for how we will redirect to controller url using ajax – Rakhi Vijayan Nov 8 '19 at 4:14
  • Since you have contact-form/send as your hidden field for form action, have you tried using this for the AJAX url? – 4midori Nov 11 '19 at 16:52
  • Thank you. That works. – Rakhi Vijayan Nov 11 '19 at 17:11

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

Browse other questions tagged or ask your own question.