Skip to content

Commit d9fc9e0

Browse files
harshita2216harshita2216
authored
Merge pull request #344 from jugeshraghav/surveyForm
survey form added.
2 parents 29c250d + 535c567 commit d9fc9e0

File tree

5 files changed

+242
-1
lines changed

5 files changed

+242
-1
lines changed

‎Index.md

Lines changed: 2 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -130,4 +130,5 @@ I've used the concept of *Async functions* and *react hook usestate* also worked
130130
|[Product Landing Page](https://github.com/Ayushparikh-code/Web-dev-mini-projects/tree/saloni-15-project-1/Product%20Landing%20Page)| A beginner-friendly single-page product landing website built with HTML and CSS for understanding the concept of responsive websites using CSS Grids.
131131
| [Loan Calculator](https://github.com/Ayushparikh-code/Web-dev-mini-projects/tree/main/Loan%20Calculator)| This is a simple loan calculator which calculates the Loan EMI (Equated Monthly Installment).
132132
|[My Online Meal](https://github.com/Ayushparikh-code/Web-dev-mini-projects/tree/main/My-Online-Meal)| It is a simple and responsive website.
133-
|[Good Vibes Form](https://github.com/Ayushparikh-code/Web-dev-mini-projects/tree/main/Good-Vibes-Form)| It is a simple and responsive form which can be used in any project.
133+
|[Good Vibes Form](https://github.com/Ayushparikh-code/Web-dev-mini-projects/tree/main/Good-Vibes-Form)| It is a simple and responsive form which can be used in any project.
134+
|[Survey Form](https://github.com/Ayushparikh-code/Web-dev-mini-projects/tree/main/Survey-Form)| It is a simple and responsive urvey-Form.

‎Survey-Form/readme.md

Lines changed: 33 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,33 @@
1+
# Welcome 🖐 to the Survey Form.
2+
It is a simple and responsive survey Form.
3+
4+
## Desktop View
5+
![Default View](surveyForm.png)
6+
7+
8+
9+
## 💻Tech Stack
10+
<br>
11+
12+
![HTML](https://img.shields.io/badge/html5%20-%23E34F26.svg?&style=for-the-badge&logo=html5&logoColor=white)
13+
![CSS](https://img.shields.io/badge/css3%20-%231572B6.svg?&style=for-the-badge&logo=css3&logoColor=white)
14+
15+
<br>
16+
17+
### How to use:
18+
19+
---
20+
21+
- Download or clone the repository
22+
23+
```
24+
git clone https://github.com/Ayushparikh-code/Web-dev-mini-projects.git
25+
```
26+
27+
- Go to the directory
28+
- Run the index.html file
29+
- Navigate the form.
30+
31+
<br>
32+
33+
## Happy Coding!

‎Survey-Form/style.css

Lines changed: 94 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,94 @@
1+
*{
2+
margin:0;
3+
padding:0;
4+
}
5+
body{
6+
background-color:lightyellow;
7+
text-align:center;
8+
display:flex;
9+
justify-content:center;
10+
font-family: 'Anaheim', sans-serif;
11+
}
12+
/*form*/
13+
#main{
14+
border:1px solid lightgrey;
15+
border-radius:1rem;
16+
width:70%;
17+
padding:12px;
18+
margin-top:12px;
19+
margin-left:14px;
20+
background-color:white;
21+
text-align:left;
22+
}
23+
h1{
24+
font-size:20px;
25+
margin-bottom:12px;
26+
text-align:center;
27+
}
28+
29+
/*personal section*/
30+
fieldset{
31+
border:1px soliD lightgrey;
32+
margin:10px;
33+
text-align: left;
34+
padding-left: 10px
35+
}
36+
div{
37+
margin-right:50px;
38+
}
39+
legend{
40+
font-size:15px;
41+
}
42+
43+
p{
44+
display:inline;
45+
font-size:14px;
46+
color:black;
47+
opacity:0.6;
48+
}
49+
/*section 3*/
50+
#dropdown{
51+
font-size:12px;
52+
color:black;
53+
opacity:0.6;
54+
}
55+
#dropdown2{
56+
font-size:12px;
57+
color:black;
58+
opacity:0.6;
59+
}
60+
61+
/* section 4 */
62+
textarea{
63+
font-size:10px;
64+
}
65+
/*button styling*/
66+
#button{
67+
color:white;
68+
background-color:red;
69+
border:1px solid red;
70+
padding:2px;
71+
display:block;
72+
margin:auto;
73+
}
74+
#submit{
75+
color:white;
76+
background-color:red;
77+
border:1px solid red;
78+
padding:2px;
79+
display:block;
80+
margin:auto;
81+
}
82+
/*utility classes*/
83+
.form-rows{
84+
margin:12px;
85+
}
86+
.form-rows input{
87+
font-size:10px;
88+
color:lightgrey;
89+
}
90+
.form-rows label{
91+
font-size:14px;
92+
color:black;
93+
opacity:0.6;
94+
}

‎Survey-Form/survey form.html

Lines changed: 113 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,113 @@
1+
<!DOCTYPE html>
2+
<html lang="en">
3+
4+
<head>
5+
<meta charset="UTF-8">
6+
<meta name="viewport" content="width=device-width, initial-scale=1.0">
7+
<title>survey form</title>
8+
<link rel="stylesheet" href="style.css">
9+
<link rel="preconnect" href="https://fonts.gstatic.com">
10+
<link href="https://fonts.googleapis.com/css2?family=Anaheim&display=swap" rel="stylesheet">
11+
</head>
12+
13+
<body>
14+
<!---------------------------------------------form-begin------------------------------------------------------------------------------------------->
15+
<form action="" id="main">
16+
<h1>Application For Permission To Date My Daughter</h1>
17+
<strong>Note:</strong><p>Form is to be completed atleast 21 days prior to date
18+
</p>
19+
<!---------------------------------------------section1----------------------------------------------------------------------------------------->
20+
<fieldset>
21+
<legend>Personal Details</legend>
22+
<div class="form-rows">
23+
<label for="name">Name:</label>
24+
<input type="text" id="name" placeholder="Enter name here">
25+
</div>
26+
<div class="form-rows">
27+
<label for="Address">Address:</label>
28+
<input type="Address" id="Address" placeholder="Enter Address here">
29+
</div>
30+
<div class="form-rows">
31+
<label for="Email">Email:</label>
32+
<input type="Email" id="Email" placeholder="Enter Email here">
33+
</div>
34+
<div class="form-rows">
35+
<label for="number">Phone Number:</label>
36+
<input type="number" id="number" placeholder="Enter 10 digit number">
37+
</div>
38+
<div class="form-rows">
39+
<label for="iq">IQ:</label>
40+
<input type="number" id="iq" placeholder="Enter IQ here">
41+
</div>
42+
<div class="form-rows">
43+
<label for="gender">Gender:</label><br>
44+
<input type="radio" id="gender" name="gender"><p>Male</p><br>
45+
<input type="radio" id="gender" name="gender"><p>Female</p><br>
46+
<input type="radio" id="gender" name="gender"><p>Others</p><br>
47+
</div>
48+
<div class="form-rows">
49+
<label for="date">Date of Proposing Outing:</label>
50+
<input type="date" id="date">
51+
</div>
52+
</fieldset>
53+
<!---------------------------------------------section 2------------------------------------------------------------------------------------------------------>
54+
<fieldset>
55+
<div class="form-rows">
56+
<label for="list">Check all that apply:</label><br>
57+
<input type="checkbox" id="list" name="check"><p>I have tattoos and/or piercings</p><br>
58+
<input type="checkbox" id="list" name="check"><p>I own a vehicle</p><br>
59+
<input type="checkbox" id="list" name="check"><p>I am more than 2 years older than your daughter</p><br>
60+
<input type="checkbox" id="list" name="check"><p>I work full-time</p><br>
61+
<input type="checkbox" id="list" name="check"><p>My parents are rich</p><br>
62+
<input type="checkbox" id="list" name="check"><p>Is the date at a well lit public location</p><br>
63+
</select>
64+
</div>
65+
</fieldset>
66+
<!--------------------------------------------section 3------------------------------------------------------------------------------------------>
67+
<fieldset id="fieldset3">
68+
<div class="form-rows">
69+
<label for="dropdown1">Political Persuation:</label>
70+
<select id="dropdown">
71+
<option value="1">Left Wing</option>
72+
<option value="2">Right Wing</option>
73+
<option value="3">Conservative</option>
74+
<option value="4">Nazi</option>
75+
</select><br>
76+
<label for="dropdown2">Education Level Completed:</label>
77+
<select id="dropdown2">
78+
<option value="10">University</option>
79+
<option value="20">College</option>
80+
<option value="30">High school</option>
81+
<option value="40">None</option>
82+
</select>
83+
</div>
84+
</fieldset>
85+
<!---------------------------------------------section4 ------------------------------------------------------------------------------------------>
86+
<fieldset>
87+
<legend>Essay Section</legend>
88+
89+
<div class="form-rows">
90+
<label for="area1">In 50 words or more explain why
91+
you want to date my daughter:</label>
92+
<textarea id="area1" cols=
93+
'70' rows='5' placeholder="Enter text here"></textarea>
94+
</div>
95+
<div class="form-rows">
96+
<label for="area2">Please upload contact details
97+
for 2 references:</label>
98+
<textarea id="area2" cols=
99+
'70' rows='5' placeholder="Enter text here"></textarea>
100+
</div>
101+
<div class="form-rows">
102+
<label for="button">Upload Police Clearance Certificate, Bank Statement and
103+
Medical certificates here:</label>
104+
<button id="button" value="Attach Files">Attach Files</button>
105+
</div>
106+
</fieldset>
107+
<!---------------------------------------------submit button----------------------------------------------------------------------------------------->
108+
<input type="button" id="submit" value="send your Application">
109+
</form>
110+
111+
</body>
112+
113+
</html>

‎Survey-Form/surveyForm.png

68.1 KB
Loading

0 commit comments

Comments
 (0)