Buat formulir Web modern menggunakan HTML dan JavaScript.
|
Anda dapat membuat kueri model secara langsung dan menguji hasil yang ditampilkan saat menggunakan parameter value yang berbeda dengan Konsol Cloud, atau dengan memanggil Vertex AI API secara langsung.
|
|||||||||||
Perintah Freeform
Buat formulir web menggunakan HTML dan JavaScript bagi pelanggan untuk menunjukkan minat pada produk kami. Formulir tersebut harus mengumpulkan nama, alamat email pelanggan, dan cara mereka mengetahui tentang kami. Formulir tersebut harus mencerminkan tren desain web modern.
ResponsFormulir Web Modern untuk Menyatakan MinatKode ini memberikan struktur dasar untuk formulir web modern menggunakan HTML dan JavaScript. Anda dapat menyesuaikan gaya visual lebih lanjut menggunakan CSS agar selaras dengan brand dan preferensi spesifik Anda. HTML (index.html):
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Express Your Interest</title>
<style>
body {
font-family: 'Arial', sans-serif;
background-color: #f4f4f4;
display: flex;
justify-content: center;
align-items: center;
min-height: 100vh;
margin: 0;
}
.container {
background-color: #fff;
padding: 40px;
border-radius: 10px;
box-shadow: 0 2px 5px rgba(0, 0, 0, 0.1);
width: 400px;
}
h2 {
text-align: center;
margin-bottom: 20px;
color: #333;
}
.form-group {
margin-bottom: 20px;
}
label {
display: block;
margin-bottom: 5px;
font-weight: bold;
}
input[type="text"],
input[type="email"],
textarea {
width: 100%;
padding: 10px;
border: 1px solid #ccc;
border-radius: 5px;
box-sizing: border-box;
}
textarea {
height: 100px;
}
button[type="submit"] {
background-color: #007bff;
color: #fff;
padding: 12px 20px;
border: none;
border-radius: 5px;
cursor: pointer;
transition: background-color 0.3s ease;
width: 100%;
}
button[type="submit"]:hover {
background-color: #0056b3;
}
.success-message {
color: green;
text-align: center;
margin-top: 20px;
display: none;
}
</style>
</head>
<body>
<div class="container">
<h2>Express Your Interest</h2>
<form id="interest-form">
<div class="form-group">
<label for="name">Name:</label>
<input type="text" id="name" name="name" 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="how-found">How did you hear about us?</label>
<textarea id="how-found" name="how-found" placeholder="e.g., Google search, social media, friend referral"></textarea>
</div>
<button type="submit">Submit</button>
<div class="success-message">Thank you for your interest! We will be in touch soon.</div>
</form>
</div>
<script>
const form = document.getElementById('interest-form');
const successMessage = document.querySelector('.success-message');
form.addEventListener('submit', (event) => {
event.preventDefault(); // Prevent default form submission
// Get form data
const name = document.getElementById('name').value;
const email = document.getElementById('email').value;
const howFound = document.getElementById('how-found').value;
// You can use this data to send to your server for processing
// Example:
// fetch('/your-endpoint', {
// method: 'POST',
// headers: {
// 'Content-Type': 'application/json'
// },
// body: JSON.stringify({ name, email, howFound })
// })
// .then(response => {
// // Handle response from server
// })
// .catch(error => {
// // Handle error
// });
// Display success message
successMessage.style.display = 'block';
form.reset(); // Clear the form fields
});
</script>
</body>
</html>
Penjelasan:
Untuk menggunakan formulir ini:
Formulir ini memberikan struktur dan gaya dasar. Anda dapat menyesuaikannya lebih lanjut dengan menambahkan lebih banyak kolom, mengubah gaya, dan menerapkan fungsi JavaScript yang lebih kompleks. |
|
||||||||||