I have a simple html contact us with a dropbox which allows me to select 1 of the many sellections and it sends to my email but i want it so i can select more than 1 option if possible. ill include html and the contact us php
the csss
html, body, div, span, applet, object, iframe,
h1, h2, h3, h4, h5, h6, p, blockquote, pre,
a, abbr, acronym, address, big, cite, code,
del, dfn, em, img, ins, kbd, q, s, samp,
small, strike, strong, sub, sup, tt, var,
b, u, i, center,
dl, dt, dd, ol, ul, li,
fieldset, form, label, legend,
table, caption, tbody, tfoot, thead, tr, th, td,
article, aside, canvas, details, embed,
figure, figcaption, footer, header, hgroup,
menu, nav, output, ruby, section, summary,
time, mark, audio, video {
margin: 0;
padding: 0;
border: 0;
font-size: 100%;
font: inherit;
vertical-align: baseline;
}
article, aside, details, figcaption, figure,
footer, header, hgroup, menu, nav, section {
display: block;
}
body {
line-height: 1;
}
ol, ul {
list-style: none;
}
blockquote, q {
quotes: none;
}
blockquote:before, blockquote:after,
q:before, q:after {
content: '';
content: none;
}
table {
border-collapse: collapse;
border-spacing: 0;
}
#skills {
color:F0F8FF;
}
.about {
margin: 70px auto 40px;
padding: 8px;
width: 260px;
font: 10px/18px 'Lucida Grande', Arial, sans-serif;
color: #bbb;
text-align: center;
text-shadow: 0 -1px rgba(0, 0, 0, 0.3);
background: #383838;
background: rgba(34, 34, 34, 0.8);
border-radius: 4px;
background-image: -webkit-linear-gradient(top, rgba(0, 0, 0, 0), rgba(0, 0, 0, 0.3));
background-image: -moz-linear-gradient(top, rgba(0, 0, 0, 0), rgba(0, 0, 0, 0.3));
background-image: -o-linear-gradient(top, rgba(0, 0, 0, 0), rgba(0, 0, 0, 0.3));
background-image: linear-gradient(to bottom, rgba(0, 0, 0, 0), rgba(0, 0, 0, 0.3));
-webkit-box-shadow: inset 0 0 0 1px rgba(0, 0, 0, 0.2), 0 0 6px rgba(0, 0, 0, 0.4);
box-shadow: inset 0 0 0 1px rgba(0, 0, 0, 0.2), 0 0 6px rgba(0, 0, 0, 0.4);
}
.about a {
color: #eee;
text-decoration: none;
border-radius: 2px;
-webkit-transition: background 0.1s;
-moz-transition: background 0.1s;
-o-transition: background 0.1s;
transition: background 0.1s;
}
.about a:hover {
text-decoration: none;
background: #555;
background: rgba(255, 255, 255, 0.15);
}
.about-links {
height: 30px;
}
.about-links > a {
float: left;
width: 50%;
line-height: 30px;
font-size: 12px;
}
.about-author {
margin-top: 5px;
}
.about-author > a {
padding: 1px 3px;
margin: 0 -1px;
}
/*
* Copyright (c) 2013 Thibaut Courouble
* http://www.cssflow.com
*
* Licensed under the MIT License:
* http://www.opensource.org/licenses/mit-license.php
*/
::-moz-focus-inner {
padding: 0;
border: 0;
}
:-moz-placeholder {
color: #879fa6 !important;
}
::-webkit-input-placeholder {
color: #879fa6;
}
:-ms-input-placeholder {
color: #879fa6 !important;
}
body {
font: 12px/20px 'Lucida Grande', Verdana, sans-serif;
color: #404040;
background: #e4ecef;
}
input, textarea, select, label {
font-family: inherit;
font-size: 12px;
-webkit-box-sizing: border-box;
-moz-box-sizing: border-box;
box-sizing: border-box;
}
.contact {
position: relative;
margin: 50px auto;
padding: 5px;
width: 320px;
background: #eef5f7;
border: 1px solid #cfd5da;
border-bottom-color: #ccd1d6;
border-radius: 3px;
-webkit-box-shadow: 0 1px 1px rgba(0, 0, 0, 0.05);
box-shadow: 0 1px 1px rgba(0, 0, 0, 0.05);
}
.contact-inner {
padding: 25px;
background: white;
border-radius: 2px;
}
.contact:before, .contact:after, .contact-inner:before, .contact-inner:after {
content: '';
position: absolute;
top: 100%;
left: 50%;
margin-left: -6px;
width: 1px;
height: 1px;
border: outset transparent;
border-width: 12px 14px 0;
border-top-style: solid;
-webkit-transform: rotate(360deg);
}
.contact:before {
margin-top: 1px;
border-top-color: #d8e1e6;
}
.contact-inner:before {
border-top-color: #ccd1d6;
}
.contact-inner:after {
margin-top: -1px;
border-top-color: #eef5f7;
}
.contact:after {
margin-top: -8px;
border-top-color: white;
}
.contact-input {
overflow: hidden;
margin-bottom: 30px;
padding: 5px;
background: #eef7f9;
border-radius: %px;
}
.contact-input > input, .contact-input > textarea {
display: block;
width: 100%;
height: 29px;
padding: 0 9px;
color: #4d5a5e;
background: white;
border: 1px solid #cfdfe3;
border-bottom-color: #d2e2e7;
border-radius: 2px;
-webkit-box-shadow: inset 0 1px 2px rgba(0, 0, 0, 0.05), 0 1px rgba(255, 255, 255, 0.2);
box-shadow: inset 0 1px 2px rgba(0, 0, 0, 0.05), 0 1px rgba(255, 255, 255, 0.2);
}
.contact-input > input:focus, .contact-input > textarea:focus {
border-color: #93c2ec;
outline: 0;
-webkit-box-shadow: 0 0 0 8px #e1ecf5;
box-shadow: 0 0 0 8px #e1ecf5;
}
.lt-ie9 .contact-input > input, .lt-ie9 .contact-input > textarea {
line-height: 27px;
}
.contact-input > textarea {
padding: 4px 8px;
height: 90px;
line-height: 20px;
resize: none;
}
#email {
color:purple; /*target element with id email and set text color to blue*/
}
#name {
color: purple; /*target element with id name and set text color to red*/
}
#skype {
color: purple; /*target element with id skype and set text color to green*/
}
#skills {
color: purple; /*target element with id why and set text color to orange. in this case, its a select, so all the text within the select - meaning the options text- is orange*/
}
#participate {
color: purple; /*target elements with class yellow (options) inside element id participate (select) and set text color to yellow. in this case, you can select which options to make yellow by adding classes*/
}
#interested {
color: purple; /*target elements with class yellow (options) inside element id participate (select) and set text color to yellow. in this case, you can select which options to make yellow by adding classes*/
}
#message {
color: purple; /*target element with id message and set text color to purple*/
}
#findus {
color: purple; /*target element with id message and set text color to purple*/
}
.select {
display: block;
position: relative;
overflow: hidden;
background: white;
border: 1px solid #d2e2e7;
border-bottom-color: #c5d4d9;
border-radius: 2px;
background-image: -webkit-linear-gradient(top, #fcfdff, #f2f7f7);
background-image: -moz-linear-gradient(top, #fcfdff, #f2f7f7);
background-image: -o-linear-gradient(top, #fcfdff, #f2f7f7);
background-image: linear-gradient(to bottom, #fcfdff, #f2f7f7);
-webkit-box-shadow: 0 1px 2px rgba(0, 0, 0, 0.06);
box-shadow: 0 1px 2px rgba(0, 0, 0, 0.06);
}
.select:before, .select:after {
content: '';
position: absolute;
right: 11px;
width: 0;
height: 0;
border-left: 3px outset transparent;
border-right: 3px outset transparent;
}
.select:before {
top: 10px;
border-bottom: 3px solid #7f9298;
}
.select:after {
top: 16px;
border-top: 3px solid #7f9298;
}
.select > select {
position: relative;
z-index: 2;
width: 112%;
height: 29px;
line-height: 17px;
padding: 5px 9px;
padding-right: 0;
color: #80989f;
background: transparent;
background: rgba(0, 0, 0, 0);
border: 0;
-webkit-appearance: none;
}
.select > select:focus {
color: #4d5a5e;
outline: 0;
}
.contact-submit {
text-align: right;
}
.contact-submit > input {
display: inline-block;
vertical-align: top;
padding: 0 14px;
height: 29px;
font-weight: bold;
color: #729fb2;
text-shadow: 0 1px rgba(255, 255, 255, 0.5);
background: #deeef4;
border: 1px solid #bed6e3;
border-bottom-color: #accbd9;
border-radius: 15px;
cursor: pointer;
background-image: -webkit-linear-gradient(top, #e6f2f7, #d0e6ee);
background-image: -moz-linear-gradient(top, #e6f2f7, #d0e6ee);
background-image: -o-linear-gradient(top, #e6f2f7, #d0e6ee);
background-image: linear-gradient(to bottom, #e6f2f7, #d0e6ee);
-webkit-box-shadow: inset 0 1px rgba(255, 255, 255, 0.2), 0 1px 1px rgba(0, 0, 0, 0.06), 0 0 0 4px #eef7f9;
box-shadow: inset 0 1px rgba(255, 255, 255, 0.2), 0 1px 1px rgba(0, 0, 0, 0.06), 0 0 0 4px #eef7f9;
}
.contact-submit > input:active {
color: #6a95a9;
text-shadow: 0 1px rgba(255, 255, 255, 0.3);
background: #c9dfe9;
border-color: #a3bed0 #b5ccda #b5ccda;
-webkit-box-shadow: inset 0 1px 3px rgba(0, 0, 0, 0.1), 0 1px rgba(255, 255, 255, 0.2), 0 0 0 4px #eef7f9;
box-shadow: inset 0 1px 3px rgba(0, 0, 0, 0.1), 0 1px rgba(255, 255, 255, 0.2), 0 0 0 4px #eef7f9;
}
<form name="enq" method="post" action="email/" onsubmit="return validation();">
<fieldset class="contact-inner">
<p class="contact-input">
<input type="text" id="email" value="Your Email.." name="email" placeholder="Your Email..." autofocus>
<input type="text" id="name" value="Your Full Name" name="name" placeholder="Your Full Name." autofocus>
<input type="text" id="skype" value="Your Skype Name" name="skype" placeholder="Your Skype Name." autofocus>
<input type="text" id="findus" value="How Did You Find Us" name="findus" placeholder="How did you find us." autofocus>
</p>
<div id="skills">
<p class="contact-input">
<label for="select" class="select">
<select name="skills" id="skills">
<option value="" selected>Skills</option>
<option value="3D Printing">3D Printing</option>
<option value="Alternative Healers">Alternative Healers</option>
<option value="Aquaponics/Hydroponics">Aquaponics/Hydroponics</option>
<option value="Architecture/Design">Architecture/Design</option>
<option value="Cabinetry / Carpentry">Cabinetry / Carpentry</option>
<option value="Construction">Construction</option>
<option value="Culinary Arts">Culinary Arts</option>
<option value="Electrician">Electrician</option>
<option value="EM Technology">EM Technology</option>
<option value="Free Energy/QEG">Free Energy/QEG</option>
<option value="Hair and/or Nail Stylist">Hair and/or Nail Stylist</option>
<option value="Hemp Farming">Hemp Farming</option>
<option value="Hempcrete">Hempcrete</option>
<option value="Kundalini8 Practitioner">Kundalini8 Practitioner</option>
<option value="Landscaping">Landscaping</option>
<option value="Massage Therapist">Massage Therapist</option>
<option value="Qi Gong Practitioners">Qi Gong Practitioners</option>
<option value="Permaculture">Permaculture</option>
<option value="Recycling">Recycling</option>
<option value="Sewing">Sewing</option>
<option value="Tai Chi Practitioner">Tai Chi Practitioner</option>
<option value="Technology">Technology</option>
<option value="Other">Other</option>
<option value="All">All</option>
<option value="None">None</option>
</select>
<label for="select" class="select">
<select name="participate" id="participate">
<option value="" selected>When can you participate?</option>
<option value="3-6 months from now">3-6 months from now</option>
<option class="purple" value="6-12 months">6-12 months</option>
<option value="Next Year (2016)">Next Year (2016)</option>
<option class="purple" value="Community Crowd Funding">Community Crowd Funding</option>
</select>
</select>
<label for="select" class="select">
<select name="interested" id="interested">
<option value="" selected>I'm interested in</option>
<option value="Include me on Visionary Circle">Include me on Visionary Circle</option>
<option class="purple" value="Can Travel">Can Travel</option>
<option value="Benefactor">Benefactor</option>
<option class="purple" value="Community Crowd Funding">Community Crowd Funding</option>
<option value="Financial Contributor">Financial Contributor</option>
<option value="Have a similar project">Have a similar project</option>
<option value="Special Interest">Special Interest</option>
<option value="Skilled">Skilled</option>
<option value="Skype Chat">Skype Chat</option>
<option value="All">All</option>
<option value="None">None</option>
</select>
</label>
</p>
<p class="contact-input">
<textarea rows="11" name="message" id="message" placeholder="Your Message…">Your Message…</textarea>
</p>
<p class="contact-submit">
<input type="submit" value="Send Your Message" name="submit" id="submitButton" class="btn btn-info pull-right" title="Click here to submit your message!" />
</p>
</fieldset>
</form>
<?php
if(isset($_POST['submit']))
{
$skills = $_POST['skills'];
$email = $_POST['email'];
$name = $_POST['name'];
$participate = $_POST['participate'];
$interested = $_POST['interested'];
$skype = $_POST['skype'];
$findus = $_POST['findus'];
$query = $_POST['message'];
$email_from = $name.'<'.$email.'>';
$to="";
$subject="Contact Form PurpleParadise!";
$headers = 'MIME-Version: 1.0' . "\r\n";
$headers .= 'Content-type: text/html; charset=iso-8859-1' . "\r\n";
$headers .= "From: ".$email_from."\r\n";
$message="
skills:
$skills
<br>
Email-Id:
$email
<br>
name:
$name
<br>
participate:
$participate
<br>
interested:
$interested
<br>
findus:
$findus
<br>
Message:
$query
";
if(mail($to,$subject,$message,$headers))
header("Location:../contact-us.html?msg=Successful Submission! Thankyou for contacting us.");
else
header("Location:../contact-us.html?msg=Error To send Email !");
//contact:-your-email@your-domain.com
}
?>
