1. Create a new page on Blogger 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', (e) => {
e.preventDefault();
const formData = new FormData(contactForm);
const data = {};
formData.forEach((value, key) => {
data[key] = value;
});
// You can add code here to send the data to your desired endpoint
// For demonstration purposes, we'll just log the data
console.log('Form data:', data);
// Clear the form
contactForm.reset();
});
</script>
</body>
</html>
```
3. Save and publish the page.
This code creates a simple "Contact Us" page with a form that collects the user's name, email, and message. The JavaScript code logs the form data to the console for demonstration purposes. You can replace the console.log() statement with actual code to send the form data to your desired endpoint for processing.
Adjust the styles, layout, and form handling as needed to match the design and functionality of your Blogger site.
Comments
Post a Comment