<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<style>
*{
box-sizing: border-box;
margin: 0;
padding: 0;
}
body {
background-color: rgb(107, 151, 189);
height: 90vh;
}
#survey-form{
background-color: rgb(205, 219, 236);
width: 55%;
margin: 0 auto;
padding: 1.75% 5%;
border-radius: 3%;
}
.inquire{
margin: 30px auto;
}
h1{
text-align: center;
font-family:'Trebuchet MS';
margin: 10px auto 0px auto;
padding: 1%;
}
p {
text-align: center;
font-family: 'Trebuchet MS';
font-weight: normal;
font-size: 1.2em;
margin:0 auto 1% auto;
padding: 0.5%;
}
.inquire p{
text-align: start;
}
.buttonOne{
background-color: rgb(56, 150, 56);
width: 100%;
height: 3em;
border-radius: 2%;
font-size: 1.2em;
}
input, textarea, select{
width: 100%;
margin: 0px;
padding: 1%;
background-color: rgb(243, 239, 239);
}
#name-label,
#email-label,
#number-label{
font-size: 1.2em;
margin-top: 1%;
}
.radio{
display: inline-flex;
align-items: center;
margin-left: 1%;
}
#myRadio{
margin: 10px 10px;
}
.checkbox{
display: inline-flex;
align-items: center;
margin-left: 1%;
}
#MyCheckbox{
margin: 10px;
}
</style>
<header>
<h1 id="title">Behavioral Therapy Survey Form</h1>
<p id="description">Taking the time to make effective assessments</p>
</header>
<body>
<form id="survey-form">
<!--enter your name-->
<div class="inquire">
<label id="name-label" for="name">Name</label>
<input id="name" type="text" name="name" placeholder="Enter your Name" required="">
</div>
<!--enter your email-->
<div class="inquire">
<label id="email-label" for="email">E-mail</label><br/>
<input id="email" type="email" name="email" placeholder="Enter your Email" required="">
</div>
<!--enter your age-->
<div class="inquire">
<label id="number-label" for="number">Age (Optional)</label><br/>
<input id="number" type="number" name="age" placeholder="Age" min="18" max="99">
</div>
<!--1 Select how soon you need the service-->
<div class="inquire">
<p>How soon would you need services to be provided?</p>
<select id="dropdown" name="service" required="">
<option value="" disabled selected>Choose a desired time frame</option>
<option value="Emergency">Emergency</option>
<option value="In two weeks">In two weeks</option>
<option value="One month">One month</option>
<option value="In the next three months">In the next three months</option>
<option value="Only doing research">Only doing research</option>
<option value="Not in a rush">Not in a rush</option>
</select>
</div>
<!--Radio selection part-->
<div class="inquire">
<p>Do you think we offer the services that you need at the moment?</p>
<div>
<label for="myRadio" class="radio">
<input id="myRadio" type="radio" name="service-match" value="definitely">
Definitely</label>
</div>
<div>
<label for="myRadio" class="radio">
<input id="myRadio" type="radio" name="service-match" value="maybe">
Maybe</label>
</div>
<div>
<label for="myRadio" class="radio">
<input id="myRadio" type="radio" name="service-match" value="no">
No</label>
</div>
</div>
<!-- 2 Selection dropdown menu-->
<div class="inquire">
<p>What kind of professional best suits your needs?</p>
<select id="dropdown" name="service" required="">
<option value="" disabled selected>Select a needed service</option>
<option value="speech therapist">Speech Therapist</option>
<option value="occupational therapist">Occupational Therapist</option>
<option value="behavioral therapist">Behavioral Therapist</option>
<option value="Psychologist">Pyschologist</option>
<option value="Child therapist">Child Therapist</option>
<option value="clinical therapist">Clinical Therapist</option>
</select>
</div>
<!--Checkbox button selection-->
<div class="inquire">
<p>Are there other services you would like to find here? (check all that apply)</p>
<div>
<label for="MyCheckbox" class="checkbox">
<input id="MyCheckbox" type="checkbox" name="find" value="Books">
Books</label>
</div>
<div>
<label for="MyCheckbox" class="checkbox">
<input id="MyCheckbox" type="checkbox" name="find" value="Online Forum">
Online Forum</label>
</div>
<div>
<label for="MyCheckbox" class="checkbox">
<input id="MyCheckbox" type="checkbox" name="find" value="group meetups">
Group Meetups</label>
</div>
<div>
<label for="MyCheckbox" class="checkbox">
<input id="MyCheckbox" type="checkbox" name="find" value="additional resources">
Additional Resources</label>
</div>
<div>
<label for="MyCheckbox" class="checkbox">
<input id="MyCheckbox" type="checkbox" name="find" value="referrals">
Referrals</label>
</div>
</div>
<!--Text area for suggestions -->
<div class="inquire">
<p>Any comments or suggestions?</p>
<textarea name="message" id="" cols="30" rows="5" placeholder="Enter your comment here..."></textarea>
</div>
<!--Submit button-->
<div class="inquire">
<button type="submit" class="buttonOne" id="submit">Submit</button>
</div>
<!--enter your email + html5 validation error -->
<!--enter a number in a field + html5 validation error for non-numbers and validation error for numbers outside of the range defined by min and max attributes-->
</form>
</body>
</html>
type or paste code here
Hey @santiaguson the reason is because you have set input width to 100% and checkboxes and radios are also inputs, you can get around this by using input:not() in css, example below
input:not([type="checkbox"]):not([type="radio"]), textarea, select{
width: 100%;
margin: 0px;
padding: 1%;
background-color: rgb(243, 239, 239);
}
Thank you so much!!
I hope my code was organized enough. At the moment I am doing freecodecamp and codecademy, with the goal of one day becoming a front end developer. I am looking for a mentor, let me know if that is something you are interested in. Again, thank you… it finally looks the way its suppose to 
Have a good one!
1 Like
@santiaguson i haven’t really got the time to be a mentor atm mate, if you make a post about it maybe someone will be willing to be a mentor for you, i started here mate and now i have a full time job in software development so keep at it mate and you will get there 
That’s awesome! good for you. That’s my goal too. 
1 Like
This topic was automatically closed 182 days after the last reply. New replies are no longer allowed.