Skip to content

Instantly share code, notes, and snippets.

@uncledevhq

uncledevhq/index.html

Created April 12, 2021 10:51
Show Gist options
  • Save uncledevhq/9cb42ea8abd75bf091fd2a8d0dda8ce5 to your computer and use it in GitHub Desktop.
Save uncledevhq/9cb42ea8abd75bf091fd2a8d0dda8ce5 to your computer and use it in GitHub Desktop.
Download ZIP
Survey Form
Raw
index.html
<main id="main-container">
<header id="header-section">
<h1 id="title">
School to Newsletter survey
</h1>
<p id="descripltioln">
Lastly, we’ll drag and drop a button and edit the text to “Add to cart” and link it up to a fresh new screen.
</p>
</header>
<form action="" id="survey-form">
<label class="form-labels" for="name" id="name-label">
<span class="form-labels">Name</span>
<input type="text" name="name" id="name" placeholder="Enter your name" class="full-width-inpt" required>
</label>
<br>
<label class="form-labels" for="email" id="email-label">
<span class="form-labels">Email</span>
<input type="email" name="email" id="email" placeholder="Enter your Email" class="full-width-inpt" required>
</label>
<br>
<label for="number" id="number-label">
<span class="form-labels">Age(optional)</span>
<input type="number" name="name" min="16" max="35" placeholder="Age" id="number" class="full-width-inpt">
</label>
<br><br>
<label for="dropdown">
Which course are you doing?
<br>
<select name="dropdown-role" id="dropdown" class="full-width-inpt">
<option value="" default>Select a course below</option>
<option value="journalism">journalism</option>
<option value="digital media">Digital media</option>
<option value="mass comunication">Mass communications</option>
</select>
</label>
<div id="radio-buttons">
<p>
How often do you read the newsletter?
</p>
<br>
<label class="form-labels" for="day">
<input type="radio" id="day" value="day" name="times-read">
<span>Everyday</span>
</label>
<label class="form-labels" for="weekly">
<input type="radio" id="weekly" value="weekly" name="times-read">
<span>Weekly</span>
</label>
<label class="form-labels" for="monthly">
<input type="radio" value="monthly" id="monthly" name="times-read">
<span>Monthly</span>
</label>
<label class="form-labels" for="never">
<input type="radio" value="never" id="never" name="times-read">
<span>Not at All</span>
</label>
<br>
<label for="brief-text">
Any comments or suggestions? <br>
<textarea class="full-width-inpt" placeholder="Enter your suggestions here..."></textarea>
</label>
</div>
<div id="button-wrapper">
<button class="full-width-inpt" type="submit" id="submit-button">
Submit
</button>
</div>
</form>
</main>
Raw
style.css
* {
margin: 0;
padding: 0;
}
body {
background-color: #f5f5f5;
}
#main-container {
width: 100%;
padding: 30px;
background-color: #fff;
border-radius: 15px;
max-width: 480px;
margin: 100px auto 50px auto;
}
#header-section {
padding-bottom: 10px;
border-bottom: 5px solid #39f;
}
#survey-form {
margin: 25px 0 25px 0;
}
.full-width-inpt {
width: 100%;
padding:10px 20px;
box-sizing: border-box;
font-size: .9rem;
margin-top: 10px;
font-weight: 600;
border: 2px solid #ff8900;
outline: none;
box-sizing: border-box;
border-radius: 6px;
}
.form-labels{
display: block;
}
#radio-buttons {
margin-top: 20px;
}
#button-wrapper {
width: 100%;
margin-top: 20px;
margin-bottom: 20px;
text-align: center;
}
#submit-button {
background-color: #39f;
border-color: #39f;
color: #fff;
cursor: pointer;
}
#dropdown {
color: #777;
}
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment