Embedded Files
cari desain yang diinginkan
desain di canva.
cari referensi contact us di google.
agar ada feedback atau pertanyaan dari pembaca, kalian harus bikin kode, kalau aku minta bantuan chat gpt
pilih desain yang diinginkan, lalu minta tolong pada chat gpt.
jika pertanyaan mereka ingin kalian lihat, kalian harus registrasi email kalian ke web "formspree.io". buat akun kalian.
klik add new, untuk buat link agar oesan mereka masuk ke email mu
klik new form
masukkan nama formnya, lalu masukkan emailmu disana
create form.
copy link yang dibuat kan. lalu, masukkan ke dalam code program kalian. jika kalian tidak paham bisa suruh chat gpt buatkan final codenya
kode punyaku
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>Minecraft Contact Form</title>
<style>
body {
font-family: 'Segoe UI', sans-serif;
margin: 0;
background: transparent; /* full transparan */
color: #333;
}
.container {
display: flex;
justify-content: space-between;
padding: 40px;
max-width: 900px;
margin: auto;
background: transparent; /* transparan juga */
}
/* Kiri */
.text-section {
width: 45%;
color: #8e302f; /* semua teks putih */
font-weight: bold; /* semua teks bold */
}
.text-section h1 {
font-size: 2em;
margin-bottom: 0.5em;
color: #8e302f; /* judul maroon */
}
.text-section ol {
padding-left: 20px;
}
/* Kanan */
.form-section {
width: 45%;
background: #8e302f; /* maroon */
color: #fff;
padding: 30px;
border-radius: 10px;
}
.form-section h2 {
margin-top: 0;
}
label {
display: block;
margin: 10px 0 5px;
}
input, textarea, select {
width: 100%;
padding: 10px;
margin-bottom: 15px;
border: none;
border-radius: 6px;
}
button {
background: #8e302f;
color: #fff;
padding: 12px 20px;
border: 2px solid #fff;
border-radius: 8px;
cursor: pointer;
font-size: 1em;
}
button:hover {
background: #6c2423;
}
</style>
</head>
<body>
<div class="container">
<!-- Kiri -->
<div class="text-section">
<h1>Contact Me ✨</h1>
<p>Got questions or ideas about my Minecraft website/server?</p>
<ol>
<li>Fill in the form to reach me.</li>
<li>Ask me about plugins, mods, servers, or builds.</li>
<li>I’ll reply and we can share Minecraft vibes together 🎮</li>
<li>Let’s make the blocky world more fun! 🟩</li>
</ol>
</div>
<!-- Kanan -->
<div class="form-section">
<h2>Talk Minecraft with me!</h2>
<form action="https://formspree.io/f/xldwaeaw" method="POST">
<label for="first">First Name *</label>
<input type="text" id="first" name="first" required>
<label for="email">Email *</label>
<input type="email" id="email" name="email" required>
<label for="topic">What’s your Minecraft topic? *</label>
<select id="topic" name="topic" required>
<option value="">-- Choose a topic --</option>
<option>Server Setup</option>
<option>Mods & Plugins</option>
<option>Build Ideas</option>
<option>Other</option>
</select>
<label for="message">Message *</label>
<textarea id="message" name="message" rows="4" placeholder="Tell me about your idea..." required></textarea>
<button type="submit">Send Message 🚀</button>
</form>
</div>
</div>
</body>
</html>
Page updated
Google Sites
Report abuse