Created
August 31, 2016 15:32
-
-
Save mkeplinger/34846248c933d65d206b81bb3a741af8 to your computer and use it in GitHub Desktop.
This file contains hidden or 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
| <form method="post" id="project-planner-form" action="/lib/project-form.php" accept-charset="UTF-8" enctype="multipart/form-data"> | |
| <div class="project_planner show"> | |
| <div class="close"></div> | |
| <div class="wrapper"> | |
| <header> | |
| <h2>Let's work together.</h2> | |
| <p>Tell us a little about your project, and we'll be in touch right away</p> | |
| </header> | |
| <div class="grid_row"> | |
| <div class="grid_2 grid_tablet_12 grid_mobile_12"> | |
| <h4>Your Details</h4> | |
| <p>Don't worry, this is for our eyes only, but we want to be able to reach out to you and chat.</p> | |
| </div> | |
| <div class="grid_9 grid_offset_1 grid_tablet_12 grid_tablet_offset_0 grid_mobile_12 grid_mobile_offset_0"> | |
| <!-- planner_form --> | |
| <div class="planner_form"> | |
| <ul class="input_list clear"> | |
| <!--<li class="error"><input id="error_name" type="text" /><label for="error_name">Name:</label><span class="error_close"> </span></li>--> | |
| <li> | |
| <input id="name" type="text" name="name" data-validation-engine="validate[required]" data-errormessage-value-missing="Hey there, this field is required ;)"> | |
| <label for="name">Name:</label> | |
| <span class="error_close"> </span> | |
| </li> | |
| <li> | |
| <input id="email" type="text" name="email" data-validation-engine="validate[required,custom[email]]" data-errormessage-value-missing="Hey there, this field is required ;)" data-errormessage-custom-error="Please input a valid email address"> | |
| <label for="email">Email address:</label> | |
| <span class="error_close"> </span> | |
| </li> | |
| <li> | |
| <input id="business" type="text" name="business" data-validation-engine="validate[required]" data-errormessage-value-missing="Hey there, this field is required ;)"> | |
| <label for="business">Business name:</label> | |
| <span class="error_close"> </span> | |
| </li> | |
| <li> | |
| <input id="website" type="text" name="website"> | |
| <label for="website">Website URL:</label> | |
| <span class="error_close"> </span> | |
| </li> | |
| <li> | |
| <input id="contact" type="text" name="contact" data-validation-engine="validate[required], custom[phone]" data-errormessage-value-missing="Hey there, this field is required ;)" data-errormessage-custom-error="Please input a valid phone number"> | |
| <label for="contact">Contact No:</label> | |
| <span class="error_close"> </span> | |
| </li> | |
| <li> | |
| <input id="location" type="text" name="location"> | |
| <label for="location">Location:</label> | |
| <span class="error_close"> </span> | |
| </li> | |
| <li> | |
| <input id="about_company" type="text" name="about_company"> | |
| <label for="about_company">Tell us a bit about your company:</label> | |
| <span class="error_close"> </span> | |
| </li> | |
| </ul> | |
| </div> | |
| <!-- /planner_form --> | |
| </div> | |
| </div> | |
| <div class="grid_row"> | |
| <div class="grid_2 grid_tablet_12 grid_mobile_12"> | |
| <h4>Your Project</h4> | |
| <p>It's okay if you are unsure, but this helps us determine if we are a good fit. Our fixed price proposals are based on the estimated number of hours for us to complete a project, so understanding your constraints allows us to propose a win-win scenario.</p> | |
| </div> | |
| <div class="grid_9 grid_offset_1 grid_tablet_12 grid_tablet_offset_0 grid_mobile_12 grid_mobile_offset_0"> | |
| <!-- planner_form --> | |
| <div class="planner_form"> | |
| <div class="pos-relative"> | |
| <input type="checkbox" id="check_item" name="project_type[]" value="hidden-value" data-validation-engine="validate[minCheckbox[1]]" data-errormessage="Hey there, this field is required ;)" class="hiding-checkbox"> | |
| </div> | |
| <p>What type of Project are you enquiring about?</p> | |
| <ul class="check_list clear"> | |
| <li> | |
| <input type="checkbox" id="check_item1" name="project_type[]" value="Packaging Design" data-validation-engine="validate[minCheckbox[1]]"> | |
| <label for="check_item1">Packaging Design</label> | |
| </li> | |
| <li> | |
| <input type="checkbox" id="check_item2" name="project_type[]" value="Graphic Design" data-validation-engine="validate[minCheckbox[1]]"> | |
| <label for="check_item2">Graphic Design</label> | |
| </li> | |
| <li> | |
| <input type="checkbox" id="check_item3" name="project_type[]" value="Branding" data-validation-engine="validate[minCheckbox[1]]"> | |
| <label for="check_item3">Branding</label> | |
| </li> | |
| <li> | |
| <input type="checkbox" id="check_item4" name="project_type[]" value="Illustration" data-validation-engine="validate[minCheckbox[1]]"> | |
| <label for="check_item4">Illustration</label> | |
| </li> | |
| <li> | |
| <input type="checkbox" id="check_item5" name="project_type[]" value="Brand Strategy" data-validation-engine="validate[minCheckbox[1]]"> | |
| <label for="check_item5">Brand Strategy</label> | |
| </li> | |
| <li> | |
| <input type="checkbox" id="check_item6" name="project_type[]" value="Digital Products" data-validation-engine="validate[minCheckbox[1]]"> | |
| <label for="check_item6">Digital Products</label> | |
| </li> | |
| <li> | |
| <input type="checkbox" id="check_item7" name="project_type[]" value="Website" data-validation-engine="validate[minCheckbox[1]]"> | |
| <label for="check_item7">Website</label> | |
| </li> | |
| <li> | |
| <input type="checkbox" id="check_item8" name="project_type[]" value="Other" data-validation-engine="validate[minCheckbox[1]]"> | |
| <label for="check_item8">Other</label> | |
| </li> | |
| </ul> | |
| <div class="pos-relative"> | |
| <input type="text" name="budget" class="hiding-checkbox" id="budget-input" data-validation-engine="validate[required]" data-errormessage-value-missing="Hey there, this field is required ;)"> | |
| </div> | |
| <p>What is your budget? <strong>$<span id="budget-value-lower">40</span> - <span id="budget-value-upper">80</span>k</strong></p> | |
| <div class="rangewrap"><div id="budgetstep" class="noUi-target noUi-ltr noUi-horizontal noUi-background"><div class="noUi-base"><div class="noUi-origin noUi-connect" style="left: 40%;"><div class="noUi-handle noUi-handle-lower"></div></div><div class="noUi-origin noUi-background" style="left: 80%;"><div class="noUi-handle noUi-handle-upper"></div></div></div><div class="noUi-pips noUi-pips-horizontal"><div class="noUi-marker noUi-marker-horizontal noUi-marker-large" style="left: 0.00000%"></div><div class="noUi-value noUi-value-horizontal noUi-value-large" style="left: 0.00000%">0</div><div class="noUi-marker noUi-marker-horizontal noUi-marker-normal" style="left: 3.33333%"></div><div class="noUi-marker noUi-marker-horizontal noUi-marker-normal" style="left: 6.66667%"></div><div class="noUi-marker noUi-marker-horizontal noUi-marker-large" style="left: 10.00000%"></div><div class="noUi-value noUi-value-horizontal noUi-value-large" style="left: 10.00000%">10</div><div class="noUi-marker noUi-marker-horizontal noUi-marker-normal" style="left: 13.33333%"></div><div class="noUi-marker noUi-marker-horizontal noUi-marker-normal" style="left: 16.66667%"></div><div class="noUi-marker noUi-marker-horizontal noUi-marker-large" style="left: 20.00000%"></div><div class="noUi-value noUi-value-horizontal noUi-value-large" style="left: 20.00000%">20</div><div class="noUi-marker noUi-marker-horizontal noUi-marker-normal" style="left: 23.33333%"></div><div class="noUi-marker noUi-marker-horizontal noUi-marker-normal" style="left: 26.66667%"></div><div class="noUi-marker noUi-marker-horizontal noUi-marker-large" style="left: 30.00000%"></div><div class="noUi-value noUi-value-horizontal noUi-value-large" style="left: 30.00000%">30</div><div class="noUi-marker noUi-marker-horizontal noUi-marker-normal" style="left: 33.33333%"></div><div class="noUi-marker noUi-marker-horizontal noUi-marker-normal" style="left: 36.66667%"></div><div class="noUi-marker noUi-marker-horizontal noUi-marker-large" style="left: 40.00000%"></div><div class="noUi-value noUi-value-horizontal noUi-value-large" style="left: 40.00000%">40</div><div class="noUi-marker noUi-marker-horizontal noUi-marker-normal" style="left: 43.33333%"></div><div class="noUi-marker noUi-marker-horizontal noUi-marker-normal" style="left: 46.66667%"></div><div class="noUi-marker noUi-marker-horizontal noUi-marker-large" style="left: 50.00000%"></div><div class="noUi-value noUi-value-horizontal noUi-value-large" style="left: 50.00000%">50</div><div class="noUi-marker noUi-marker-horizontal noUi-marker-normal" style="left: 53.33333%"></div><div class="noUi-marker noUi-marker-horizontal noUi-marker-normal" style="left: 56.66667%"></div><div class="noUi-marker noUi-marker-horizontal noUi-marker-large" style="left: 60.00000%"></div><div class="noUi-value noUi-value-horizontal noUi-value-large" style="left: 60.00000%">60</div><div class="noUi-marker noUi-marker-horizontal noUi-marker-normal" style="left: 63.33333%"></div><div class="noUi-marker noUi-marker-horizontal noUi-marker-normal" style="left: 66.66667%"></div><div class="noUi-marker noUi-marker-horizontal noUi-marker-large" style="left: 70.00000%"></div><div class="noUi-value noUi-value-horizontal noUi-value-large" style="left: 70.00000%">70</div><div class="noUi-marker noUi-marker-horizontal noUi-marker-normal" style="left: 73.33333%"></div><div class="noUi-marker noUi-marker-horizontal noUi-marker-normal" style="left: 76.66667%"></div><div class="noUi-marker noUi-marker-horizontal noUi-marker-large" style="left: 80.00000%"></div><div class="noUi-value noUi-value-horizontal noUi-value-large" style="left: 80.00000%">80</div><div class="noUi-marker noUi-marker-horizontal noUi-marker-normal" style="left: 83.33333%"></div><div class="noUi-marker noUi-marker-horizontal noUi-marker-normal" style="left: 86.66667%"></div><div class="noUi-marker noUi-marker-horizontal noUi-marker-large" style="left: 90.00000%"></div><div class="noUi-value noUi-value-horizontal noUi-value-large" style="left: 90.00000%">90</div><div class="noUi-marker noUi-marker-horizontal noUi-marker-normal" style="left: 93.33333%"></div><div class="noUi-marker noUi-marker-horizontal noUi-marker-normal" style="left: 96.66667%"></div><div class="noUi-marker noUi-marker-horizontal noUi-marker-large" style="left: 100.00000%"></div><div class="noUi-value noUi-value-horizontal noUi-value-large" style="left: 100.00000%">100</div></div></div></div> | |
| <div class="pos-relative"> | |
| <input type="text" name="timeline" class="hiding-checkbox" id="timeline-input" data-validation-engine="validate[required]" data-errormessage-value-missing="Hey there, this field is required ;)"> | |
| </div> | |
| <p>What is your timeline <strong><span id="timeline-value-lower">4</span> - <span id="timeline-value-upper">8</span> Weeks +</strong></p> | |
| <div class="rangewrap"><div id="timelinestep" class="noUi-target noUi-ltr noUi-horizontal noUi-background"><div class="noUi-base"><div class="noUi-origin noUi-connect" style="left: 40%;"><div class="noUi-handle noUi-handle-lower"></div></div><div class="noUi-origin noUi-background" style="left: 80%;"><div class="noUi-handle noUi-handle-upper"></div></div></div><div class="noUi-pips noUi-pips-horizontal"><div class="noUi-marker noUi-marker-horizontal noUi-marker-large" style="left: 0.00000%"></div><div class="noUi-value noUi-value-horizontal noUi-value-large" style="left: 0.00000%">0</div><div class="noUi-marker noUi-marker-horizontal noUi-marker-normal" style="left: 3.33333%"></div><div class="noUi-marker noUi-marker-horizontal noUi-marker-normal" style="left: 6.66667%"></div><div class="noUi-marker noUi-marker-horizontal noUi-marker-large" style="left: 10.00000%"></div><div class="noUi-value noUi-value-horizontal noUi-value-large" style="left: 10.00000%">1</div><div class="noUi-marker noUi-marker-horizontal noUi-marker-normal" style="left: 13.33333%"></div><div class="noUi-marker noUi-marker-horizontal noUi-marker-normal" style="left: 16.66667%"></div><div class="noUi-marker noUi-marker-horizontal noUi-marker-large" style="left: 20.00000%"></div><div class="noUi-value noUi-value-horizontal noUi-value-large" style="left: 20.00000%">2</div><div class="noUi-marker noUi-marker-horizontal noUi-marker-normal" style="left: 23.33333%"></div><div class="noUi-marker noUi-marker-horizontal noUi-marker-normal" style="left: 26.66667%"></div><div class="noUi-marker noUi-marker-horizontal noUi-marker-large" style="left: 30.00000%"></div><div class="noUi-value noUi-value-horizontal noUi-value-large" style="left: 30.00000%">3</div><div class="noUi-marker noUi-marker-horizontal noUi-marker-normal" style="left: 33.33333%"></div><div class="noUi-marker noUi-marker-horizontal noUi-marker-normal" style="left: 36.66667%"></div><div class="noUi-marker noUi-marker-horizontal noUi-marker-large" style="left: 40.00000%"></div><div class="noUi-value noUi-value-horizontal noUi-value-large" style="left: 40.00000%">4</div><div class="noUi-marker noUi-marker-horizontal noUi-marker-normal" style="left: 43.33333%"></div><div class="noUi-marker noUi-marker-horizontal noUi-marker-normal" style="left: 46.66667%"></div><div class="noUi-marker noUi-marker-horizontal noUi-marker-large" style="left: 50.00000%"></div><div class="noUi-value noUi-value-horizontal noUi-value-large" style="left: 50.00000%">5</div><div class="noUi-marker noUi-marker-horizontal noUi-marker-normal" style="left: 53.33333%"></div><div class="noUi-marker noUi-marker-horizontal noUi-marker-normal" style="left: 56.66667%"></div><div class="noUi-marker noUi-marker-horizontal noUi-marker-large" style="left: 60.00000%"></div><div class="noUi-value noUi-value-horizontal noUi-value-large" style="left: 60.00000%">6</div><div class="noUi-marker noUi-marker-horizontal noUi-marker-normal" style="left: 63.33333%"></div><div class="noUi-marker noUi-marker-horizontal noUi-marker-normal" style="left: 66.66667%"></div><div class="noUi-marker noUi-marker-horizontal noUi-marker-large" style="left: 70.00000%"></div><div class="noUi-value noUi-value-horizontal noUi-value-large" style="left: 70.00000%">7</div><div class="noUi-marker noUi-marker-horizontal noUi-marker-normal" style="left: 73.33333%"></div><div class="noUi-marker noUi-marker-horizontal noUi-marker-normal" style="left: 76.66667%"></div><div class="noUi-marker noUi-marker-horizontal noUi-marker-large" style="left: 80.00000%"></div><div class="noUi-value noUi-value-horizontal noUi-value-large" style="left: 80.00000%">8</div><div class="noUi-marker noUi-marker-horizontal noUi-marker-normal" style="left: 83.33333%"></div><div class="noUi-marker noUi-marker-horizontal noUi-marker-normal" style="left: 86.66667%"></div><div class="noUi-marker noUi-marker-horizontal noUi-marker-large" style="left: 90.00000%"></div><div class="noUi-value noUi-value-horizontal noUi-value-large" style="left: 90.00000%">9</div><div class="noUi-marker noUi-marker-horizontal noUi-marker-normal" style="left: 93.33333%"></div><div class="noUi-marker noUi-marker-horizontal noUi-marker-normal" style="left: 96.66667%"></div><div class="noUi-marker noUi-marker-horizontal noUi-marker-large" style="left: 100.00000%"></div><div class="noUi-value noUi-value-horizontal noUi-value-large" style="left: 100.00000%">10</div></div></div></div> | |
| <textarea name="project_sumary">Tell us a bit about your Project:</textarea> | |
| </div> | |
| <!-- /planner_form --> | |
| </div> | |
| </div> | |
| <div class="grid_row"> | |
| <div class="grid_2 grid_tablet_12 grid_mobile_12"> | |
| <h4>Upload files</h4> | |
| <p>Drag, drop, or click. Any files you have that might help us understand your project are welcome and encouraged.</p> | |
| </div> | |
| <div class="grid_9 grid_offset_1 grid_tablet_12 grid_tablet_offset_0 grid_mobile_12 grid_mobile_offset_0"> | |
| <!-- planner_form --> | |
| <div class="planner_form"> | |
| <p>Got a Project brief or any additional files you would like to send?</p> | |
| <div class="dropzone dz-clickable" id="my-awesome-dropzone"><div class="dz-default dz-message"><span>Drag and drop files here, or click to upload</span></div></div> | |
| <div id="files"></div> | |
| <div class="submit"> | |
| <div class="btn-animation-container hidden" id="success-btn"> | |
| <div class="box"> | |
| <div class="border one"></div> | |
| <div class="border two"></div> | |
| <div class="border three"></div> | |
| <div class="border four"></div> | |
| <div class="line one"></div> | |
| <div class="line two"></div> | |
| <div class="line three"></div> | |
| </div> | |
| </div> | |
| <input type="submit" value="Submit Form" class="button button_red" id="submit-button"> | |
| <br> <span id="sending">Prepare for a quick response!</span> | |
| </div> | |
| </div> | |
| <!-- /planner_form --> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| </form> |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment