Generieren Sie ein modernes Webformular mit HTML und JavaScript.
|
Sie können ein Modell direkt abfragen und die zurückgegebenen Ergebnisse testen, wenn Sie verschiedene Parameterwerte mit der Cloud Console oder durch direkten Aufruf der Vertex AI API verwenden.
|
|||||||||||
Freiform-Prompt
Generieren Sie mithilfe von HTML und JavaScript ein Webformular, damit Kunden Interesse an unserem Produkt bekunden können. Im Formular sollten die Namen und E-Mail-Adressen der Kunden sowie Informationen dazu, wie sie zu uns gefunden haben, erfasst werden. Das Formular sollte den Trends des modernen Webdesigns entsprechen.
AntwortModernes Webformular zur InteressenbekundungDieser Code bietet eine Grundstruktur für ein modernes Webformular, das HTML und JavaScript verwendet. Sie können das Design mithilfe von CSS weiter anpassen, um es an Ihre Marke und Ihre Vorlieben anzupassen. 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>
Erklärung:
So verwenden Sie dieses Formular:
Dieses Formular bietet eine grundlegende Struktur und einen Grundstil. Sie können weitere Anpassungen vornehmen, indem Sie weitere Felder hinzufügen, den Stil ändern und komplexere JavaScript-Funktionen implementieren. |
|
||||||||||