Generare un modulo web moderno utilizzando HTML e JavaScript.
|
Puoi eseguire query direttamente su un modello e testare i risultati restituiti quando utilizzi valori parametro diversi con la console Cloud o chiamando direttamente l'API Vertex AI.
|
|||||||||||
Prompt in formato libero
Genera un modulo web utilizzando HTML e JavaScript per consentire ai clienti di esprimere il loro interesse per il nostro prodotto. Il modulo deve raccogliere i nomi, gli indirizzi email dei clienti e il modo in cui ci hanno scoperto. Il modulo deve rispecchiare le tendenze del web design moderno.
RispostaModulo web moderno per esprimere interesseQuesto codice fornisce una struttura di base per un modulo web moderno utilizzando HTML e JavaScript. Puoi personalizzare ulteriormente gli stili utilizzando CSS per allinearli al tuo brand e alle tue preferenze specifici. 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>
Spiegazione:
Per utilizzare questo modulo:
Questo modulo fornisce una struttura e uno stile di base. Puoi personalizzarlo ulteriormente aggiungendo più campi, modificando lo stile e implementando funzionalità JavaScript più complesse. |
|
||||||||||