Contact Us
```
CSS:
```
.contact-us {
max-width: 600px;
margin: 40px auto;
padding: 20px;
background-color: #f9f9f9;
border: 1px solid #ccc;
box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);
}
label {
display: block;
margin-bottom: 10px;
}
input, textarea {
width: 100%;
padding: 10px;
margin-bottom: 20px;
border: 1px solid #ccc;
}
input[type="submit"] {
background-color: #4CAF50;
color: #fff;
padding: 10px 20px;
border: none;
cursor: pointer;
}
input[type="submit"]:hover {
background-color: #3e8e41;
}
```
JavaScript:
```
const form = document.querySelector('form');
form.addEventListener('submit', (e) => {
e.preventDefault();
const name = document.querySelector('#name').value;
const email = document.querySelector('#email').value;
const message = document.querySelector('#message').value;
// Add code here to send the form data to your email or server
alert(`Thank you, ${name}! Your message has been sent.`);
});
```
Note: This code is just a basic example and you'll need to modify it to suit your specific needs. You'll also need to add code to send the form data to your email or server.
To add this code to your Blogger site, follow these steps:
1. Go to your Blogger dashboard and click on the "Themes" tab.
2. Click on the "Edit HTML" button.
3. Paste the HTML code into the editor, replacing any existing code in the `` section.
4. Click on the "Save" button.
5. Go to the "Layout" tab and click on the "Add a gadget" button.
6. Select "HTML/JavaScript" and paste the CSS code into the editor.
7. Click on the "Save" button.
8. Repeat steps 5-7 for the JavaScript code.
I hope this helps! Let me know if you need any further assistance.
.jpeg)
