Volunteer Form

Developer
Vanessa Vevoda
Size
9,492 Kb
Views
30,360
  1. Volunteer Form Previews
  2. Volunteer Form HTML Codes
  3. Volunteer Form CSS Codes

How do I make an volunteer form?

What is a volunteer form? How do you make a volunteer form? This script and codes were developed by Vanessa Vevoda on 12 September 2022, Monday.

Volunteer Form Previews
IQ Test

Volunteer Form - Script Codes HTML Codes

<!DOCTYPE html>
<html >
<head> <meta charset="UTF-8"> <title>Volunteer Form</title> <link rel='stylesheet' id='occ-bootstrap-css' href='https://vanessa.dev.samaritanspurse.org/wp-content/themes/samaritans-purse/lib/css/bootstrap.css?ver=1469041935' type='text/css' media='all' />
<link rel='stylesheet' id='gforms_reset_css-css' href='https://vanessa.dev.samaritanspurse.org/wp-content/plugins/gravityforms/css/formreset.min.css?ver=2.0.1' type='text/css' media='all' />
<link rel='stylesheet' id='gforms_formsmain_css-css' href='https://vanessa.dev.samaritanspurse.org/wp-content/plugins/gravityforms/css/formsmain.min.css?ver=2.0.1' type='text/css' media='all' />
<link rel='stylesheet' id='gforms_ready_class_css-css' href='https://vanessa.dev.samaritanspurse.org/wp-content/plugins/gravityforms/css/readyclass.min.css?ver=2.0.1' type='text/css' media='all' />
<link rel='stylesheet' id='gforms_browsers_css-css' href='https://vanessa.dev.samaritanspurse.org/wp-content/plugins/gravityforms/css/browsers.min.css?ver=2.0.1' type='text/css' media='all' />
<script type="text/javascript"> function w3tc_popupadmin_bar(url) { return window.open(url, '', 'width=800,height=600,status=no,toolbar=no,menubar=no,scrollbars=yes'); } </script> <script type='text/javascript'>
/* <![CDATA[ */
var the_ajax_script = {"ajaxurl":"\/wp-content\/plugins\/sp-shortcodes\/posts-ajax.php"};
/* ]]> */
</script>
<script type='text/javascript' src='https://vanessa.dev.samaritanspurse.org/wp-includes/js/jquery/jquery.js?ver=1.12.4'></script><script>jQueryWP = jQuery;</script>
<script type='text/javascript' src='https://vanessa.dev.samaritanspurse.org/wp-includes/js/jquery/jquery-migrate.min.js?ver=1.4.1'></script>
<script type='text/javascript' src='https://vanessa.dev.samaritanspurse.org/wp-content/themes/samaritans-purse/lib/js/bootstrap.min.js?ver=1469041935'></script>
<script type='text/javascript' src='https://vanessa.dev.samaritanspurse.org/wp-content/themes/samaritans-purse/lib/js/jquery.hammer.min.js?ver=1469041935'></script>
<script type='text/javascript' src='https://vanessa.dev.samaritanspurse.org/wp-content/themes/samaritans-purse/lib/js/occ.js?ver=1469041935'></script>
<script type='text/javascript' src='https://vanessa.dev.samaritanspurse.org/wp-content/plugins/gravityforms/js/jquery.maskedinput.min.js?ver=2.0.1'></script>
<script type='text/javascript' src='https://vanessa.dev.samaritanspurse.org/wp-content/plugins/gravityforms/js/placeholders.jquery.min.js?ver=2.0.1'></script>
<link rel='https://api.w.org/' href='https://vanessa.dev.samaritanspurse.org/wp-json/' /> <link rel="stylesheet" href="css/style.css">
</head>
<body> <main class="safari_only_main" title="Volunteer Page Build">	<header class="hero-image" alt="hero image for volunteer page">	<h4>Volunteer Year-Round</h4>	<h1>with Operation Christmas Child</h1>	</header>	<article class="safari_only_article" title="Why Volunteer?">	<section class="col safari_only_article_header">	<header>	<h3>Expression of Interest Form</h3>	</header>	</section>	<section class="col safari_only_section_col">	<p>Thank you for your desire to impact the lives of children for eternity by serving as a year-round Connect Volunteer. After completing this form, you will be contacted by a representative from your regional office.</p>
</section>	<section class="col-2 safari_only_section_col-2">
<div class='gf_browser_chrome gform_wrapper' id='gform_wrapper_53' ><form method='post' enctype='multipart/form-data' id='gform_53' action='/operation-christmas-child/volunteer-year-round-interest-form/?preview_id=54837&#038;preview_nonce=29e7a45fc5&#038;preview=true'> <div class='gform_heading'> <h3 class='gform_title'>OCC Year-Round Volunteer Interest Form</h3> <span class='gform_description'>Thank you for your desire to impact the lives of children for eternity by serving as a year-round Connect Volunteer. After completing this form, you will be contacted by a representative from your regional office.</span> </div> <div class='gform_body'>	<ul id='gform_fields_53' class='gform_fields top_label form_sublabel_below description_below'>	<li id='field_53_2' class='gfield gsection field_sublabel_below field_description_below' ><h2 class='gsection_title'>Personal Information</h2></li><li id='field_53_1' class='gfield field_sublabel_below field_description_below' ><label class='gfield_label gfield_label_before_complex' for='input_53_1_3' >Name</label><div class='ginput_complex ginput_container no_prefix has_first_name no_middle_name has_last_name no_suffix gf_name_has_2 ginput_container_name gfield_trigger_change' id='input_53_1'> <span id='input_53_1_3_container' class='name_first' > <input type='text' name='input_1.3' id='input_53_1_3' value='' aria-label='First name' tabindex='2' aria-invalid="false" /> <label for='input_53_1_3' >First</label> </span> <span id='input_53_1_6_container' class='name_last' > <input type='text' name='input_1.6' id='input_53_1_6' value='' aria-label='Last name' tabindex='4' aria-invalid="false" /> <label for='input_53_1_6' >Last</label> </span> </div></li><li id='field_53_4' class='gfield gsection field_sublabel_below field_description_below' ><h2 class='gsection_title'>Contact Information</h2></li>	<li id='field_53_5' class='gfield gfield_contains_required field_sublabel_below field_description_below'>	<label class='gfield_label gfield_label_before_complex' for='input_53_5_1'>Address<span class='gfield_required'>*</span></label> <div class='ginput_complex ginput_container has_street has_street2 has_city has_state has_zip ginput_container_address gfield_trigger_change' id='input_53_5' > <span class='ginput_full address_line_1' id='input_53_5_1_container' > <input type='text' name='input_5.1' id='input_53_5_1' value='' tabindex='6' /> <label for='input_53_5_1' id='input_53_5_1_label' >Street Address</label> </span><span class='ginput_full address_line_2' id='input_53_5_2_container' > <input type='text' name='input_5.2' id='input_53_5_2' value='' tabindex='7' /> <label for='input_53_5_2' id='input_53_5_2_label' >Address Line 2</label> </span><span class='ginput_left address_city' id='input_53_5_3_container' > <input type='text' name='input_5.3' id='input_53_5_3' value='' tabindex='8' /> <label for='input_53_5_3' id='input_53_5_3_label' >City</label> </span><span class='ginput_right address_state' id='input_53_5_4_container' > <input type='text' name='input_5.4' id='input_53_5_4' value='' tabindex='10' /> <label for='input_53_5_4' id='input_53_5_4_label' >State / Province / Region</label> </span><span class='ginput_left address_zip' id='input_53_5_5_container' > <input type='text' name='input_5.5' id='input_53_5_5' value='' tabindex='11' /> <label for='input_53_5_5' id='input_53_5_5_label' >ZIP / Postal Code</label> </span><input type='hidden' class='gform_hidden' name='input_5.6' id='input_53_5_6' value=''/> <div class='gf_clear gf_clear_complex'></div> </div></li><li id='field_53_6' class='gfield gfield_contains_required field_sublabel_below field_description_below' ><label class='gfield_label' for='input_53_6' >Email<span class='gfield_required'>*</span></label><div class='ginput_container ginput_container_email'> <input name='input_6' id='input_53_6' type='email' value='' class='medium' tabindex='12' /> </div></li><li id='field_53_7' class='gfield field_sublabel_below field_description_below' ><label class='gfield_label' for='input_53_7' >Primary Phone Number</label><div class='ginput_container ginput_container_phone'><input name='input_7' id='input_53_7' type='tel' value='' class='medium' tabindex='13' aria-invalid="false" /></div></li><li id='field_53_19' class='gfield gfield_contains_required field_sublabel_below field_description_below' ><label class='gfield_label' >Choose your OCC Region<span class='gfield_required'>*</span></label><div class='ginput_container ginput_container_radio'><ul class='gfield_radio' id='input_53_19'><li class='gchoice_53_19_0'><input name='input_19' type='radio' value='North Carolina – South Carolina' id='choice_53_19_0' tabindex='14' /><label for='choice_53_19_0' id='label_53_19_0'>North Carolina – South Carolina</label></li><li class='gchoice_53_19_1'><input name='input_19' type='radio' value='Ohio – Indiana – Michigan – West Virginia' id='choice_53_19_1' tabindex='15' /><label for='choice_53_19_1' id='label_53_19_1'>Ohio – Indiana – Michigan – West Virginia</label></li><li class='gchoice_53_19_2'><input name='input_19' type='radio' value='Florida – Puerto Rico' id='choice_53_19_2' tabindex='16' /><label for='choice_53_19_2' id='label_53_19_2'>Florida – Puerto Rico</label></li><li class='gchoice_53_19_3'><input name='input_19' type='radio' value='Kansas – Illinois – Missouri – Nebraska - Oklahoma' id='choice_53_19_3' tabindex='17' /><label for='choice_53_19_3' id='label_53_19_3'>Kansas – Illinois – Missouri – Nebraska - Oklahoma</label></li><li class='gchoice_53_19_4'><input name='input_19' type='radio' value='Tennessee – Arkansas – Kentucky' id='choice_53_19_4' tabindex='18' /><label for='choice_53_19_4' id='label_53_19_4'>Tennessee – Arkansas – Kentucky</label></li><li class='gchoice_53_19_5'><input name='input_19' type='radio' value='New York – Connecticut – Maine – Rhode Island – Massachusetts – New Hampshire – Vermont' id='choice_53_19_5' tabindex='19' /><label for='choice_53_19_5' id='label_53_19_5'>New York – Connecticut – Maine – Rhode Island – Massachusetts – New Hampshire – Vermont</label></li><li class='gchoice_53_19_6'><input name='input_19' type='radio' value='Georgia – Alabama – Mississippi' id='choice_53_19_6' tabindex='20' /><label for='choice_53_19_6' id='label_53_19_6'>Georgia – Alabama – Mississippi</label></li><li class='gchoice_53_19_7'><input name='input_19' type='radio' value='Colorado – Arizona – New Mexico – Utah - Wyoming' id='choice_53_19_7' tabindex='21' /><label for='choice_53_19_7' id='label_53_19_7'>Colorado – Arizona – New Mexico – Utah - Wyoming</label></li><li class='gchoice_53_19_8'><input name='input_19' type='radio' value='California – Hawaii – Nevada' id='choice_53_19_8' tabindex='22' /><label for='choice_53_19_8' id='label_53_19_8'>California – Hawaii – Nevada</label></li><li class='gchoice_53_19_9'><input name='input_19' type='radio' value='Texas – Louisiana' id='choice_53_19_9' tabindex='23' /><label for='choice_53_19_9' id='label_53_19_9'>Texas – Louisiana</label></li><li class='gchoice_53_19_10'><input name='input_19' type='radio' value='Maryland – Delaware – New Jersey – Pennsylvania – Virginia – Washington D.C.' id='choice_53_19_10' tabindex='24' /><label for='choice_53_19_10' id='label_53_19_10'>Maryland – Delaware – New Jersey – Pennsylvania – Virginia – Washington D.C.</label></li><li class='gchoice_53_19_11'><input name='input_19' type='radio' value='Minnesota – Iowa – N. Dakota – S. Dakota Wisconsin – Greater Chicago &amp; Northern IL' id='choice_53_19_11' tabindex='25' /><label for='choice_53_19_11' id='label_53_19_11'>Minnesota – Iowa – N. Dakota – S. Dakota Wisconsin – Greater Chicago &amp; Northern IL</label></li><li class='gchoice_53_19_12'><input name='input_19' type='radio' value='Washington – Idaho – Montana – Oregon - Alaska' id='choice_53_19_12' tabindex='26' /><label for='choice_53_19_12' id='label_53_19_12'>Washington – Idaho – Montana – Oregon - Alaska</label></li></ul></div></li><li id='field_53_8' class='gfield gsection field_sublabel_below field_description_below' ><h2 class='gsection_title'>Area of Interest</h2></li><li id='field_53_9' class='gfield field_sublabel_below field_description_below' ><label class='gfield_label' >I am interested in the following roles:</label><div class='ginput_container ginput_container_checkbox'><ul class='gfield_checkbox' id='input_53_9'><li class='gchoice_53_9_1'>	<input name='input_9.1' type='checkbox' value='Leadership Roles' id='choice_53_9_1' tabindex='27' />	<label for='choice_53_9_1' id='label_53_9_1'>Leadership Roles</label>	</li><li class='gchoice_53_9_2'>	<input name='input_9.2' type='checkbox' value='Administrative Support' id='choice_53_9_2' tabindex='28' />	<label for='choice_53_9_2' id='label_53_9_2'>Administrative Support</label>	</li><li class='gchoice_53_9_3'>	<input name='input_9.3' type='checkbox' value='Church Relations' id='choice_53_9_3' tabindex='29' />	<label for='choice_53_9_3' id='label_53_9_3'>Church Relations</label>	</li><li class='gchoice_53_9_4'>	<input name='input_9.4' type='checkbox' value='Community Relations' id='choice_53_9_4' tabindex='30' />	<label for='choice_53_9_4' id='label_53_9_4'>Community Relations</label>	</li><li class='gchoice_53_9_5'>	<input name='input_9.5' type='checkbox' value='Logistics (Drop Off Locations)' id='choice_53_9_5' tabindex='31' />	<label for='choice_53_9_5' id='label_53_9_5'>Logistics (Drop Off Locations)</label>	</li><li class='gchoice_53_9_6'>	<input name='input_9.6' type='checkbox' value='Media Relations' id='choice_53_9_6' tabindex='32' />	<label for='choice_53_9_6' id='label_53_9_6'>Media Relations</label>	</li><li class='gchoice_53_9_7'>	<input name='input_9.7' type='checkbox' value='Prayer Mobilization' id='choice_53_9_7' tabindex='33' />	<label for='choice_53_9_7' id='label_53_9_7'>Prayer Mobilization</label>	</li><li class='gchoice_53_9_8'>	<input name='input_9.8' type='checkbox' value='Student Relations' id='choice_53_9_8' tabindex='34' />	<label for='choice_53_9_8' id='label_53_9_8'>Student Relations</label>	</li></ul></div></li><li id='field_53_15' class='gfield gsection field_sublabel_below field_description_below' ><h2 class='gsection_title'>Volunteer Activity</h2></li><li id='field_53_16' class='gfield field_sublabel_below field_description_below' ><label class='gfield_label' for='input_53_16' >How did you hear about this opportunity?</label><div class='ginput_container'><textarea name='input_16' id='input_53_16' class='textarea medium' tabindex='35' aria-invalid="false" rows='10' cols='50'></textarea></div></li><li id='field_53_20' class='gfield hidden field_sublabel_below field_description_below' ><label class='gfield_label' for='input_53_20' >AreaTeam</label><div class='ginput_container ginput_container_text'><input name='input_20' id='input_53_20' type='text' value='' class='medium' tabindex='36' placeholder='AreaTeam' aria-invalid="false" /></div></li><li id='field_53_18' class='gfield hidden field_sublabel_below field_description_below' ><label class='gfield_label' >If you are serving in a Processing Center please select your location below:</label><div class='ginput_container ginput_container_radio'><ul class='gfield_radio' id='input_53_18'><li class='gchoice_53_18_0'><input name='input_18' type='radio' value='Atlanta' id='choice_53_18_0' tabindex='37' /><label for='choice_53_18_0' id='label_53_18_0'>Atlanta</label></li><li class='gchoice_53_18_1'><input name='input_18' type='radio' value='Baltimore/Washington D.C.' id='choice_53_18_1' tabindex='38' /><label for='choice_53_18_1' id='label_53_18_1'>Baltimore/Washington D.C.</label></li><li class='gchoice_53_18_2'><input name='input_18' type='radio' value='Boone' id='choice_53_18_2' tabindex='39' /><label for='choice_53_18_2' id='label_53_18_2'>Boone</label></li><li class='gchoice_53_18_3'><input name='input_18' type='radio' value='Charlotte' id='choice_53_18_3' tabindex='40' /><label for='choice_53_18_3' id='label_53_18_3'>Charlotte</label></li><li class='gchoice_53_18_4'><input name='input_18' type='radio' value='Dallas/Fort Worth' id='choice_53_18_4' tabindex='41' /><label for='choice_53_18_4' id='label_53_18_4'>Dallas/Fort Worth</label></li><li class='gchoice_53_18_5'><input name='input_18' type='radio' value='Denver' id='choice_53_18_5' tabindex='42' /><label for='choice_53_18_5' id='label_53_18_5'>Denver</label></li><li class='gchoice_53_18_6'><input name='input_18' type='radio' value='Minneapolis' id='choice_53_18_6' tabindex='43' /><label for='choice_53_18_6' id='label_53_18_6'>Minneapolis</label></li><li class='gchoice_53_18_7'><input name='input_18' type='radio' value='Southern California' id='choice_53_18_7' tabindex='44' /><label for='choice_53_18_7' id='label_53_18_7'>Southern California</label></li></ul></div></li><li id='field_53_21' class='gfield hidden field_sublabel_below field_description_below' ><label class='gfield_label' for='input_53_21' >AreaTeam</label><div class='ginput_container ginput_container_text'><input name='input_21' id='input_53_21' type='text' value='' class='medium' tabindex='45' placeholder='AreaTeam' aria-invalid="false" /></div></li> </ul></div> <div class='gform_footer top_label'> <input type='submit' id='gform_submit_button_53' class='gform_button button' value='Submit' tabindex='46' onclick='if(window["gf_submitting_53"]){return false;} if( !jQuery("#gform_53")[0].checkValidity || jQuery("#gform_53")[0].checkValidity()){window["gf_submitting_53"]=true;} ' onkeypress='if(window["gf_submitting_53"]){return false;} if( !jQuery("#gform_53")[0].checkValidity || jQuery("#gform_53")[0].checkValidity()){window["gf_submitting_53"]=true;} jQuery("#gform_53").trigger("submit",[true]);' /> <input type='hidden' class='gform_hidden' name='is_submit_53' value='1' /> <input type='hidden' class='gform_hidden' name='gform_submit' value='53' /> <input type='hidden' class='gform_hidden' name='gform_unique_id' value='' /> <input type='hidden' class='gform_hidden' name='state_53' value='WyJbXSIsIjAzOWI3NTRjN2I3YTMzNDkwNjM3YjhlM2NhYzE0MGE3Il0=' /> <input type='hidden' class='gform_hidden' name='gform_target_page_number_53' id='gform_target_page_number_53' value='0' /> <input type='hidden' class='gform_hidden' name='gform_source_page_number_53' id='gform_source_page_number_53' value='1' /> <input type='hidden' name='gform_field_values' value='' /> </div> </form> </div><script type='text/javascript'> jQuery(document).bind('gform_post_render', function(event, formId, currentPage){if(formId == 53) {if(typeof Placeholders != 'undefined'){ Placeholders.enable(); }if(!/(android)/i.test(navigator.userAgent)){jQuery('#input_53_7').mask('(999) 999-9999').bind('keypress', function(e){if(e.which == 13){jQuery(this).blur();} } );}} } );jQuery(document).bind('gform_post_conditional_logic', function(event, formId, fields, isInit){} );</script><script type='text/javascript'> jQuery(document).ready(function(){jQuery(document).trigger('gform_post_render', [53, 1]) } ); </script>	</section>	</section>
<section class="col offset-btn safari_only_header_btn">	<a href="/operation-christmas-child/volunteer-year-round"><button>	<div class="button-offset">Go Back</div>	</button></a>	</section>	</article>
</main>
</body>
</html>

