1. Create a new page on your Blogger site and switch to HTML mode.
2. Copy and paste the following code into the HTML editor:
```html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Contact Us - FarmingFarms Blog</title>
<style>
body {
font-family: Arial, sans-serif;
margin: 0;
padding: 0;
background-color: #f4f4f4;
}
.container {
max-width: 600px;
margin: 0 auto;
padding: 20px;
background-color: #fff;
box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
}
h1 {
font-size: 24px;
margin-bottom: 20px;
}
label {
font-weight: bold;
}
input, textarea {
width: 100%;
padding: 10px;
margin-bottom: 10px;
border: 1px solid #ccc;
border-radius: 4px;
}
textarea {
height: 120px;
}
button {
background-color: #4caf50;
color: #fff;
border: none;
padding: 10px 20px;
cursor: pointer;
}
button:hover {
background-color: #45a049;
}
</style>
</head>
<body>
<div class="container">
<h1>Contact Us</h1>
<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>
</div>
<script>
const contactForm = document.getElementById('contactForm');
contactForm.addEventListener('submit', async (e) => {
e.preventDefault();
const formData = new FormData(contactForm);
const data = {};
formData.forEach((value, key) => {
data[key] = value;
});
// Send the form data to your server using fetch or any other method
try {
const response = await fetch('YOUR_SERVER_ENDPOINT', {
method: 'POST',
headers: {
'Content-Type': 'application/json',
},
body: JSON.stringify(data),
});
if (response.ok) {
alert('Message sent successfully!');
contactForm.reset();
} else {
alert('Something went wrong. Please try again.');
}
} catch (error) {
console.error('Error:', error);
alert('An error occurred. Please try again later.');
}
});
</script>
</body>
</html>
```
3. Replace `'YOUR_SERVER_ENDPOINT'` in the JavaScript code with the actual endpoint where you want to send the form data. You'll need to have a server-side script that handles the form submission and processing.
4. Save and publish the page on your Blogger site.
This code provides a complete "Contact Us" page with form validation, submission, and error handling. When a user submits the form, the data is sent to the specified server endpoint using the `fetch` API. The server-side script should handle the incoming data and perform the necessary actions, such as sending emails or storing the data in a database.
customize the styles, adjust the form fields as needed, and implement the server-side handling according to your requirements.
Comments
Post a Comment