Generate a Web form

Generate a modern Web form using HTML and Javascript.

You can query a model directly and test the results returned when using different parameter values with the Cloud console, or by calling the Vertex AI API directly.

Prompt Freeform

Generate a web form using HTML and Javascript for customers to express interest in our product. The form should collect customers' names, email addresses, and how they found out about us. The form should reflect modern web design trends.

Response

Modern Web Form for Expressing Interest

This code provides a basic structure for a modern web form using HTML and Javascript. You can customize the styling further using CSS to align with your specific brand and preferences.

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>

Explanation:

  1. HTML Structure:

    • The form is wrapped in a div with the class container for styling.
    • The form has a h2 heading for the title.
    • Each input field is within a div with the class form-group for better organization.
    • Labels are used for each input field.
    • The textarea is used for the "How did you hear about us?" field.
    • A button with type="submit" is used to submit the form.
    • A div with the class success-message is used to display the success message after submission.

  2. CSS Styling:

    • The CSS provides a modern look and feel:
      • Basic font, background color, and padding are set for the body.
      • The container has a white background, padding, rounded corners, and a subtle box shadow.
      • The form elements have consistent styling with labels, input fields, and the submit button.
      • The success message is styled with green color and centered.

  3. JavaScript Functionality:

    • The JavaScript code handles form submission and displays the success message:
      • An event listener is attached to the form's submit event.
      • When the form is submitted, the default form submission is prevented using event.preventDefault().
      • The form data is retrieved from the input fields.
      • (Placeholder) The commented-out code shows an example of how you would send the data to your server using fetch. Replace this with your actual server-side logic.
    • The success message is displayed by setting its display property to block.
    • The form is reset using form.reset().

To use this form:

  1. Save the code as an HTML file (e.g., interest-form.html).
  2. Open the HTML file in your web browser.
  3. Replace the placeholder fetch code with your actual server-side logic to handle the form data.

This form provides a basic structure and styling. You can customize it further by adding more fields, changing the styling, and implementing more complex JavaScript functionality.

Model: gemini-1.5-flash-001
Temperature: 1
Max output tokens: 8192
TopK: 40
TopP: 0.95