Générez un formulaire Web moderne à l'aide de HTML et de JavaScript.
|
Vous pouvez interroger un modèle directement et tester les résultats renvoyés lors de l'utilisation de différentes valeurs de paramètre en utilisant la console Cloud ou en appelant directement l'API Vertex AI.
|
|||||||||||
Requête forme libre
Génère un formulaire Web en HTML et JavaScript qui va permettre aux clients de manifester leur intérêt pour notre produit. Ce formulaire doit recueillir le nom et l'adresse e-mail des clients, ainsi que la manière dont ils nous ont connus. Le formulaire doit refléter les tendances modernes de conception Web.
RéponseFormulaire Web moderne pour exprimer son intérêtCe code fournit une structure de base pour un formulaire Web moderne utilisant HTML et JavaScript. Vous pouvez personnaliser davantage le style à l'aide de CSS pour l'adapter à votre marque et à vos préférences spécifiques. 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>
Explication :
Pour utiliser ce formulaire :
Ce formulaire fournit une structure et un style de base. Vous pouvez le personnaliser davantage en ajoutant des champs, en modifiant le style et en implémentant une fonctionnalité JavaScript plus complexe. |
|
||||||||||