0% found this document useful (0 votes)
4 views3 pages

Doctype HTML

The document is an HTML template for a contact form, including fields for name, email, and message, styled with CSS. It features a responsive design with a clean layout, centered heading, and a submit button that changes color on hover. The form requires user input for all fields before submission.

Uploaded by

viollettaantieka
Copyright
© © All Rights Reserved
We take content rights seriously. If you suspect this is your content, claim it here.
Available Formats
Download as DOCX, PDF, TXT or read online on Scribd
0% found this document useful (0 votes)
4 views3 pages

Doctype HTML

The document is an HTML template for a contact form, including fields for name, email, and message, styled with CSS. It features a responsive design with a clean layout, centered heading, and a submit button that changes color on hover. The form requires user input for all fields before submission.

Uploaded by

viollettaantieka
Copyright
© © All Rights Reserved
We take content rights seriously. If you suspect this is your content, claim it here.
Available Formats
Download as DOCX, PDF, TXT or read online on Scribd
You are on page 1/ 3

<!

DOCTYPE html>

<html lang="en">

<head>

<meta charset="UTF-8">

<meta name="viewport" content="width=device-width, initial-scale=1.0">

<title>Contoh Formulir CSS</title>

<link rel="stylesheet" href="styles.css">

</head>

<body>

<div class="container">

<h2>Formulir Kontak</h2>

<form>

<div class="form-group">

<label for="nama">Nama:</label>

<input type="text" id="nama" name="nama" required>

</div>

<div class="form-group">

<label for="email">Email:</label>

<input type="email" id="email" name="email" required>

</div>

<div class="form-group">

<label for="pesan">Pesan:</label>

<textarea id="pesan" name="pesan" rows="4" required></textarea>

</div>

<button type="submit">Kirim</button>

</form>

</div>

</body>

</html>
body {

font-family: Arial, sans-serif;

background-color: #f2f2f2;

.container {

max-width: 400px;

margin: 0 auto;

padding: 20px;

background-color: #fff;

border-radius: 8px;

box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);

h2 {

text-align: center;

.form-group {

margin-bottom: 20px;

label {

display: block;

margin-bottom: 5px;

input[type="text"],

input[type="email"],
textarea {

width: 100%;

padding: 8px;

border: 1px solid #ccc;

border-radius: 4px;

button {

width: 100%;

padding: 10px;

background-color: #007bff;

color: #fff;

border: none;

border-radius: 4px;

cursor: pointer;

transition: background-color 0.3s;

button:hover {

background-color: #0056b3;

You might also like