Свяжитесь с нами html checkbox forum

Question

У меня простой html, свяжитесь с нами с помощью Dropbox, который позволяет мне выбрать один из множества запросов и отправить его на мой адрес электронной почты, но я хочу, чтобы я мог выбрать более одного варианта, если это возможно. плохо относятся HTML и контактная PHP

в 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 
} 
?> 

Answer 1

• добавить multiple атрибут имен изменить select
• массивам как name="skills" к name="skills[]"

использования Ctrl + Выберите, чтобы выбрать несколько опций.

<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" multiple="multiple">  
      <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" multiple> 
      <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" multiple> 
      <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. Для преобразования массивов строк для обработки, используя запятую в качестве разделителя

//change $skills = $_POST['skills']; to 
$skills = implode(",", $_POST['skills']); 
//change $participate = $_POST['participate']; 
$participate = implode(",", $_POST['participate']); 
//change $interested = $_POST['interested']; 
$interested = implode(",", $_POST['interested']); 

Всегда помните, чтобы дезинфицировать ввод данных пользователем соответственно

Здесь весь test.php файлу

<?php 
if(isset($_POST['submit'])) 
{ 
    //for debugging 
    echo "<pre>"; 
    print_r($_POST); 
    echo "</pre>"; 
    $skills = implode(",", $_POST['skills']); 
    $email = $_POST['email']; 
    $name = $_POST['name']; 
    $participate = implode(",", $_POST['participate'])?:""; 
    $interested = implode(",", $_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   

    "; 
    echo $message; 
    //commented for debugging uncomment to use 
    // 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 */ 
} 
?> 
<!doctype html> 
<html> 
<head> 
<meta charset="utf-8"> 
<title>Untitled Document</title> 
</head> 

<body> 
<form name="enq" method="post" action=""> 
    <fieldset class="contact-inner"> 
     <p class="contact-input"> 
     <input type="text" id="email" value="" name="email" placeholder="Your Email..." autofocus> 
     <input type="text" id="name" value="" name="name" placeholder="Your Full Name." autofocus> 
     <input type="text" id="skype" value="" name="skype" placeholder="Your Skype Name." autofocus> 
     <input type="text" id="findus" value="" 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" multiple="multiple">  
      <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" multiple> 
      <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" multiple> 
      <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…"> </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> 
</body> 
</html>