Scribd
Upload
3 views3 pages

Business Website with Contact Form

The document outlines a simple HTML webpage structure for a business, including sections for 'About Us', 'Our Services', and 'Contact Us'. It features a contact form that captures user input and displays a thank you message upon submission. The accompanying CSS styles the layout, while JavaScript handles form submission and user interaction.

Uploaded by

ashbyrushwaya321
Copyright
© All Rights Reserved
We take content rights seriously. If you suspect this is your content, claim it here.
Available Formats
Download as TXT, PDF, TXT or read online on Scribd
3 views3 pages

Business Website with Contact Form

The document outlines a simple HTML webpage structure for a business, including sections for 'About Us', 'Our Services', and 'Contact Us'. It features a contact form that captures user input and displays a thank you message upon submission. The accompanying CSS styles the layout, while JavaScript handles form submission and user interaction.

Uploaded by

ashbyrushwaya321
Copyright
© All Rights Reserved
We take content rights seriously. If you suspect this is your content, claim it here.
Available Formats
Download as TXT, PDF, TXT or read online on Scribd

index.

html
[Link]
[Link]
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Your Business Name</title>
<link rel="stylesheet" href="[Link]">
</head>
<body>
<header>
<h1>Welcome to Your Business</h1>
<nav>
<a href="#about">About</a>
<a href="#services">Services</a>
<a href="#contact">Contact</a>
</nav>
</header>

<section id="about">
<h2>About Us</h2>
<p>Provide a brief description of your business here.</p>
</section>

<section id="services">
<h2>Our Services</h2>
<ul>
<li>Service 1</li>
<li>Service 2</li>
<li>Service 3</li>
</ul>
</section>

<section id="contact">
<h2>Contact Us</h2>
<form id="contactForm">
<label for="name">Name:</label>
<input type="text" id="name" required>
<label for="email">Email:</label>
<input type="email" id="email" required>
<label for="message">Message:</label>
<textarea id="message" required></textarea>
<button type="submit">Send</button>
</form>
<div id="responseMessage"></div>
</section>

<footer>
<p>&copy; 2025 Your Business Name. All rights reserved.</p>
</footer>

<script src="[Link]"></script>
</body>
</html>

body {
font-family: Arial, sans-serif;
margin: 0;
padding: 0;
}

header {
background: #007bff;
color: white;
padding: 20px;
text-align: center;
}

nav {
margin: 20px 0;
}

nav a {
margin: 0 15px;
color: white;
text-decoration: none;
}

section {
padding: 20px;
}

form {
display: flex;
flex-direction: column;
}

form input, form textarea {


margin: 10px 0;
padding: 10px;
}

footer {
background: #333;
color: white;
text-align: center;
padding: 10px;
position: relative;
bottom: 0;
width: 100%;
}
[Link]("contactForm").addEventListener("submit", function(event) {
[Link](); // Prevent the default form submission

// Retrieve values from the form


const name = [Link]("name").value;
const email = [Link]("email").value;
const message = [Link]("message").value;

// Display a response message


[Link]("responseMessage").innerText = `Thank you, ${name}! We
have received your message.`;

// Optionally, you can log the message or send it to a server


[Link](`Name: ${name}, Email: ${email}, Message: ${message}`);
// Clear the form
[Link]("contactForm").reset();
});

You might also like