Using AJAX on Contact-form the WordPress way

EDIT

TL;DR
Your page is refreshing because you tell the form to load a new page (the page specified under action).

Longer answer
The reason the page refreshes is because your form has an action associated with it. When I viewed your page yesterday, I saw the AJAX routine complete, and then the page refreshed. Why? Because after the AJAX finished (or even before it finished), the form was sent to the file specified under action. If you don’t want the page to refresh, don’t use the HTML form. Simply have input fields and tie the button click to the AJAX function. Does that make sense?

END EDIT

First, I would try to understand how WordPress suggests AJAX is done.
https://codex.wordpress.org/AJAX_in_Plugins

Second, I am wondering if you need AJAX. AJAX is used for accessing a database without having to reload the page. For example, in a Google search bar, you get suggestions as you type. This is AJAX.

However, submitting forms that reload a page with a “thanks” message is not what you should use AJAX for. Forms are handled differently with regular CGI (in WordPress, you can do this in straight PHP). There is no need to create additional complexity if you use AJAX in this context.

Does that make sense? Just have the form action be a php file that collects the form data, stores it in the database, and writes a new page with the desired message.

Related Posts:

  1. contact form ajax empty response error message
  2. jQuery’s .on() method combined with the submit event
  3. Nonces and Cache
  4. How to HTML5 FormData Ajax
  5. admin-ajax.php doesn’t work when using POST data and Axios
  6. Contact Form 7 Custom Post Action
  7. Custom Form with Ajax
  8. ajax – why multiple calls to wp_create_nonce() return same value?
  9. How to link WordPress heartbeat to ajax form
  10. Ajax form submission from admin panel
  11. Confused on AJAX submit form through page template
  12. how to use reCaptcha v3 in wordpress custom login form?
  13. Prevent page reload after ajax form submission
  14. submitting form via admin-ajax.php returns 0
  15. Admin Ajax and HTML5 Formdata
  16. jQuery Ajax passing empty parameters to my function?
  17. Using ajax with wordpress
  18. Using AJAX with Forms
  19. Ajax image upload with media_handle_upload and form.js
  20. Ajax post returning full html page as response
  21. Sending variable from ajax on form submit
  22. Can’t trigger an AJAX function with a submit button in the dashboard
  23. Dynamically add more fields/remove last field in a form
  24. Ajaxify Form That Submits To Same Page To Display Post Data [closed]
  25. Using admin-ajax prevents regular php form submission
  26. Specify ABSPATH in jQuery url
  27. ajax form is returning the dreaded “[HTTP/1.1 400 Bad Request” and a zero
  28. Output multi-steps form results in same page
  29. Using get_theme_mod in php ajax form doesn’t work
  30. How to create a form button that executes a function?
  31. How to stop being directed to admin.php after sending request to admin-ajax.php
  32. How to display contact form 7 form in vanilla js without jquery in frontend
  33. Should wordpress nonce be placed in html form or in javascript file
  34. Add Server Side validation in Ajax mail form
  35. How to send automatic response after form submission without plugin
  36. Opening Modal popup on Ajax form submission
  37. Registration form AJAX check for existing username (simple version)
  38. Issue developing an AJAX form with WordPress
  39. Ajax show custom post data form & script
  40. Error while submitting form using AJAX and php
  41. Ajax contact form returnig 0
  42. Ajax Form data is not posted back to the get_results()
  43. Using AJAX for dynamic settings pages
  44. Ajax Form seems to post, but does not return
  45. Bad Request when adding new post via ajax form
  46. Send button using own contact form [closed]
  47. jQuery AJAX submit form
  48. Refresh HTML Page in Browser Automatically on Timer – Every 15 Min
  49. How to load wp_editor() through AJAX/jQuery
  50. Is there a JavaScript API? How to access public and private data in JS?
  51. failed to load wp-admin/admin-ajax.php
  52. Are ‘wp_ajax’ and ‘wp_ajax_nopriv’ exclusive to authenticated and non-authenticated users?
  53. Ajax requests without JQuery
  54. Custom PHP endpoint for a plugin’s AJAX call
  55. WordPress Ajax Login without page reload
  56. Custom ordering fails after AJAX post filter
  57. How to securely add an Ajax button to a WP Admin page?
  58. WordPress Ajax Getting Response “Null”
  59. admin-ajax return error 400 for Chrome/Edge but not Firefox
  60. Creating a form contact page?
  61. WordPress Admin AJAX Serialize
  62. Why a strange discrepency between get_current_user_id() when using AJAX versus output of document.cookie?
  63. Loading post template that contains a nested loop with ajax
  64. Code run fast on a cronjob but slow with a do_action or ajax call
  65. Ajax comment form submit on frontpage alerts success but no insertion
  66. Wp mail does not work when Ajaxed to
  67. MySQL select query with ajax
  68. Exposing data using a custom WordPress API
  69. Use WP admin AJAX url to hide API key
  70. How do I add the same contact form to multiple wordpress sites and capture the response in one place or database?
  71. How can I wp_send_json data?
  72. Making POST request with AJAX returns a 400 error (without jQuery)
  73. Load image src through Ajax by ID?
  74. PHP session when called wp_ajax_nopriv
  75. contact form in template with jquery,validate and ajax
  76. Contact Form 7 “non-selectable” options in a drop down [closed]
  77. How to make image in TinyMCE clickable
  78. How to use Jeditable plugin with admin-ajax.php?
  79. WordPress Ajax Not Firing
  80. Disabling ajax code that does a POST request that ends in a 400 error code
  81. How to prevent my external API call from being called by anyone but me (my site)
  82. get a bad request 400 on my ajax-admin.php file
  83. Trigger action via button
  84. Show ajax form resuslts in page
  85. Syntax error on query_vars while handling with Jquery
  86. Want to send ajax request in wordpress to a custom file in plugin
  87. How to send the checkbox value to email
  88. Cannot add multiple single images at once
  89. How to send custom variable in Media Uploader ajax request?
  90. WordPress Ajax JSON success return no being recognized
  91. WordPress page content only in fancybox except direct click
  92. Ajax takes 10x as long as it should/could
  93. While doing ajax, WordPress returning internal server error 500 and stating that my theme functions are undefined
  94. Ajax navigation and scripts loaded only on certain pages
  95. WordPress Pagination with ajax – Dots
  96. Plugin Admin Page Ajax-Admin call returning 0, URL set correctly. Implemented localized scripts but did not fix it
  97. Running js in html code with same content
  98. How to get current_user_id from wordpress in node js?
  99. how can i create get request unis ajax without expecting return value
  100. AJAX call not initializing for non-admins in WordPress