Skip to content

Instantly share code, notes, and snippets.

@samhernandez

samhernandez/craft-contact-form-axios.html

Last active October 20, 2022 07:45
Show Gist options

  • Select an option

    Learn more about clone URLs
  • Save samhernandez/cf046e387c1f2fb95f744f1c152cb0a3 to your computer and use it in GitHub Desktop.

Select an option

Learn more about clone URLs
Save samhernandez/cf046e387c1f2fb95f744f1c152cb0a3 to your computer and use it in GitHub Desktop.
Download ZIP

Revisions

  1. Sam Hernandez renamed this gist Jan 31, 2019. 1 changed file with 0 additions and 0 deletions.
    0 index.html → craft-contact-form-axios.html
    View file
    File renamed without changes.
  2. Sam Hernandez revised this gist Jan 31, 2019. 1 changed file with 5 additions and 5 deletions.
    10 changes: 5 additions & 5 deletions index.html
    View file
    Original file line number Diff line number Diff line change
    @@ -13,16 +13,16 @@

    <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="Sam">
    <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="[email protected]">
    <input id="from-email" type="email" name="fromEmail" value="">

    <h3><label for="subject">Subject</label></h3>
    <input id="subject" type="text" name="subject" value="Hi there">
    <input id="subject" type="text" name="subject" value="">

    <h3><label for="message">Message</label></h3>
    <textarea rows="10" cols="40" id="message" name="message">Hello!</textarea>
    <textarea rows="10" cols="40" id="message" name="message"></textarea>

    <input type="submit" value="Send">
    </form>
    @@ -55,4 +55,4 @@ <h3><label for="message">Message</label></h3>
    </script>

    </body>
    </html>
    </html>
  3. Sam Hernandez created this gist Jan 31, 2019.
    58 changes: 58 additions & 0 deletions index.html
    View file
    Original file line number Diff line number Diff line change
    @@ -0,0 +1,58 @@
    <!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="Sam">

    <h3><label for="from-email">Your Email</label></h3>
    <input id="from-email" type="email" name="fromEmail" value="[email protected]">

    <h3><label for="subject">Subject</label></h3>
    <input id="subject" type="text" name="subject" value="Hi there">

    <h3><label for="message">Message</label></h3>
    <textarea rows="10" cols="40" id="message" name="message">Hello!</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>