Prompt Details
Model
Chat - GPT-3.5 (gpt-3.5-turbo)
Token size
64 ($0.00010 / call)
Example input
To begin, simply duplicate and insert the prompt. Make use of the new template as a starting point for crafting your own unique story!
Example output
Sure! Here's an example of an interactive survey using HTML, CSS, and JavaScript with a simple, modern, and minimalist design. The survey includes a button to reset the form without the possibility of filling it out again.
HTML:
```html
<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" type="text/css" href="styles.css">
</head>
<body>
<h1>Interactive Survey</h1>
<form id="surveyForm">
<label for="name">Name:</label>
<input type="text" id="name" required>
<label for="email">Email:</label>
<input type="email" id="email" required>
<label for="age">Age:</label>
<input type="number" id="age" required>
<button type="submit">Submit</button>
</form>
<button id="resetButton">Reset Form</button>
<script src="script.js"></script>
</body>
</html>
```
CSS (styles.css):
```css
body {
font-family: Arial, sans-serif;
text-align: center;
padding: 20px;
}
h1 {
margin-bottom: 20px;
}
form {
display: flex;
flex-direction: column;
align-items: center;
margin-bottom: 20px;
}
label {
margin-bottom: 5px;
}
input {
padding: 5px;
margin-bottom: 10px;
width: 200px;
}
button[type="submit"], button#resetButton {
padding: 10px 20px;
font-size: 16px;
background-color: #4CAF50;
color: white;
border: none;
cursor: pointer;
}
button#resetButton {
background-color: #f44336;
}
button[type="submit"]:hover, button#resetButton:hover {
opacity: 0.8;
}
button[type="submit"]:focus, button#resetButton:focus {
outline: none;
}
```
JavaScript (script.js):
```javascript
document.getElementById("surveyForm").addEventListener("submit", function(event) {
event.preventDefault();
var name = document.getElementById("name").value;
var email = document.getElementById("email").value;
var age = document.getElementById("age").value;
// Process the form data as needed
console.log("Name: " + name);
console.log("Email: " + email);
console.log("Age: " + age);
// Clear the form fields
document.getElementById("name").value = "";
document.getElementById("email").value = "";
document.getElementById("age").value = "";
});
document.getElementById("resetButton").addEventListener("click", function() {
document.getElementById("surveyForm").reset();
});
```
Save the HTML code as "index.html", the CSS code as "styles.css", and the JavaScript code as "script.js" in the same directory. Open the "index.html" file in a web browser, and you should see the interactive survey with the provided design. The form data will be logged to the console when submitted, and the form fields can be reset by clicking the "Reset Form" button.
Instant access
Commercial use
Money‑backBy purchasing this prompt, you agree to our terms of service
2
Favorites
25
Views
GPT-3.5-TURBO
💎 Create the website of your dreams Including your own surveys or interactive forms for your visitors!
💥 You will have everything you need to create it, such as your own html, css and javascript code.
🌟 Workable for any design, GET IT NOW!
...more
Added over 1 month ago
