Skip to content

Instantly share code, notes, and snippets.

@jonmbake

jonmbake/index.html

Last active August 29, 2015 14:03
Show Gist options
  • Star 0 You must be signed in to star a gist
  • Fork 0 You must be signed in to fork a gist
  • Save jonmbake/01ab4cc6bab455a58bad to your computer and use it in GitHub Desktop.
Save jonmbake/01ab4cc6bab455a58bad to your computer and use it in GitHub Desktop.
Download ZIP
Multiselect options
Raw
index.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta name="description" content="A contact form using the Bootstrap 3 framework.">
<meta name="author" content="">
<link rel="shortcut icon" href="../../assets/ico/favicon.png">
<title>Bootstrap 3 Contact Form</title>
<link rel="stylesheet" href="//netdna.bootstrapcdn.com/bootstrap/3.1.1/css/bootstrap.min.css" >
<link rel="stylesheet" href="assets/vender/intl-tel-input/css/intlTelInput.css">
<!-- EXTRACT ADDITIONAL STYLING HERE =======> -->
<style>
.container {
width: auto;
max-width: 800px;
}
.form-group {
margin-bottom: 8px;
}
#feedbackForm {
font-size: 12px;
}
</style>
<!-- <======= UP TO HERE -->
<!-- HTML5 shim and Respond.js IE8 support of HTML5 elements and media queries -->
<!--[if lt IE 9]>
<script src="assets/vender/bootstrap/assets/js/html5shiv.js"></script>
<script src="assets/vender/bootstrap/assets/js/respond.min.js"></script>
<![endif]-->
</head>
<body>
<!-- EXTRACT FORM HERE =======> -->
<div class="container">
<div id="contact_form" class="row">
<div class="col-12 col-sm-12 col-lg-12">
<h2>Tell Us What You Think...</h2>
<p>We appreciate any feedback about your overall experience on our site or how to make it even better. Please fill in the below form with any comments and we will get back to you.</p>
<form role="form" id="feedbackForm">
<div class="form-group has-feedback">
<label class="control-label" for="name">Name</label>
<input type="text" class="form-control input-sm" id="name" name="name" />
<span class="help-block" style="display: none;">Please enter your name.</span>
</div>
<div class="form-group">
<label class="control-label" for="title">Title</label>
<input type="text" class="form-control input-sm optional" id="title" name="title" />
</div>
<div class="form-group">
<label class="control-label" for="company">Company</label>
<input type="text" class="form-control input-sm optional" id="company" name="company" />
</div>
<!-- LOOK HERE VVVVVVVV -->
<div class="form-group">
<label class="control-label" for="opts">Options</label>
<select name="opts[]" id="opts" class="form-control" multiple>
<option value="1">Option 1</option>
<option value="2">Option 2</option>
<option value="3">Option 3</option>
</select>
<span class="help-block" style="display: none;">Please enter an option</span>
</div>
<div class="form-group">
<label class="control-label" for="website">Website</label>
<input type="url" class="form-control input-sm optional" id="website" name="website" />
</div>
<div class="form-group has-feedback">
<label class="control-label" for="phone">Phone</label>
<input type="tel" class="form-control input-sm optional" id="phone" name="phone" />
<span class="help-block" style="display: none;">Please enter a valid phone number.</span>
</div>
<div class="form-group has-feedback">
<label class="control-label" for="email">Email Address</label>
<input type="email" class="form-control input-sm" id="email" name="email" />
<span class="help-block" style="display: none;">Please enter a valid e-mail address.</span>
</div>
<div class="form-group has-feedback">
<label class="control-label" for="message">Message*</label>
<textarea rows="5" cols="30" class="form-control input-sm" id="message" name="message"></textarea>
<span class="help-block" style="display: none;">Please enter a message.</span>
</div>
<img id="captcha" src="library/vender/securimage/securimage_show.php" alt="CAPTCHA Image" />
<a href="#" onclick="document.getElementById('captcha').src = 'library/vender/securimage/securimage_show.php?' + Math.random(); return false" class="btn btn-info btn-sm">Show a Different Image</a><br/>
<div class="form-group has-feedback" style="margin-top: 10px;">
<label class="control-label" for="captcha_code">Text Within Image</label>
<input type="text" class="form-control input-sm" name="captcha_code" id="captcha_code" placeholder="For security, please enter the code displayed in the box." />
<span class="help-block" style="display: none;">Please enter the code displayed within the image.</span>
</div>
<span class="help-block" style="display: none;">Please enter a the security code.</span>
<button type="submit" id="feedbackSubmit" class="btn btn-primary btn-lg" data-loading-text="Sending..." style="display: block; margin-top: 10px;">Send Feedback</button>
</form>
<h4>* Indicates a required field.</h4>
</div><!--/span-->
</div><!--/row-->
<hr>
</div><!--/.container-->
<!-- <======= UP TO HERE -->
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script>
<script src="//netdna.bootstrapcdn.com/bootstrap/3.1.1/js/bootstrap.min.js"></script>
<script src="assets/vender/intl-tel-input/js/intlTelInput.min.js"></script>
<script src="assets/js/contact-form.js"></script>
</body>
</html>
Raw
sendmail.php
<?php
//start a session -- needed for Securimage Captcha check
session_start();
//add you e-mail address here
define("MY_EMAIL", "<<!! YOUR-EMAIL-ADDRESS-HERE !!>>");
define("EMAIL_SUBJECT", "Feedback Form Results");
//a map of fields to include in email, along with if they are required or not
//aparently in PHP, arrays (maps) can't be constants?
$fields_req = array("name" => true, "title" => false, "company" => false, "company" => false,
"website" => false, "phone" => true, "message" => true, "opts" => true);
/**
* Sets error header and json error message response.
*
* @param String $messsage error message of response
* @return void
*/
function errorResponse ($messsage) {
header('HTTP/1.1 500 Internal Server Error');
die(json_encode(array('message' => $messsage)));
}
/**
* Pulls posted values for all fields in $fields_req array.
* If a required field does not have a value, an error response is given.
*
* @param [Array] $fields_req a map of field name to required
*/
function setMessageBody ($fields_req) {
$message_body = "";
foreach ($fields_req as $name => $required) {
if ($required && empty($name)) {
errorResponse("$name is empty.");
} else {
$value = $_POST[$name];
$message_body .= ucfirst($name) . ": " . (is_array($value) ? implode(", ", $value) : $value) . "\n";
}
}
return $message_body;
}
$email = $_POST['email'];
header('Content-type: application/json');
//do some simple validation. this should have been validated on the client-side also
if (empty($email)) {
errorResponse('Email or message is empty.');
}
//do Captcha check, make sure the submitter is not a robot:)...
include_once './vender/securimage/securimage.php';
$securimage = new Securimage();
if (!$securimage->check($_POST['captcha_code'])) {
errorResponse('Invalid Security Code');
}
//try to send the message
echo json_encode(array('message' => 'Your message was successfully submitted.'));
mail(MY_EMAIL, EMAIL_SUBJECT, setMessageBody($fields_req), "From: $email");
?>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment