Membuat formulir Web

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.

Respons

Formulir Web Modern untuk Menyatakan Minat

Kode 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:

  1. Struktur HTML:

    • Formulir digabungkan dalam div dengan class container untuk gaya visual.
    • Formulir memiliki judul h2.
    • Setiap kolom input berada dalam div dengan class form-group untuk pengaturan yang lebih baik.
    • Label digunakan untuk setiap kolom input.
    • textarea digunakan untuk kolom "Dari mana Anda mendengar tentang kami?".
    • button dengan type="submit" digunakan untuk mengirimkan formulir.
    • div dengan class success-message digunakan untuk menampilkan pesan berhasil setelah pengiriman.
  2. Gaya CSS:

    • CSS memberikan tampilan dan nuansa modern:
      • Font dasar, warna latar belakang, dan padding ditetapkan untuk isi.
      • Penampung memiliki latar belakang putih, padding, sudut membulat, dan bayangan kotak yang halus.
      • Elemen formulir memiliki gaya visual yang konsisten dengan label, kolom input, dan tombol kirim.
      • Pesan sukses ditata dengan warna hijau dan di tengah.
  3. Fungsi JavaScript:

    • Kode JavaScript menangani pengiriman formulir dan menampilkan pesan berhasil:
      • Pemroses peristiwa dilampirkan ke peristiwa submit formulir.
      • Saat formulir dikirimkan, pengiriman formulir default akan dicegah menggunakan event.preventDefault().
      • Data formulir diambil dari kolom input.
      • (Placeholder) Kode yang dikomentari menunjukkan contoh cara mengirim data ke server menggunakan fetch. Ganti ini dengan logika sisi server yang sebenarnya.
    • Pesan berhasil ditampilkan dengan menetapkan properti display ke block.
    • Formulir direset menggunakan form.reset().

Untuk menggunakan formulir ini:

  1. Simpan kode sebagai file HTML (misalnya, interest-form.html).
  2. Buka file HTML di browser web Anda.
  3. Ganti kode placeholder fetch dengan logika sisi server yang sebenarnya untuk menangani data formulir.

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.

Model: gemini-1.5-flash-001
Suhu: 1
Token output maks: 8192
TopK: 40
TopP: 0,95