HTML 및 JavaScript를 사용하여 최신 웹 양식을 생성합니다.
|
모델을 직접 쿼리하고 Cloud 콘솔에서 다른 매개변수 값을 사용하거나 Vertex AI API를 직접 호출하여 반환된 결과를 테스트할 수 있습니다.
|
|||||||||||
자유 형식 프롬프트
HTML 및 JavaScript를 사용하여 고객이 Google 제품에 관심을 표현하는 데 사용할 웹 양식을 생성합니다. 이 양식은 고객의 이름, 이메일 주소, 방문 경로 등을 수집해야 합니다. 이 양식은 최신 웹 디자인 트렌드를 반영해야 합니다.
응답관심 표현을 위한 최신 웹 양식이 코드는 HTML 및 JavaScript를 사용하는 최신 웹 양식의 기본 구조를 제공합니다. 특정 브랜드 및 환경설정에 맞게 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>
설명:
이 양식을 사용하려면 다음 안내를 따르세요.
이 양식은 기본 구조와 스타일을 제공합니다. 필드를 추가하고, 스타일을 변경하고, 더 복잡한 JavaScript 기능을 구현하여 추가로 맞춤설정할 수 있습니다. |
|
||||||||||