Last active
April 11, 2019 13:24
-
-
Save LarrySul/cc29afcf5f4c6cacd069d0b3f77fe380 to your computer and use it in GitHub Desktop.
Setting up and validating contact form
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> | |
<head> | |
<meta charset="utf-8" /> | |
<meta http-equiv="X-UA-Compatible" content="IE=edge"> | |
<title>Sending Feedback PHPMailer</title> | |
<meta name="viewport" content="width=device-width, initial-scale=1"> | |
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/css/bootstrap.min.css" integrity="sha384-MCw98/SFnGE8fJT3GXwEOngsV7Zt27NXFoaoApmYm81iuXoPkFOJwJ8ERdknLPMO" crossorigin="anonymous"> | |
</head> | |
<body> | |
<!-- Button trigger modal --> | |
<button type="button" class="btn btn-primary mt-3 ml-4" data-toggle="modal" data-target="#exampleModal"> | |
Feedback form | |
</button> | |
<!-- Modal --> | |
<div class="modal fade" id="exampleModal" tabindex="-1" role="dialog" aria-labelledby="exampleModalLabel" aria-hidden="true"> | |
<div class="modal-dialog" role="document"> | |
<div class="modal-content"> | |
<form method="POST" enctype="multipart/form-data" class="container" id="needs-validation" novalidate> | |
<div class="modal-header"> | |
<h5 class="modal-title" id="exampleModalLabel">Modal title</h5> | |
<button type="button" class="close" data-dismiss="modal" aria-label="Close"> | |
<span aria-hidden="true">×</span> | |
</button> | |
</div> | |
<div class="modal-body"> | |
<div class="row"> | |
<div class="col-md-12"> | |
<div class="form-group"> | |
<input type="text" class="form-control" name="username" placeholder="username"> | |
<div class="invalid-feedback"> | |
Please provide username. | |
</div> | |
</div> | |
</div> | |
<div class="col-md-12"> | |
<div class="form-group"> | |
<input type="email" class="form-control" name="email" placeholder="email"> | |
<div class="invalid-feedback"> | |
Please provide valid email. | |
</div> | |
</div> | |
</div> | |
<div class="col-md-12"> | |
<div class="form-group"> | |
<select name="to" class="form-control"> | |
<option value="sales">Sales</option> | |
<option value="support" selected="selected">Support</option> | |
</select> | |
</div> | |
</div> | |
<div class="col-md-12"> | |
<div class="form-group"> | |
<textarea class="form-control" name="reason" rows="2" required=""></textarea> | |
<div class="invalid-feedback"> | |
Please provide feedback information. | |
</div> | |
</div> | |
</div> | |
<div class="col-md-12"> | |
<div class="form-group"> | |
<input type="file" name="attachment"> | |
<div class="invalid-feedback"> | |
Please attach file | |
</div> | |
</div> | |
</div> | |
</div> | |
</div> | |
<div class="modal-footer"> | |
<button type="button" class="btn btn-secondary" data-dismiss="modal">Close</button> | |
<button type="submit" class="btn btn-primary" name="feedback">Send Feedback</button> | |
</div> | |
</form> | |
</div> | |
</div> | |
</div> | |
<script src="https://code.jquery.com/jquery-3.3.1.slim.min.js" integrity="sha384-q8i/X+965DzO0rT7abK41JStQIAqVgRVzpbzo5smXKp4YfRvH+8abtTE1Pi6jizo" crossorigin="anonymous"></script> | |
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/js/bootstrap.min.js" integrity="sha384-ChfqqxuZUCnJSK3+MXmPNIyE6ZbWh2IMqE241rYiqJxyMiZ6OW/JmZQ5stwEULTy" crossorigin="anonymous"></script> | |
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.3/umd/popper.min.js" integrity="sha384-ZMP7rVo3mIykV+2+9J3UJ46jBk0WLaUAdn689aCwoqbBJiSnjAK/l8WvCWPIPm49" crossorigin="anonymous"></script> | |
<script> | |
(function() { | |
'use strict'; | |
window.addEventListener('load', function() { | |
var form = document.getElementById('needs-validation'); | |
form.addEventListener('submit', function(event) { | |
if (form.checkValidity() === false) { | |
event.preventDefault(); | |
event.stopPropagation(); | |
} | |
form.classList.add('was-validated'); | |
}, false); | |
}, false); | |
})(); | |
</script> | |
</body> | |
</html> |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment