Responsive Availability Forms

Service Switcher

Change the service type if you use more than one service and would like a custom form which goes against your totals for a second or third service (i.e. photobooth, etc)

Service Type

Manually add to any form

Responsive Availability Date Box

To use this form copy and paste the code on the left (or below) to your website. Colors and fonts can be changed globally on the Client Login Options page. Make sure to save even if you did not make any changes.

<div style="display:flex;justify-content:center;width:100%">
<!-- Form begins below (add the DIV above to center form on page) -->

<form action="https://www.gigbuilder.com/cal/nj/reyesproduction.nsf/checkdates" method="post" class="gbForm" name="checkDate">

<h3>CHECK AVAILABILITY</h3><p>You can immediately determine if we are available.  Simply provide your event date and press Submit.</p>

<div class="grp">

        <input type="date" required class="button" id="startDate" name="startDate">

        <input type="submit" class="button" id="submit" value="SUBMIT">

        <input type="hidden" name="service" class="gbService" type="text" value="0"/>

</div></form>

<!-- If you added the center div then append the following div otherwise remove the following line-->

</div>

<!-- You may place this below the form as-is OR copy to your page HEAD section -->

<style>

.gbForm {font-family: Arial;color: #000000;min-width: 330px;text-align:center;background-color:#ffffff;padding:10px;border-radius: 5px}

.gbForm h3 {font-size:1.7em;letter-spacing:3px;font-weight:bold;margin-top:0px}

.gbForm p {font-size:1.1em;letter-spacing: 1px;line-height: 1.2em;margin: -2px 0 26px}

.gbForm .grp {display: flex;align-items: center}

.gbForm .button {width: 75%;height:36px;font-size:24px;font-family:Arial;border:none;background: #ffffff;color: #000000;text-indent: 5%;border-radius: 5px 0 0 5px}

#submit {width: 25%;background: #e86c8d;font-weight: bold;font-size:18px;color:#ffffff;border-radius: 0 5px 5px 0;cursor: pointer}

#submit:hover {background: #d45d7d}

</style>

<!-- Form complete -->

Month/Day/Year Responsive Form

To use this form copy and paste the code on the left (or below) to your website. Colors and fonts can be changed globally on the Client Login Options page. Make sure to save even if you did not make any changes.

<div style="max-width:700px;margin:0 auto">

  <form class="gbt" method="post" action="https://www.gigbuilder.com/cal/nj/reyesproduction.nsf/checkdates" name="checkDate">

  <h3>Check Availability</h3><p style="font-size:1.2em">You can immediately determine if we are available.  Simply provide your event date and press the button.</p>

    <div class="row"><div class="col-25"><label for="Month">Month</label></div>

      <div class="col-75">

       <select name="Month">

	<option value="-">Select Month</option>

	<option value="1">01 - January</option>

	<option value="2">02 - February</option>

	<option value="3">03 - March</option>

	<option value="4">04 - April</option>

	<option value="5">05 - May</option>

	<option value="6">06 - June</option>

	<option value="7">07 - July</option>

	<option value="8">08 - August</option>

	<option value="9">09 - September</option>

	<option value="10">10 - October</option>

	<option value="11">11 - November</option>

	<option value="12">12 - December</option>

      </select></div></div>

 <div class="row">

<div class="col-25"><label for="Day">Day</label></div>

      <div class="col-75">

        	<select name="Day">

	<option value="-">Select Day</option>

	<option value="1">01</option>

	<option value="2">02</option>

	<option value="3"> 03</option>

	<option value="4"> 04</option>

	<option value="5"> 05</option>

	<option value="6"> 06</option>

	<option value="7"> 07</option>

	<option value="8"> 08</option>

	<option value="9"> 09</option>

	<option value="10">10</option>

	<option value="11">11</option>

	<option value="12">12</option>

	<option value="13">13</option>

	<option value="14">14</option>

	<option value="15">15</option>

	<option value="16">16</option>

	<option value="17">17</option>

	<option value="18">18</option>

	<option value="19">19</option>

	<option value="20">20</option>

	<option value="21">21</option>

	<option value="22">22</option>

	<option value="23">23</option>

	<option value="24">24</option>

	<option value="25">25</option>

	<option value="26">26</option>

	<option value="27">27</option>

	<option value="28">28</option>

	<option value="29">29</option>

	<option value="30">30</option>

	<option value="31">31</option>

	</select></div></div>

 <div class="row"><div class="col-25"><label for="Year">Year</label></div>

 <div class="col-75"><select id="gbY" name="Year"></select></div></div>

 <div class="row"><input type="submit" value="Submit"></div>

<input type="hidden" name="service" class="gbService" type="text" value="0"/>

<script>var x = new Date().getFullYear();for(var i=0;i<5;i++){var o = document.createElement("OPTION");o.text = i+x;o.value = i+x;document.getElementById('gbY').options.add(o)}</script>

  </form>

</div>

<style>

.gbt * {box-sizing: border-box;font-size:1.1em}

.gbt h3{padding:0px;margin:1px;font-size:2em;font-family:inherit}

.gbt {border-radius: 5px;background-color:#ffffff;padding: 20px;color:#000000;font-family:Arial}

.gbt input[type=text], select, textarea {font-family:Arial;background-color:#ffffff;color:#000000;width: 100%;padding: 10px;border: 1px solid #ccc;border-radius: 4px;resize: vertical}

.gbt label {padding:12px;display: inline-block}

.gbt input[type=submit] {font-family:Arial;background-color: #e86c8d;color:#ffffff;padding: 12px 20px;margin-top:10px;border: none;border-radius: 4px;cursor: pointer;float: right}

.gbt input[type=submit]:hover {background-color: #45a049}

.gbt .col-25 {float: left;width: 25%;margin-top: 6px}

.gbt .col-75 {float: left;width: 75%;margin-top: 6px}

.gbt .row:after {content: "";display: table;clear: both}

@media screen and (max-width: 600px) {.gbt label{padding:0px} .gbt .col-25, .gbt .col-75 {width: 100%;margin-top: 0}.gbt input[type=submit]{width:100%}}

</style>

Month/Day/Year Silver Form

To use this form copy and paste the code on the left (or below) to your website. Fonts inherit your website's font. Button Colors can be changed globally on the Client Login Options page. Make sure to save even if you did not make any changes.

<div class="gbf2">

 <form method="post" action="https://www.gigbuilder.com/cal/nj/reyesproduction.nsf/checkdates">

  <h3>Check Availability</h3>

  <p>Provide your event date and instantly determine our availability!</p>

<select id="Month" name="Month">

 	<option value="0">Month</option>

	<option value="1">01 - Jan</option>

	<option value="2">02 - Feb</option>

	<option value="3">03 - Mar</option>

	<option value="4">04 - Apr</option>

	<option value="5">05 - May</option>

	<option value="6">06 - Jun</option>

	<option value="7">07 - Jul</option>

	<option value="8">08 - Aug</option>

	<option value="9">09 - Sep</option>

	<option value="10">10 - Oct</option>

	<option value="11">11 - Nov</option>

	<option value="12">12 - Dec</option>

  </select>

 <select id="Day" name="Day">

 	<option value="-">Day</option>

	<option value="1">01</option>

	<option value="2">02</option>

	<option value="3"> 03</option>

	<option value="4"> 04</option>

	<option value="5"> 05</option>

	<option value="6"> 06</option>

	<option value="7"> 07</option>

	<option value="8"> 08</option>

	<option value="9"> 09</option>

	<option value="10">10</option>

	<option value="11">11</option>

	<option value="12">12</option>

	<option value="13">13</option>

	<option value="14">14</option>

	<option value="15">15</option>

	<option value="16">16</option>

	<option value="17">17</option>

	<option value="18">18</option>

	<option value="19">19</option>

	<option value="20">20</option>

	<option value="21">21</option>

	<option value="22">22</option>

	<option value="23">23</option>

	<option value="24">24</option>

	<option value="25">25</option>

	<option value="26">26</option>

	<option value="27">27</option>

	<option value="28">28</option>

	<option value="29">29</option>

	<option value="30">30</option>

	<option value="31">31</option>

  </select>

  <select id="gbf2Y" name="Year">

  <option value="-">Year</option>

  </select>

<input type="submit" id="login" value="Check Availability"/> 

<input type="hidden" name="service" class="gbService" type="text" value="0"/>

<script>var x = new Date().getFullYear();for(var i=0;i<5;i++){var o = document.createElement("OPTION");o.text = i+x;o.value = i+x;document.getElementById('gbf2Y').options.add(o)}</script>

</form>

</div>

<!-- style can go below the form, at the bottom of your page, or in the <head> section -->

<style>

.gbf2 {max-width: 500px;min-width: 400px;margin: 12px auto}

.gbf2 form {background-color:rgba(172,172,172,0.3);border:solid 1px rgba(0,0,0,.2);border-radius:10px;box-shadow: 0 1px 12px rgba(0,0,0,.5);text-align:center;padding: 10px 30px 20px}

.gbf2 select{font-size:1.2em;width:30%;margin-left:10px;padding:10px}

.gbf2 h3{margin:0}

.gbf2 p{padding:5px}

 .gbf2 input[type="submit"]#login {width: 100%;font-size:1.4em;background-color:#e86c8d;color:#ffffff;border:0px;padding:10px;margin-top: 20px;text-align: center}

</style>

Month/Day/Year Fixed Form

To use this form copy and paste the code on the left (or below) to your website. Colors and fonts can be changed globally on the Client Login Options page. Make sure to save even if you did not make any changes.

<form class="gbC1" method="post" action="https://www.gigbuilder.com/cal/nj/reyesproduction.nsf/checkdates" name="checkDate">       

      <h3>Check Your Date</h3>

      <p>Simply provide your event date and we'll instantly let you know if we are available.</p>

       <select class="form-control" name="Month">

	<option value="-">Select Month</option>

	<option value="1">01 - January</option>

	<option value="2">02 - February</option>

	<option value="3">03 - March</option>

	<option value="4">04 - April</option>

	<option value="5">05 - May</option>

	<option value="6">06 - June</option>

	<option value="7">07 - July</option>

	<option value="8">08 - August</option>

	<option value="9">09 - September</option>

	<option value="10">10 - October</option>

	<option value="11">11 - November</option>

	<option value="12">12 - December</option>

      </select>

        	<select class="form-control" name="Day">

	<option value="-">Select Day</option>

	<option value="1">01</option>

	<option value="2">02</option>

	<option value="3"> 03</option>

	<option value="4"> 04</option>

	<option value="5"> 05</option>

	<option value="6"> 06</option>

	<option value="7"> 07</option>

	<option value="8"> 08</option>

	<option value="9"> 09</option>

	<option value="10">10</option>

	<option value="11">11</option>

	<option value="12">12</option>

	<option value="13">13</option>

	<option value="14">14</option>

	<option value="15">15</option>

	<option value="16">16</option>

	<option value="17">17</option>

	<option value="18">18</option>

	<option value="19">19</option>

	<option value="20">20</option>

	<option value="21">21</option>

	<option value="22">22</option>

	<option value="23">23</option>

	<option value="24">24</option>

	<option value="25">25</option>

	<option value="26">26</option>

	<option value="27">27</option>

	<option value="28">28</option>

	<option value="29">29</option>

	<option value="30">30</option>

	<option value="31">31</option>

	</select>

     <select id="gY1" class="form-control" name="Year"></select>

     <button class="button" type="submit">Check Availability</button>  

<input type="hidden" name="service" class="gbService" type="text" value="0"/>

<script>var x = new Date().getFullYear();for(var i=0;i<5;i++){var o = document.createElement("OPTION");o.text = i+x;o.value = i+x;document.getElementById('gY1').options.add(o)}</script> 

    </form>

<!-- styles can be pasted directly below the form, at the bottom of your page, or in the <head> section -->

<style>

.gbC1 {max-width: 350px;padding: 15px;margin: 0 auto;color:#000000;font-family:Arial;background-color:#ffffff;border: 1px solid #bbbbbb;border-radius:10px}

.gbC1 h3 {margin-top:0px;margin-bottom:0px;font-size:2em;text-align:center}

.gbC1 .form-control {font-size: 1.2em;height: auto;padding: 10px}

.gbC1 select {color:#000000;background-color:#ffffff;margin-bottom:10px;font-family:Arial}

.gbC1 p{text-align:center;font-size:1em}

.gbC1 .button {background-color: #e86c8d; font-family:Arial;border: none;color: #ffffff;margin-top:20px;padding: 10px 32px;text-align: center;width:100%;font-size: 16px}

</style>

Gigbuilder Alerts

Gigbuilder Notepad

Gigbuilder Calculator

Picklist

Check Availability WidgetsResponsive HTML forms for your website

CHECK AVAILABILITY

Check Availability

Check Availability

Check Your Date