Forked from samhernandez/craft-contact-form-axios.html
Created
March 5, 2020 17:46
-
-
Save ademers/858d4b90a0baf8208621a4f12c3998cd to your computer and use it in GitHub Desktop.
Craft Contact Form with Axios
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| <!doctype html> | |
| <html lang="en"> | |
| <head> | |
| <meta charset="utf-8"> | |
| <title>Contact Form Plugin Example with Axios</title> | |
| <script src="https://cdnjs.cloudflare.com/ajax/libs/axios/0.18.0/axios.js"></script> | |
| </head> | |
| <body> | |
| <!-- | |
| Assumes that you're using the Pixel & Tonic Contact Form plugin | |
| --> | |
| <form id="my-form" method="post" action="" accept-charset="UTF-8"> | |
| <h3><label for="from-name">Your Name</label></h3> | |
| <input id="from-name" type="text" name="fromName" value=""> | |
| <h3><label for="from-email">Your Email</label></h3> | |
| <input id="from-email" type="email" name="fromEmail" value=""> | |
| <h3><label for="subject">Subject</label></h3> | |
| <input id="subject" type="text" name="subject" value=""> | |
| <h3><label for="message">Message</label></h3> | |
| <textarea rows="10" cols="40" id="message" name="message"></textarea> | |
| <input type="submit" value="Send"> | |
| </form> | |
| <script> | |
| window.Craft = { | |
| csrfTokenValue: "{{ craft.app.request.getCsrfToken()|e('js') }}", | |
| csrfTokenName: "{{ craft.app.config.general.csrfTokenName|e('js') }}", | |
| }; | |
| const formElement = document.getElementById("my-form"); | |
| formElement.onsubmit = function(e) { | |
| e.preventDefault(); | |
| let formData = new FormData(formElement); | |
| formData.append('action', 'contact-form/send'); | |
| formData.append(Craft.csrfTokenName, Craft.csrfTokenValue); | |
| axios.post('/', formData, { | |
| headers: { | |
| 'X-CSRF-Token': Craft.csrfTokenValue, | |
| 'Content-Type': 'application/json' | |
| } | |
| }).then(response => { | |
| console.log(response) | |
| }).catch(error => { | |
| console.warn(error); | |
| }) | |
| } | |
| </script> | |
| </body> | |
| </html> |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment