A survey is a method of gathering information from a sample of people to generalize the results to a larger scale. A survey form is a form with questions designed to gather information about people or customer’s experiences, preferences, and needs.
In this blog (Responsive Survey Form), there is a form that is created to take a survey for a cosmetic company. This form has multiple questions, checkboxes, radio buttons, a comment box, and a submit button.
Radio buttons are used in some questions so that people can select only one option from many. That they can’t able to choose more than one option. The checkbox is used to choose multiple options from the given option as much as they wish. The comment or suggestion box is made flexible so that the customer can type as many lines as they want.
The submit button is placed at the bottom right corner of the page. This submit button is used to submit the form. After submitting the form, the response will be received by the owner.
The source code of this Responsive Survey Form using HTML & CSS is given below, if you want the source code of this program, you can copy it. You can use this Responsive Survey Form using HTML & CSS code on your projects and can take this form to the next level.
Responsive Survey Form using HTML & CSS [Source Code]
To make this website, you would like to make two files: an HTML file & a CSS file. First, create an HTML file with the name of index.html and remember, you have to create a file with a .html extension.
:root{
--color-white: #f3f3f3;
--color-fuchsia: #db7093;
--color-darkblue-alpha: rgba(27,27,50,0.8);
--color-green: #37af65;
}
body{
font-family: 'Poppins',sans-serif;
font-size: 1rem;
line-height: 1.4;
margin: 0;
top: 0;
left: 0;
height: 100%;
width: 100%;
background-color: #FFC0CB;
}
h1{
font-weight: 400;
line-height: 1.2;
}
p{
font-size: 1.125rem;
font-weight: bold;
}
h1,p{
margin-top: 0;
margin-bottom: 0.9rem;
}
label{
font-size: 1.125rem;
margin-bottom: 0.5rem;
}
input,button,select,textarea{
margin: 0;
font-family: inherit;
font-size: inherit;
line-height: inherit;
}
button{
border: none;
}
.group{
width: 100%;
margin: 3.125rem auto 0 auto;
}
@media(min-width: 576px){
.group{
max-width: 540px;
}
}
@media(min-width: 768px){
.group{
max-width: 720px;
}
}
.header{
padding: 0 0.625rem;
margin-bottom: 1.875rem;
}
.description{
font-style: italic;
font-weight: 200;
text-shadow: 1px 1px 1px rgba(0,0,0,0.4);
}
.clue{
margin-left: 0.25rem;
font-size: 0.9rem;
color: #e4e4e4;
}
.text-center{
text-align: center;
}
form{
background: var(--color-fuchsia);
padding: 2.5rem 0.625rem;
border-radius: 0.25rem;
margin-bottom: 50px;
display: inline-block;
box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2), 0 6px 20px 0 rgba(0, 0, 0, 0.19);
}
@media(min-width: 480px){
form{
padding: 2.5rem;
}
}
.form-group{
margin: 0 auto 1.25rem auto;
padding: 0.25rem;
}
.form-control{
display: block;
width: 100%;
height: 2.375rem;
padding: 0.375rem 0.75rem;
color: #495057;
background-color: #fff;
background-chip: padding-box;
border-radius: 0.25rem;
transition: border-color 0.15s ease-in-out;
box-shadow: 0.15s ease-in-out;
}
.form-control:focus{
border-color: #80bdff;
outline: 0;
box-shadow: 0 0 0 0.2rem rgba(0,123,255,0.25);
}
.input-radio,.input checkbox{
display: inline-block;
margin-right: 0.625rem;
min-height: 1.25rem;
min-width: 1.25rem;
}
.input-textarea{
min-height: 120px;
width: 600px;
padding: 0.625rem;
resize: vertical;
border-radius: 5px;
}
.submit-button{
display: block;
width: 100px;
padding: 0.75rem;
background: #fff8dc;
color: inherit;
border-radius: 10px;
cursor: pointer;
font-weight: 600;
float: right;
margin-right: 7px;
}
.credit{
text-align: center;
color: #db7093;
font-family: 'Trebuchet MS', 'Lucida Sans Unicode', 'Lucida Grande', 'Lucida Sans', Arial, sans-serif;
}
.credit a{
text-decoration: none;
color: #420d09;
font-weight: bold;
}
Thank you for reading our blog. If you face any problem in creating this Responsive Survey Form using HTML & CSS, then contact us or comment us. We’ll try to provide a solution to your problem as soon as possible.
إرسال تعليق
Thank you
Learning robo team