Written by: Geoffrey Callaghan

Contact Form Script

Contact Form Script

To create a contact form using Axios and fabform.io, you need to perform the following steps:

  1. Create an Account on fabform.io:

    • Visit fabform.io and sign up for an account.
    • Create a new form and note down the form endpoint URL.
  2. Set Up HTML:

    • Create an HTML file with a form that includes the necessary fields (e.g., name, email, message).
    • Add the script tag to include Axios.
    <!DOCTYPE html>
    <html lang="en">
    <head>
        <meta charset="UTF-8">
        <meta name="viewport" content="width=device-width, initial-scale=1.0">
        <title>Contact Form</title>
    </head>
    <body>
        <form id="contactForm">
            <label for="name">Name:</label>
            <input type="text" id="name" name="name" required>
    
            <label for="email">Email:</label>
            <input type="email" id="email" name="email" required>
    
            <label for="message">Message:</label>
            <textarea id="message" name="message" required></textarea>
    
            <button type="submit">Submit</button>
        </form>
    
        <script src="https://cdn.jsdelivr.net/npm/axios/dist/axios.min.js"></script>
        <script src="script.js"></script>
    </body>
    </html>
  3. Set Up JavaScript (script.js):

    • Create a JavaScript file to handle form submission using Axios.
    document.getElementById('contactForm').addEventListener('submit', function (event) {
        event.preventDefault();
    
        const formData = new FormData(event.target);
    
        // Replace 'YOUR_FABFORM_ENDPOINT' with your actual fabform.io form endpoint
        const fabformEndpoint = 'https://fabform.io/f/YOUR_FABFORM_ENDPOINT';
    
        axios.post(fabformEndpoint, formData)
            .then(function (response) {
                console.log('Form submitted successfully:', response);
                // You can add additional logic for success (e.g., show a success message)
            })
            .catch(function (error) {
                console.error('Form submission failed:', error);
                // You can add additional logic for error handling
            });
    });

    Replace 'YOUR_FABFORM_ENDPOINT' with the actual endpoint URL you obtained from fabform.io.

  4. Test the Form:

    • Open the HTML file in a web browser.
    • Fill out the form and submit it. Check the console for any log messages.

Make sure that your fabform.io account is properly configured, and the form endpoint is correct. Additionally, ensure that you are using the correct field names in the form and adjusting the script accordingly.