Buat formulir Web

Membuat formulir Web modern menggunakan HTML dan JavaScript.

Anda dapat membuat kueri model secara langsung dan menguji hasil yang tampak saat menggunakan parameter value yang berbeda dengan konsol Cloud, atau dengan memanggil Vertex AI API secara langsung.

Perintah Freeform

Membuat formulir web menggunakan HTML dan JavaScript agar pelanggan dapat menunjukkan minat atas produk kami. Formulir ini harus mengumpulkan informasi nama, alamat email, dan bagaimana mereka mengetahui tentang kami. Formulir harus mencerminkan tren desain web modern.

Respons

Formulir Web Modern untuk Menunjukkan 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 merek dan preferensi tertentu 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:

  1. Struktur HTML:

    • Formulir digabungkan dalam div dengan class container untuk gaya visual.
    • Formulir ini 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 "Dari mana Anda mengetahui tentang kami?" kolom tersebut.
    • button dengan type="submit" digunakan untuk mengirimkan formulir.
    • div dengan class success-message digunakan untuk menampilkan pesan berhasil setelah pengiriman.

  2. Gaya Visual CSS:

    • CSS memberikan tampilan dan nuansa modern:
      • Font dasar, warna latar belakang, dan padding ditetapkan untuk isi.
      • Penampung memiliki latar belakang putih, padding, sudut bulat, dan bayangan kotak yang halus.
      • Elemen formulir memiliki gaya yang konsisten dengan label, kolom input, dan tombol kirim.
      • Pesan sukses diberi gaya dengan warna hijau dan berada 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 diberi komentar menunjukkan contoh cara mengirim data ke server Anda menggunakan fetch. Ganti metode ini dengan logika sisi server Anda yang sebenarnya.
    • Pesan sukses 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 fetch placeholder dengan logika sisi server Anda yang sebenarnya untuk menangani data formulir.

Formulir ini memberikan struktur dan gaya visual dasar. Anda dapat menyesuaikannya lebih lanjut dengan menambahkan lebih banyak kolom, mengubah gaya, dan menerapkan fungsi JavaScript yang lebih kompleks.

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