生成 Web 表单

使用 HTML 和 JavaScript 生成新型 Web 表单。

在对 Cloud 控制台使用不同参数值时,或通过直接调用 Vertex AI API,您可以直接查询模型,并测试返回的结果。

提示自由格式

使用 HTML 和 JavaScript 生成 Web 表单,让客户能够表达对我们产品的相关意愿。该表单应收集客户的姓名、电子邮件地址以及客户是如何找到我们的。该表单应反映现代 Web 设计趋势。

响应

用于表达意愿的现代 Web 表单

此代码为使用 HTML 和 JavaScript 的现代 Web 表单提供了一个基本结构。您可以使用 CSS 进一步自定义样式,使其与您自己的品牌和偏好保持一致。

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>

说明:

  1. HTML 结构

    • 表单封装在 div 中,其中包含用于设置样式的 container 类。
    • 表单标题有一个 h2 标头。
    • 每个输入字段都封装在一个 div 中,其中包含方便更好地组织表单的 form-group 类。
    • 每个输入字段都会使用标签。
    • textarea 用于“您是怎么知道我们的?”字段。
    • 带有 type="submit"button 用来提交表单。
    • 包含 success-message 类的 div 用于在提交后显示成功消息。
  2. CSS 样式

    • CSS 提供了现代外观和风格:
      • 为正文设置了基本的字体、背景颜色和内边距。
      • 该容器设置了白色背景、内边距、圆角和细微的方框阴影。
      • 表单元素的样式与标签、输入字段和提交按钮保持一致。
      • 成功消息采用绿色且居中的样式。
  3. JavaScript 功能

    • JavaScript 代码会处理表单提交请求,并显示成功消息:
      • 事件监听器会附加到表单的 submit 事件。
      • 表单提交后,代码将使用 event.preventDefault() 阻止默认的表单提交请求。
      • 代码会从输入字段中检索表单数据。
      • (占位符)注释掉的代码举例说明了如何使用 fetch 将数据发送到服务器。请将该部分的代码替换为您实际的服务器端逻辑。
    • 若要显示成功消息,可将其 display 属性设置为 block
    • 可使用 form.reset() 重置表单。

若要使用此表单,请执行以下操作:

  1. 将代码保存为 HTML 文件(例如,interest-form.html)。
  2. 在网络浏览器中打开该 HTML 文件。
  3. 将占位符部分的 fetch 代码替换为您实际的服务器端逻辑来处理表单数据。

此表单提供了一个基本的结构和样式。您可以添加更多字段、更改样式以及实现更复杂的 JavaScript 功能,以进一步自定义该表单。

型号: gemini-1.5-flash-preview-0514
温度: 1
输出令牌数量上限: 8192
TopK: 40
TopP: 0.95