Volunteer Form - Script Codes CSS Codes

@import url(//fonts.googleapis.com/css?family=Roboto:400,300,500,700,900);
@import url(https://fonts.googleapis.com/css?family=Roboto+Slab:400,300,700);
/*------------------------- Start TABULA RASA updates ---------------------------*/
#inner {	padding-top: 0;	margin-bottom: 0px!important;
}
#megaMenu {	margin-top: 10px;	z-index: 100001;
}
#content {	margin: 0;
}
.article-headline {	display: none;
}
.hentry {	padding: 0;
}
#inner,
#content-container {	max-width: 100%;
}
#subNav {	height: 50px;	background: #EBEBEB;	width: 100%;	display: none;
}
#subNavTitle {	float: left;	font-size: 18px;	margin-top: 15px;	text-transform: uppercase;	margin-left: 7px;
}
#subNavLinks {	float: left;	font-size: 16px;	margin: 4px 0 0 40px;	display: block;
}
#subNavLinks a {	color: #ffffff;	display: block;	float: left;	padding: 10px 16px;	background-color: #B7BB2F;
}
#subNavSocial {	float: right;	margin-top: 9px;	margin-right: 7px;
}
#subNavSocTitle {	position: relative;	top: 4px;	Font-size: 16px;	margin-right: 5px;
}
span.icons {	cursor: pointer;
}
span.icons a {	text-decoration: none;
}
#postTitleWrap {	display: none;
}
.entry-content {	overflow: hidden;	margin: 0;
}
.entry-content ol,
.entry-content ul {	margin: 0 auto;
}
#footerMoreArts,
div#moreArts {	display: none;
}
div.social-bar {	text-align: center;
}
body.campaign-operation-christmas-child .entry-content p, body.single-post .entry-content ul { padding-left: 0; margin-top: 0!important;
}
/*------------------ Gravity Form --------------------*/
.entry-content { margin: 0 !important; overflow: hidden; }
.form-wrapper{width:100%; padding:0px 40px; max-width:984px; margin:11% auto 40px;}
.gform_wrapper .gfield_checkbox li input, .gform_wrapper .gfield_checkbox li input[type=checkbox], .gform_wrapper .gfield_radio li input[type=radio] { font-size: 19px!important; /* height: 2rem!important; */ margin-top: .2rem!important;
}
label {	display:block;
}
div.gform_wrapper input, div.gform_wrapper select, div.gform_wrapper textarea {	margin-top:0;	font-size:31px!important;	padding:0!important;
}
div.gform_wrapper textarea {	max-width: 80%
}
.gform_body ul {	display: block; list-style: none;	text-align: left;	padding-left: 0;
}
.gfield.gsection.field_sublabel_below.field_description_below > h2.gsection_title {padding-top: 55px!important;font-size: 1.7rem; color: #ae2f28;}
.gform_wrapper{margin:0 auto!important; max-width:100% !important;}
.gform_wrapper ul.gfield_checkbox li, .gform_wrapper ul.gfield_radio li {
padding:7px!important}
.gform_wrapper .gsection .gfield_label, .gform_wrapper h2.gsection_title, .gform_wrapper h3.gform_title, .gform_wrapper h2.gsection_title {	font-weight: 400; font-size: 1.3em; text-transform: capitalize;
}
label .gform_wrapper .top_label .gfield_label, .gform_wrapper .gfield_checkbox li label, .gform_wrapper .gfield_radio li label {font-weight:400; display:inline-block;}
.gform_wrapper .top_label .gfield_label { margin: 2rem 0 .2rem; font-weight: 500; line-height: 1.3; clear: both; font-size: 1.25rem!important;
}
div.gform_wrapper .ginput_complex label { font-size: 15px; font-weight: 300; margin: 0 auto 16px 6px!important;
}
.gform_wrapper .ginput_complex .ginput_right { margin-left: 0 !important;}
.gform_wrapper.gf_browser_gecko select {padding: 14px !important;}
/* highlights the selected radio or check box item */
li[class^="gchoice_53"]:hover, li[class^="gchoice_53"]:active { background-color: yellow}
/*@media (min-width: 769px) and (max-width: 1024px) { .form-wrapper{width:100%; padding:0px 40px; max-width:984px; margin:11% auto 40px;} li[id^="gchoice_53"] input[type="checkbox"]{-webkit-appearance:checkbox;} li[id^="gchoice_53"] label{font-weight:400; font-size:13px; }
}*/
@media (min-width: 320px) and (max-width: 768px){
.form-wrapper{width:100%; padding:0px 40px; max-width:656px; margin:30px auto 60px;}
.form-leftside{width:100%; float:none; }
.form-rightside{width:100%; float:none; background-color:#fff; border-radius:5px; padding:40px; max-width:556px; margin-bottom:40px;}
.leftside-words{color:#fff; font-size:24px; line-height:32px; margin:0 0 40px; padding-right:0px; text-align:center;}
.leftside-logo{margin:40px 0px; text-align:center; display:none;}
.leftside-logo2{margin:40px 0; text-align:center; display:block;}
}
.gform_wrapper h3.gform_title:first-of-type {display:none;}
.gform_wrapper span.gform_description:first-of-type {display:none;}
.gform_wrapper .gsection { margin: 0 0 1em;}
/*------------------------- End TABULA RASA updates ---------------------------*/
body {	margin: 0;
}
main {	font-family: 'Roboto', sans-serif;	margin: 0 auto;	padding: 0 0 60px 0;	border: 0;	width: 100%;	max-width: 100%;	text-align: center;	font-weight: 300;	font-size: 1rem;	color: #444444;
-webkit-font-smoothing: antialiased;-moz-osx-font-smoothing: grayscale; background:none; font-family: 'Roboto', sans-serif;
}
main > *,
article > *,
section > * {
-webkit-box-flex: 1 0 auto; /* OLD - iOS 6-, Safari 3.1-6 */ /* OLD - Firefox 19- */ /* Chrome */ -ms-flex: 1 0 auto; /* IE 10 */ flex: 1 0 auto;
}
main,
article {
float: left; display: -webkit-box; /* OLD - iOS 6-, Safari 3.1-6 */ /* OLD - Firefox 19- (buggy but mostly works) */ display: -ms-flexbox; /* TWEENER - IE 10 */ /* NEW - Chrome */ display: flex;	-webkit-box-pack: justify; -ms-flex-pack: justify; justify-content: space-between;	-webkit-box-align: center; -ms-flex-align: center; align-items: center;	-ms-flex-line-pack: center; align-content: center;
}
main {	-ms-flex-flow: column nowrap; flex-flow: column nowrap;
}
article:nth-of-type(1) {	margin-top: 1%;
}
article {	margin-top: 6%;	-ms-flex-flow: column nowrap; flex-flow: column nowrap;	width: 98%;
}
header {	position: relative;
}
header.hero-image { width: 100%; margin: 0 auto; padding: 0; background: url("//s3.amazonaws.com/static.samaritanspurse.org/occ/images/occ-yr-round-volunteer-page/1585US-B-189-volunteer-hero-img-2.jpg") top left / cover no-repeat; text-transform: uppercase; min-height: 282px;
}
aside {	padding: 0;	margin: 0 auto;	width: 95%;
}
/******************** ELEMENT STYLES **********************/
h1,
h2,
h3,
h4,
h5,
h6 {	-webkit-margin-before: 0em;	-webkit-margin-after: 0em;
}
button {	color: #000;	padding: 0;	border: 0;	background-color: transparent;	margin: 0 auto;	text-align: center;	cursor: pointer;
}
/******************** ELEMENTS :: TEXT STYLES **********************/
h1 { font-size: 3rem; color: #fff; margin-top: 0; margin-bottom: 2%;
font-weight: 300;
-webkit-text-shadow: 0 1px 4px rgba(0,0,0,0.4);
text-shadow: 0 1px 4px rgba(0,0,0,0.4);
}
h3 {
font-weight: 900; font-size: 2.7rem; line-height: 1; color: #444; margin-top: 2%; margin-bottom: 1%; text-transform: capitalize; letter-spacing: -1px;
}
h4 { font-weight: 600; font-size: 5rem; line-height: 3rem; color: #fff; margin-top: 15%; margin-bottom: 0 0 2px 4px rgba(0,0,0,0.2); -webkit-text-shadow: 0 2px 4px rgba(0,0,0,0.2); text-shadow: 0 2px 4px rgba(0,0,0,0.2);
}
@media screen and (max-width:60em) {
h4 { font-size: 1.6rem; line-height: 1.3rem; margin-top: 19%; } h1 { font-size: 3rem; line-height: 2.2rem; letter-spacing: -2px; font-weight:300; margin-top: 10px; }
header.hero-image {background-position: center; min-height: 450px;}
}
h5 {	font-weight: 400;	font-size: 1.6rem;	color: #888;	margin-bottom: 3%;
}
h6 {	font-weight: 600;	font-size: 1.3rem;	letter-spacing: 0.1rem;	line-height: 1.25rem;	text-transform: uppercase;	color: #fff;	margin: 16% auto;	-webkit-transition: all .2s ease-in-out; transition: all .2s ease-in-out;
}
@media screen and (max-width: 60em) {	h6 {	margin: 13% auto;	}
}
@media screen and (max-width: 50em) {	h6 {	margin: 14% auto;	}
}
p {	margin: 2% auto 0!important; width: 77%; max-width: 800px;	text-align: center;	font-size: 1rem!important;	color: #666666!important;	font-family: 'Roboto', sans-serif;
}
@media screen and (max-width: 50em) {	p {	max-width: 83%	}
}
@media screen and (max-width: 40em) {	p {	max-width: 100%;	width: 100%;	line-height: 1.4rem;	margin-bottom: 2%;	text-align: left;	}
}
button {	font-weight: 600;
}
blockquote {	text-align: center;	margin: 5% auto 5%;	border: 0;
}
blockquote.volunteer-qt {	text-align: center;	margin: 5% auto 5%;	font-family: 'Roboto Slab', serif;	font-weight: 300;	border: 0;	color: #666666;
}
blockquote.volunteer-qt p.short {	font-family: 'Roboto Slab', serif;	font-style: normal;	font-weight: 300;	border: 0;	color: #666666;	width: 53%;	font-size: 2rem!important;	letter-spacing: -.017rem;	position: relative;	padding: 20px 0 0;
}
blockquote p {	font-family: 'Roboto Slab', serif;	font-style: normal;	font-weight: 300;	border: 0;	color: #666666;	font-size: 2rem;	letter-spacing: -.017rem;	position: relative;	padding: 20px 0 0;	width: 80%;
}
/*blockquote p::before {	content: " ";	background: url("//s3.amazonaws.com/static.samaritanspurse.org/occ/images/occ-yr-round-volunteer-page/Lquote.svg") no-repeat center;	position: absolute;	left: -10px;	top: -60px;	height: 100%;	width: 100px;
}
blockquote p::after {	content: " ";	background: url("//s3.amazonaws.com/static.samaritanspurse.org/occ/images/occ-yr-round-volunteer-page/Rquote.svg") no-repeat center;	position: absolute;	right: 5%;	bottom: -30px;	height: 63px;	width: 80px;
}*/
blockquote footer {	margin: 0 auto;	font-style: italic;	font-size: .825rem;	width: 50%;
}
@media screen and (max-width: 53em) {	blockquote footer,	blockquote.volunteer-qt footer {	padding: 10px;	width: 100%;	}
}
/******************** INNER CONTAINERS WITH CLASS NAMES **********************/
.col {	margin: 0 auto;	width: 100%;	text-align: center;
}
.col-1 {	margin: 0 auto;	width: 70%;	text-align: center;
}
.col-2 {	margin: 0 auto;	text-align: center;
}
@media screen and (max-width: 60em) {
.col-2 {max-width:96%;}
}
.col-3 {	margin: 0 2% 0 0;	width: 31%;
}
.inner-col-2,
.list-role-descs {	margin: 0 auto;	display: -webkit-box;	display: -ms-flexbox;	display: flex;	-ms-flex-flow: row wrap; flex-flow: row wrap;	-webkit-box-pack: center; -ms-flex-pack: center; justify-content: center;	-webkit-box-align: start; -ms-flex-align: start; align-items: flex-start;	-ms-flex-line-pack: center; align-content: center;	width: 93%;	padding: 0 0 20px;
}
@media screen and (max-width: 60em) {	.col-1 {	width: 90%;	}	.inner-col-2,	.list-role-descs {	width: 100%;	}
}
.inner-col--sq-container {	margin: 2% auto;	min-width: 30%;	height: auto;	-webkit-transition: all .4s ease-in-out; transition: all .4s ease-in-out;	overflow: hidden;	background: #000;	width: 400px;	height: 400px;	position: relative;
}
@media and (max-width: 50em) {	.inner-col--sq-container {	width: 450px;	height: 450px;	width: 60%;	}
}
/******************** INNER CONTAINERS WITH CLASS NAMES :: TEXT STYLES **********************/
ul.list-role-descs li {	list-style-type: none;
}
.list-role-descs li a {	text-decoration: none;
}
.list-role-descs li a p {	display: none;	opacity: 0;	-webkit-transition: opacity .2s ease-in-out; transition: opacity .2s ease-in-out;
}
/* Button */
section.offset-btn {	/*position: relative;*/	margin: 15px auto;
}
.button-offset {
margin: 0 5px; border: 3px solid black; background: #fff; font-size: .825rem; letter-spacing: 0rem; font-family: 'Roboto', sans-serif; font-weight: 500; text-transform: uppercase; padding: 6px 20px; max-width: 250px; text-align: center; color: #000; text-decoration: none; box-shadow: 0 2px 2px 0 rgba(0,0,0,0.3);	-webkit-transition: all .2s ease-in; transition: all .2s ease-in;
}
.button-offset:hover,
.button-offset:focus,
.button-offset:active {
background: #fff;
box-shadow: 0px 5px 8px 0 rgba(0, 0, 0, .5);
}
div.gform_wrapper .gform_footer {margin: 4% 10% 0; text-align: center;}
.gform_wrapper .gform_footer input.button, .gform_wrapper .gform_footer input[type=submit], #gform_submit_button_53 {
border: 0; margin: 6px auto; text-transform: uppercase; font-size: 1.4rem!important; letter-spacing: 0.04rem; font-family: 'Roboto', sans-serif; font-weight: 700; padding: 21px 42px!important; max-width: 320px; text-align: center; color: #fff; background: #ae2f28; box-shadow: 0 3px 3px 0 rgba(0,0,0,0.5); -webkit-transition: all .2s ease-in; transition: all .2s ease-in;
}
/******************** INNER CONTAINERS WITH CLASS NAMES :: ATTRIBUTE STATE(S) STYLES **********************/
.gform_wrapper .gform_footer input.button:hover, .gform_wrapper .gform_footer input[type=submit]:hover, #gform_submit_button_53:hover,
.gform_wrapper .gform_footer input.button:focus, .gform_wrapper .gform_footer input[type=submit]:focus, #gform_submit_button_53:focus,
.gform_wrapper .gform_footer input.button:active, .gform_wrapper .gform_footer input[type=submit]:active, #gform_submit_button_53:active {
background: #d34135; box-shadow: 0px 5px 8px 0 rgba(0, 0, 0, .5); -webkit-transition: all .2s ease-in; transition: all .2s ease-in;
font-size:110%
}
.inner-col--sq-container {	position: relative;
}
.profile-title {	color: #fff;	text-shadow: 2px 2px 0 #000, 2px 4px 0 #d34135;	position: absolute;	bottom: 10px;	left: 12%;	right: 12%;
}
.inner-col--sq-container:hover .profile-title {	display: none;
}
button:focus { outline:0 !important; }
/* --------------------------------------------- Safari ------------------------------------------------ */
/* Safari 6.1+ (non-iOS) */
@media screen and (min-color-index:0) and(-webkit-min-device-pixel-ratio:0) { @media
{ _:-webkit-full-screen, .safari_only_main { display: -webkit-box; display: flex; min-height: 100%; } _:-webkit-full-screen, .safari_only_article { flex-shrink: 0; min-height: 2971px; } _:-webkit-full-screen, .safari_only_article_header { flex-shrink: 0;
min-height: 82px;
} _:-webkit-full-screen, .safari_only_section_col { flex-shrink: 0; min-height: 97px; } _:-webkit-full-screen, .safari_only_section_col-2 { flex-shrink: 0; min-height: 2695px; vertical-align: top; }
}}
/* Safari 9.0+ (non-iOS) */
_:-webkit-full-screen:not(:root:root), .safari_only_main {	display: -webkit-box;	display: flex;	min-height: 100%;
}
_:-webkit-full-screen:not(:root:root), .safari_only_article { flex-shrink: 0; min-height: 2971px;
}
_:-webkit-full-screen:not(:root:root), .safari_only_article_header { flex-shrink: 0;
min-height: 82px;
}
_:-webkit-full-screen:not(:root:root), .safari_only_section_col { flex-shrink: 0; min-height: 97px;
}
_:-webkit-full-screen:not(:root:root), .safari_only_section_col-2 { flex-shrink: 0; min-height: 2695px; vertical-align: top;
}
Volunteer Form - Script Codes
Volunteer Form - Script Codes
Home Page Home
Developer Vanessa Vevoda
Username vanessav
Uploaded September 12, 2022
Rating 3
Size 9,492 Kb
Views 30,360
Do you need developer help for Volunteer Form?

Find the perfect freelance services for your business! Fiverr's mission is to change how the world works together. Fiverr connects businesses with freelancers offering digital services in 500+ categories. Find Developer!

Vanessa Vevoda (vanessav) Script Codes
Name
Fundraising Category Onboard Rebuild w FlexBox
Design System for OCC
9901 2016 Nov NCW Starts Now
Year-Round Packing Ideas
V1 Fundraising Category Wires
CSS Email Background Shapes
Volunteer Page Build V3
Short-Term Volunteer Page P1
My Own 3-col CSS
Volunteer Page Build P2
Create amazing sales emails with AI!

Jasper is the AI Content Generator that helps you and your team break through creative blocks to create amazing, original content 10X faster. Discover all the ways the Jasper AI Content Platform can help streamline your creative workflows. Start For Free!