Genera un formulario web moderno con HTML y JavaScript.
|
Puedes consultar un modelo directamente y probar los resultados que se muestran cuando usas valores de parámetros diferentes con la consola de Cloud o con una llamada directa a la API de Vertex AI.
|
|||||||||||
Mensaje Formato libre
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.
Respuesta
```html
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Product Interest Form</title>
<style>
body {
font-family: Arial, sans-serif;
margin: 0;
padding: 0;
}
form {
width: 100%;
max-width: 500px;
margin: 0 auto;
padding: 20px;
border: 1px solid #ccc;
border-radius: 5px;
}
label {
display: block;
margin-bottom: 5px;
}
input,
textarea {
width: 100%;
padding: 5px;
border: 1px solid #ccc;
border-radius: 3px;
}
button {
width: 100%;
padding: 5px;
background-color: #007bff;
color: #fff;
border: none;
border-radius: 3px;
cursor: pointer;
}
</style>
</head>
<body>
<form>
<h1>Express Interest in Our Product</h1>
<p>Please fill out the form below to express your interest in our product. We'll be in touch soon to discuss your needs.</p>
<label for="name">Name:</label>
<input type="text" id="name" required>
<label for="email">Email Address:</label>
<input type="email" id="email" required>
<label for="how-found">How did you find out about us?</label>
<select id="how-found" required>
<option value="">Select an option</option>
<option value="google">Google</option>
<option value="facebook">Facebook</option>
<option value="twitter">Twitter</option>
<option value="other">Other</option>
</select>
<button type="submit">Submit</button>
</form>
<script>
const form = document.querySelector('form');
form.addEventListener('submit', (event) => {
event.preventDefault();
const name = document.querySelector('#name').value;
const email = document.querySelector('#email').value;
const howFound = document.querySelector('#how-found').value;
console.log(`Name: ${name}`);
console.log(`Email: ${email}`);
console.log(`How found: ${howFound}`);
});
</script>
</body>
</html>
```
|
|
||||||||||