Created
March 19, 2020 17:31
-
-
Save mattsharpe/59a085f0069fb2a51aeb8501a9510635 to your computer and use it in GitHub Desktop.
Form styling
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
<!doctype html> | |
<html lang="en"> | |
<head> | |
<!-- Required meta tags --> | |
<meta charset="utf-8"> | |
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no"> | |
<!-- Bootstrap CSS --> | |
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/css/bootstrap.min.css" integrity="sha384-Vkoo8x4CGsO3+Hhxv8T/Q5PaXtkKtu6ug5TOeNV6gBiFeWPGFN9MuhOf23Q9Ifjh" crossorigin="anonymous"> | |
<title>Order for Doorstep Collective</title> | |
</head> | |
<body class="bg-light"> | |
<nav class="navbar navbar-light bg-light"> | |
<span class="navbar-brand" >Order for Doorstep Collective</span> | |
</nav> | |
<div class="container"> | |
<form name="contactform" method="post" action="feedback_form.php"> | |
<h4 class="mb-3">Your Details</h4> | |
<div class="row mb-3"> | |
<div class="col-md-6"> | |
<label for="firstName">First Name <em>(required)</em></label> | |
<input class="form-control" required type="text" name="firstName" maxlength="50" size="25"> | |
</div> | |
<div class="col"> | |
<label for="firstName">Last Name <em>(required)</em></label> | |
<input class="form-control" required type="text" name="lastName" maxlength="50" size="25"> | |
</div> | |
</div> | |
<div class="row mb-3"> | |
<div class="col"> | |
<label for="firstName">Email Address <em>(required)</em></label> | |
<input class="form-control" required type="text" name="email" maxlength="80" size="25"> | |
</div> | |
</div> | |
<div class="row mb-3"> | |
<div class="col"> | |
<label for="phoneNumber">Telephone Number</label> | |
<input class="form-control" type="text" name="phoneNumber" maxlength="30" size="25"> | |
</div> | |
</div> | |
<h4 class="mb-3">Delivery Options</h4> | |
<div class="row mb-3"> | |
<div class="col-md-6 col-xs-12"> | |
<h6>Delivery Days Wanted: <em>(required)</em></h6> | |
<input type="checkbox" name="deliveryDays[]" value="Monday" id="Monday"> | |
<label for="Monday">Monday</label><br> | |
<input type="checkbox" name="deliveryDays[]" value="Tuesday" id="Tuesday"> | |
<label for="Tuesday">Tuesday</label><br> | |
<input type="checkbox" name="deliveryDays[]" value="Wednesday" id="Wednesday"> | |
<label for="Wednesday">Wednesday</label><br> | |
<input type="checkbox" name="deliveryDays[]" value="Thursday" id="Thursday"> | |
<label for="Thursday">Thursday</label><br> | |
<input type="checkbox" name="deliveryDays[]" value="Friday" id="Friday"> | |
<label for="Friday">Friday</label><br> | |
<input type="checkbox" name="deliveryDays[]" value="Saturday" id="Saturday"> | |
<label for="Saturday">Saturday</label><br> | |
<input type="checkbox" name="deliveryDays[]" value="Sunday" id="Sunday"> | |
<label for="Sunday">Sunday</label><br> | |
</div> | |
<div class="col-md-6"> | |
<h6>Delivery Options Wanted: <em>(required)</em></h6> | |
<input type="checkbox" name="orderOption[]" value="orderOption1" id="orderOption1"> | |
<label for="orderOption1">Hot Food</label><br> | |
<input type="checkbox" name="orderOption[]" value="orderOption2" id="orderOption2"> | |
<label for="orderOption2">Cold Food</label><br> | |
<input type="checkbox" name="orderOption[]" value="orderOption3" id="orderOption3"> | |
<label for="orderOption3">Prescriptions</label><br> | |
</div> | |
</div> | |
<div class="row mb-3"> | |
<div class="col"> | |
<h6>Dietary Requirements: <em>(required)</em></h6> | |
<textarea class="form-control" name="dietaryRequirements" maxlength="1000" cols="25" rows="3"></textarea> | |
</div> | |
</div> | |
<div class="row mb-3"> | |
<div class="col-1"> | |
<input type="checkbox" name="privacy" value="privacy" id="privacy" checked> | |
</div> | |
<div class="col"> | |
<label class="pull-right" for="privacy">I'm happy that my data will be used to bring me necessary items and then be annihilated once this is all over.</label> | |
</div> | |
</div> | |
<div class="row mb-3"> | |
<div class="col"> | |
<input type="submit" value="Submit" class="btn btn-primary"> | |
</div> | |
</div> | |
</form> | |
</div> | |
<!-- Optional JavaScript --> | |
<!-- jQuery first, then Popper.js, then Bootstrap JS --> | |
<script src="https://code.jquery.com/jquery-3.4.1.slim.min.js" integrity="sha384-J6qa4849blE2+poT4WnyKhv5vZF5SrPo0iEjwBvKU7imGFAV0wwj1yYfoRSJoZ+n" crossorigin="anonymous"></script> | |
<script src="https://cdn.jsdelivr.net/npm/popper.js@1.16.0/dist/umd/popper.min.js" integrity="sha384-Q6E9RHvbIyZFJoft+2mJbHaEWldlvI9IOYy5n3zV9zzTtmI3UksdQRVvoxMfooAo" crossorigin="anonymous"></script> | |
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/js/bootstrap.min.js" integrity="sha384-wfSDF2E50Y2D1uUdj0O3uMBJnjuUD4Ih7YwaYd1iqfktj0Uod8GCExl3Og8ifwB6" crossorigin="anonymous"></script> | |
</body> | |
</html> |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment