To create a contact form using Axios and fabform.io, you need to perform the following steps:
Create an Account on fabform.io:
Set Up HTML:
<!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>
Set Up JavaScript (script.js):
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.
Test the Form:
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.