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 Format Bebas
Buat formulir web menggunakan HTML dan JavaScript agar pelanggan dapat menyatakan minatnya pada produk kami. Formulir harus mengumpulkan nama, alamat email, dan cara pelanggan mengetahui kami. Formulir 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 lebih lanjut menggunakan CSS agar selaras dengan brand dan preferensi tertentu. 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 menyediakan struktur dan gaya dasar. Anda dapat menyesuaikannya lebih lanjut dengan menambahkan lebih banyak kolom, mengubah gaya visual, dan menerapkan fungsi JavaScript yang lebih kompleks. |
|
||||||||||