Scribd
Upload
14 views4 pages

Build A Survey Form

kk

Uploaded by

04 Tejaswini Sanjay Chikane
Copyright
© © All Rights Reserved
We take content rights seriously. If you suspect this is your content, claim it here.
Available Formats
Download as TXT, PDF, TXT or read online on Scribd
14 views4 pages

Build A Survey Form

kk

Uploaded by

04 Tejaswini Sanjay Chikane
Copyright
© © All Rights Reserved
We take content rights seriously. If you suspect this is your content, claim it here.
Available Formats
Download as TXT, PDF, TXT or read online on Scribd
You are on page 1/ 4

** start of undefined **

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Survey Form</title>
<link rel="stylesheet" href="styles.css">
</head>
<body>

<div class="survey-container">
<h1 id="title">Customer Feedback Survey</h1>
<p id="description">We appreciate your feedback! Please take a moment to
fill out this survey.</p>

<form id="survey-form">
<!-- Name Field -->
<div class="form-group">
<label id="name-label" for="name">Full Name:</label>
<input type="text" id="name" name="name" required
placeholder="Enter your full name">
</div>

<!-- Email Field -->


<div class="form-group">
<label id="email-label" for="email">Email Address:</label>
<input type="email" id="email" name="email" required
placeholder="Enter your email">
</div>

<!-- Age Field -->


<div class="form-group">
<label id="number-label" for="number">Age:</label>
<input type="number" id="number" name="age" required
placeholder="Enter your age" min="18" max="100">
</div>

<!-- Dropdown Menu -->


<div class="form-group">
<label for="dropdown">How did you hear about us?</label>
<select id="dropdown" name="referral">
<option value="Internet">Internet</option>
<option value="Friend">Friend</option>
<option value="Advertisement">Advertisement</option>
<option value="Other">Other</option>
</select>
</div>

<!-- Radio Buttons -->


<div class="form-group">
<label>What is your satisfaction level?</label><br>
<label><input type="radio" name="satisfaction" value="Very
Satisfied" required> Very Satisfied</label><br>
<label><input type="radio" name="satisfaction" value="Satisfied"
required> Satisfied</label><br>
<label><input type="radio" name="satisfaction" value="Neutral"
required> Neutral</label><br>
<label><input type="radio" name="satisfaction" value="Dissatisfied"
required> Dissatisfied</label>
</div>

<!-- Checkboxes -->


<div class="form-group">
<label>Which of our services did you use?</label><br>
<label><input type="checkbox" name="services" value="Haircut">
Haircut</label><br>
<label><input type="checkbox" name="services" value="Manicure">
Manicure</label><br>
<label><input type="checkbox" name="services" value="Massage">
Massage</label><br>
<label><input type="checkbox" name="services" value="Facial">
Facial</label>
</div>

<!-- Additional Comments -->


<div class="form-group">
<label for="comments">Any additional comments:</label><br>
<textarea id="comments" name="comments" rows="4" placeholder="Your
feedback is valuable to us!"></textarea>
</div>

<!-- Submit Button -->


<div class="form-group">
<button type="submit" id="submit">Submit</button>
</div>
</form>
</div>

</body>
</html>

** end of undefined **

** start of undefined **

/* Basic Reset */
* {
margin: 0;
padding: 0;
box-sizing: border-box;
}

/* Body styling */
body {
font-family: Arial, sans-serif;
background-color: #f7f7f7;
padding: 20px;
display: flex;
justify-content: center;
align-items: center;
height: 100vh;
}

/* Survey container styling */


.survey-container {
background-color: #fff;
padding: 20px;
border-radius: 8px;
box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
width: 100%;
max-width: 600px;
}

/* Heading */
h1 {
text-align: center;
color: #333;
margin-bottom: 20px;
}

/* Description */
#description {
text-align: center;
color: #555;
margin-bottom: 20px;
}

/* Form group styling */


.form-group {
margin-bottom: 20px;
}

/* Label styling */
label {
font-size: 1.1em;
display: block;
margin-bottom: 5px;
}

/* Input and select elements */


input[type="text"],
input[type="email"],
input[type="number"],
select,
textarea {
width: 100%;
padding: 10px;
font-size: 1em;
margin-top: 5px;
border: 1px solid #ddd;
border-radius: 5px;
}

/* Textarea styling */
textarea {
resize: vertical;
}

/* Submit button styling */


button[type="submit"] {
background-color: #4CAF50;
color: white;
padding: 10px 20px;
font-size: 1.2em;
border: none;
border-radius: 5px;
cursor: pointer;
width: 100%;
}

button[type="submit"]:hover {
background-color: #45a049;
}

/* Radio and checkbox styling */


input[type="radio"],
input[type="checkbox"] {
margin-right: 5px;
}

/* Responsive Design */
@media (max-width: 600px) {
.survey-container {
padding: 15px;
}
}

** end of undefined **

You might also like