--- title: Form Submissions with AJAX date: '2021-06-30T13:03:31+00:00' url: https://support.formkeep.com/formkeep-guide-to-form-submissions-with-ajax/ summary: "If you want more control over your FormKeep form, you may want to consider using JavaScript to submit. This may be a good idea if you are already using a JavaScript framework, you want to add validation logic, or you don’t want to redirect the user after they submit the form.\n\nCross Origin Requests are possible by submitting the form using Javascript.\n\nYou can submit to FormKeep using a standard AJAX request. To ensure the request does not cause a redirect, be sure to set the Accept header to application/javascript.\n\njQuery Example\n\nThe main thing to remember when using jQuery, is to set the Accept header to application/javascript. Also make sure to replace the “exampletoken” with your real token.\n<html>\n <head>\n \ <meta charset=\"UTF-8\" />\n <script src=\"https://unpkg.com/jquery/dist/jquery.js\"></script>\n \ </head>\n <body>\n <form id=\"newsletter-signup\"\n action=\"https://formkeep.com/f/exampletoken\"\n \ method=\"POST\"\n accept-charset=\"UTF-8\">\n <input type=\"hidden\" name=\"utf8\" value=\"✓\">\n <input type=\"email\" name=\"email\">\n \ <input value=\"Submit\" type=\"submit\">\n </form>\n\n <script type=\"text/javascript\">\n $(function() {\n $('#newsletter-signup').submit(function(event) {\n event.preventDefault();\n\n var formElement = $(this);\n var submitButton = $('input[type=submit]', formElement);\n\n $.ajax({\n type: 'POST',\n url: formElement.prop('action'),\n accept: {\n javascript: 'application/javascript'\n },\n data: formElement.serialize(),\n \ beforeSend: function() {\n submitButton.prop('disabled', 'disabled');\n \ }\n }).done(function(data) {\n submitButton.prop('disabled', false);\n });\n });\n });\n </script>\n </body>\n</html>\n\n\n\nAxios Example\n\nAxios is very similar, but setting the Accept header can trip people up, see the config setup below.\nAlso make sure to replace the “exampletoken” with your real token.\n\n<html>\n <head>\n <meta charset=\"UTF-8\" />\n <script src=\"https://unpkg.com/axios/dist/axios.min.js\" async></script>\n \ </head>\n <body>\n <form id=\"newsletter-signup\"\n action=\"https://formkeep.com/f/exampletoken\"\n \ method=\"POST\"\n accept-charset=\"UTF-8\">\n <input type=\"hidden\" name=\"utf8\" value=\"✓\">\n <input type=\"email\" name=\"email\">\n \ <input value=\"Submit\" type=\"submit\">\n </form>\n\n <script type=\"text/javascript\">\n // Function to handle form submission\n function handleSubmit(event) {\n event.preventDefault(); // Prevent default form submission behavior\n\n // Get the form element\n const form = document.getElementById('newsletter-signup');\n\n \ // Get the form data\n const formData = new FormData(form);\n\n const config = {\n headers: {\n 'Accept': 'application/javascript', // Set the Accept header to JSON\n }\n };\n\n // Make a POST request using Axios\n axios.post(form.action, formData, config)\n .then(function (response) {\n // Handle the successful response\n console.log(response);\n \ })\n .catch(function (error) {\n // Handle the error\n \ console.error(error);\n });\n }\n\n // Add event listener to the form's submit event\n document.getElementById('newsletter-signup').addEventListener('submit', handleSubmit);\n </script>\n </body>\n</html>\n\n\n\n\n\nJavascript fetch Example\n\nJavascript fetch is very similar, but setting the no-cors mode or not setting the accept-header can trip people up, see the config setup below. Also make sure to replace the “exampletoken” with your real token.\n\nOne note is to make sure NOT to include the no-cors mode, if you do we’ll still get the data on our side, but your javascript won’t be able to get a valid response back.\n\nFrom the docs around fetch(): But when using fetch with mode: “no-cors”, the browser prevents you from being able to read anything from the resulting Response object or view the status, thus, response.ok is always false, and response.status is always set to 0. This is a security feature.\n\n<html>\n <head>\n <meta charset=\"UTF-8\" />\n </head>\n <body>\n <form id=\"newsletter-signup\"\n \ action=\"https://formkeep.com/f/exampletoken\"\n method=\"POST\"\n \ accept-charset=\"UTF-8\">\n <input type=\"hidden\" name=\"utf8\" value=\"✓\">\n <input type=\"email\" name=\"email\">\n <input value=\"Submit\" type=\"submit\">\n </form>\n\n <script type=\"text/javascript\">\n \ // Function to handle form submission\n function handleSubmit(event) {\n event.preventDefault(); // Prevent default form submission behavior\n\n \ // Get the form element\n const form = document.getElementById('newsletter-signup');\n\n \ // Get the form data\n const formData = new FormData(form);\n\n // Make a POST request using javascript fetch() api\n fetch(form.action, {\n \ method: 'POST',\n body: formData,\n headers: {\n 'Accept': 'application/javascript',\n },\n }).then(function (response) {\n \ // Handle the successful response, note we're not going to send anything back other than the ok status, if you've set the no-cors this is going to fail\n \ console.log(response.ok);\n })\n .catch(function (error) {\n // Handle the error\n console.error(error);\n });\n \ }\n\n // Add event listener to the form's submit event\n document.getElementById('newsletter-signup').addEventListener('submit', handleSubmit);\n </script>\n </body>\n</html>\n\n\n\n## formkeep.js library Example\n\nGiven the following form:\n\n~~~html\n\n \n \n \n\n~~~\n\nYou can display your own UX or message when the submission is complete. We've built a small js library that can make this super simple and have also provided some examples using common js libraries.\n\nThe source lives at [https://github.com/furiouscollective/formkeep.js](https://github.com/furiouscollective/formkeep.js)\nOr the npm package here [https://www.npmjs.com/package/@formkeep/formkeep](https://www.npmjs.com/package/@formkeep/formkeep)\nCheck out the [documentation](https://github.com/furiouscollective/formkeep.js/blob/master/README.md), but something simple to get you started\n\n~~~html\n\n FormKeep.post('', { hello: 'world' })\n~~~\n -->" tags: - Settings - Guides author: Support Team --- # Form Submissions with AJAX If you want more control over your FormKeep form, you may want to consider using JavaScript to submit. This may be a good idea if you are already using a JavaScript framework, you want to add validation logic, or you don't want to redirect the user after they submit the form. Cross Origin Requests are possible by submitting the form using Javascript. You can submit to FormKeep using a standard AJAX request. To ensure the request does not cause a redirect, be sure to set the **Accept** header to **application/javascript**. ### jQuery Example The main thing to remember when using [jQuery](https://jquery.com/), is to set the Accept header to **application/javascript**. Also make sure to replace the "exampletoken" with your real token. ~~~html
~~~
## Axios Example [Axios](https://github.com/axios/axios) is very similar, but setting the Accept header can trip people up, see the config setup below. Also make sure to replace the "exampletoken" with your real token. ~~~html
~~~
## Javascript fetch Example [Javascript fetch](https://developer.mozilla.org/en-US/docs/Web/API/Fetch_API/Using_Fetch) is very similar, but setting the no-cors mode or not setting the accept-header can trip people up, see the config setup below. Also make sure to replace the "exampletoken" with your real token. One note is to make sure NOT to include the no-cors mode, if you do we'll still get the data on our side, but your javascript won't be able to get a valid response back. From the docs around fetch(): But when using fetch with mode: "no-cors", the browser prevents you from being able to read anything from the resulting Response object or view the status, thus, response.ok is always false, and response.status is always set to 0. This is a security feature. ~~~html
~~~