Website Integration Resource Page
Welcome to Your DJEP Website Integration Resource Page!
We’ve created this page specifically for you and/or your website designer to review and test your DJ Event Planner (DJEP) integration codes before implementing them on your site. Here, you’ll find detailed steps, tips, and examples of how these tools can be used effectively. While the examples showcase how I’ve integrated them into my own DJ business website, they are simply meant to inspire and guide you—your approach can and should reflect your unique brand and goals.
Please note: While the codes provided work in this environment, they may not function as intended with all website builders or themes. If you experience difficulties getting them to work on your site, don’t hesitate to reach out—we’re here to help. You can schedule a Zoom video call with our support team for assistance.
Important: Once the integration pieces are placed on your website, please email the new page URLs and the locations of all integrated tools to our support team at support@superiorcrms.com. This step is essential so we can complete the necessary settings configuration within DJ Event Planner.
We’re excited to collaborate with you on making your website work seamlessly with DJEP!
Thank you,
Keith B. Clark
Superior CRMs
REQUEST FOR INFO. FORM
The Client Login form is usually placed on its own page or at the bottom of the Contact page. Additionally, we’ve provided a link for the Client Logout page, which you can customize to include your social media links and encourage clients to follow you.
PAGES TO REFERENCE:
<!-- BEGIN DJEVENTPLANNER CODE -->
<div class="col-xs-12 col-sm-8 col-sm-offset-2"><script src="https://stacksplanner.com/check_req_info_form.js" language="javascript" type="text/javascript"></script>
<style>.formbutton{border:1px solid #1 !important;background-color:#E82127 !important;color:#FFFFFF !important;font-size:13px !important;font-weight:400 !important;border-radius:17px !important;padding:4px 20px !important;margin:3px 3px !important;}</style><style>.form-control {padding:0px 12px !important;}</style><link rel="stylesheet" href="https://stacksplanner.com/clients/includes/mobile-framework.css">
<link rel="stylesheet" href="https://stacksplanner.com/includes/style-responsivetools-min.css">
<script>if(!window.jQuery){var script = document.createElement('script');script.type = 'text/javascript';script.src = 'https://ajax.googleapis.com/ajax/libs/jquery/1.8.1/jquery.min.js';document.getElementsByTagName('head')[0].appendChild(script);}</script>
<form method="post" action="https://stacksplanner.com/request_information.asp" onsubmit="return submitIt(this);" name="reqinfoform" style="margin:10px 20px;" data-np-autofill-form-type="identity" data-np-checked="1" data-np-watching="1">
<input type="hidden" name="checkdate" value=""><input type="hidden" name="djidnumber" value="17248"><input type="hidden" name="action" value="add_information_request">
<div style="padding:13px;background-color:#FFFFFF;color:#000000;">
<div class="form-group">
<div class="col-sm-4 col-md-3 padding-tb-7">
<div class="padding-lr-5">Date Of Event</div>
</div>
<div class="col-sm-8 col-md-9"><span class="metro-table" id="date_select"><select name="month" class="form-control monthselect" style="float:left;width:31%;margin:2px;" data-np-intersection-state="visible"><option value="43">Month</option><option value="1">January (1)</option><option value="2">February (2)</option><option value="3">March (3)</option><option value="4">April (4)</option><option value="5">May (5)</option><option value="6">June (6)</option><option value="7">July (7)</option><option value="8">August (8)</option><option value="9">September (9)</option><option value="10">October (10)</option><option value="11">November (11)</option><option value="12">December (12)</option>
</select>
<select name="day" class="form-control dayselect" style="float:left;width:31%;margin:2px;" data-np-intersection-state="visible"><option value="43">Day</option><option value="1">1</option><option value="2">2</option><option value="3">3</option><option value="4">4</option><option value="5">5</option><option value="6">6</option><option value="7">7</option><option value="8">8</option><option value="9">9</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 name="year" class="form-control yearselect" style="float:left;width:31%;margin:2px;" data-np-intersection-state="visible"><option value="43">Year</option><option value="2024" selected="">2024</option><option value="2025">2025</option><option value="2026">2026</option><option value="2027">2027</option><option value="2028">2028</option><option value="2029">2029</option><option value="2030">2030</option><option value="2031">2031</option><option value="2032">2032</option><option value="2033">2033</option><option value="2034">2034</option><option value="2035">2035</option><option value="2036">2036</option><option value="2037">2037</option><option value="2038">2038</option><option value="2039">2039</option><option value="2040">2040</option><option value="2041">2041</option><option value="2042">2042</option><option value="2043">2043</option><option value="2044">2044</option><option value="2045">2045</option><option value="2046">2046</option><option value="2047">2047</option><option value="2048">2048</option><option value="2049">2049</option><option value="2050">2050</option>
</select>
</span></div>
<div class="cf"></div><div style="height:0px;"></div>
</div>
<div class="form-group">
<div class="col-sm-4 col-md-3 padding-tb-7">
<div class="padding-lr-5">First Name</div>
</div>
<div class="col-sm-8 col-md-9"><input type="text" class="form-control width90hack" id="first_name" name="first_name" data-np-uid="722a79ee-e090-4af5-b464-2549f7211b72" data-np-autofill-field-type="firstName"><nordpass-icon data-np-uid="722a79ee-e090-4af5-b464-2549f7211b72" style="all: initial !important;"></nordpass-icon></div>
<div class="cf"></div><div style="height:0px;"></div>
</div>
<div class="form-group">
<div class="col-sm-4 col-md-3 padding-tb-7">
<div class="padding-lr-5">Last Name</div>
</div>
<div class="col-sm-8 col-md-9"><input type="text" class="form-control width90hack" id="last_name" name="last_name" data-np-uid="61a380fb-d188-445f-8f1b-368eebcd5998" data-np-autofill-field-type="lastName"><nordpass-icon data-np-uid="61a380fb-d188-445f-8f1b-368eebcd5998" style="all: initial !important;"></nordpass-icon></div>
<div class="cf"></div><div style="height:0px;"></div>
</div>
<div class="form-group">
<div class="col-sm-4 col-md-3 padding-tb-7">
<div class="padding-lr-5">Email Address</div>
</div>
<div class="col-sm-8 col-md-9"><input type="text" class="form-control width90hack" id="email" name="email" data-np-uid="72e81a48-991c-415d-a433-f0b91dda7df8" data-np-autofill-field-type="email"><nordpass-icon data-np-uid="72e81a48-991c-415d-a433-f0b91dda7df8" style="all: initial !important;"></nordpass-icon></div>
<div class="cf"></div><div style="height:0px;"></div>
</div>
<div class="form-group">
<div class="col-sm-4 col-md-3 padding-tb-7">
<div class="padding-lr-5">Phone Number</div>
</div>
<div class="col-sm-8 col-md-9"><input type="tel" class="form-control width90hack" id="telephone" name="telephone" data-np-uid="6e79cc20-0b9a-464a-aaca-93fd3a26e8c7" data-np-autofill-field-type="phone"><nordpass-icon data-np-uid="6e79cc20-0b9a-464a-aaca-93fd3a26e8c7" style="all: initial !important;"></nordpass-icon></div>
<div class="cf"></div><div style="height:0px;"></div>
</div>
<div class="form-group">
<div class="col-sm-4 col-md-3 padding-tb-7">
<div class="padding-lr-5">Best Time To Reach You</div>
</div>
<div class="col-sm-8 col-md-9"><input type="text" class="form-control width90hack" id="best_time" name="best_time" data-np-intersection-state="visible"></div>
<div class="cf"></div><div style="height:0px;"></div>
</div>
<div class="form-group">
<div class="col-sm-4 col-md-3 padding-tb-7">
<div class="padding-lr-5">Start Time</div>
</div>
<div class="col-sm-8 col-md-9"><select class="form-control responsive-form-select" name="req_start_time" data-np-intersection-state="visible"><option value="" selected=""></option><option value="12:00 pm">Noon</option><option value="12:30 pm">12:30 pm</option><option value="1:00 pm">1:00 pm</option><option value="1:30 pm">1:30 pm</option><option value="2:00 pm">2:00 pm</option><option value="2:30 pm">2:30 pm</option><option value="3:00 pm">3:00 pm</option><option value="3:30 pm">3:30 pm</option><option value="4:00 pm">4:00 pm</option><option value="4:30 pm">4:30 pm</option><option value="5:00 pm">5:00 pm</option><option value="5:30 pm">5:30 pm</option><option value="6:00 pm">6:00 pm</option><option value="6:30 pm">6:30 pm</option><option value="7:00 pm">7:00 pm</option><option value="7:30 pm">7:30 pm</option><option value="8:00 pm">8:00 pm</option><option value="8:30 pm">8:30 pm</option><option value="9:00 pm">9:00 pm</option><option value="9:30 pm">9:30 pm</option><option value="10:00 pm">10:00 pm</option><option value="10:30 pm">10:30 pm</option><option value="11:00 pm">11:00 pm</option><option value="11:30 pm">11:30 pm</option><option value="12:00 am">Midnight</option><option value="12:30 am">12:30 am</option><option value="1:00 am">1:00 am</option><option value="1:30 am">1:30 am</option><option value="2:00 am">2:00 am</option><option value="2:30 am">2:30 am</option><option value="3:00 am">3:00 am</option><option value="3:30 am">3:30 am</option><option value="4:00 am">4:00 am</option><option value="4:30 am">4:30 am</option><option value="5:00 am">5:00 am</option><option value="5:30 am">5:30 am</option><option value="6:00 am">6:00 am</option><option value="6:30 am">6:30 am</option><option value="7:00 am">7:00 am</option><option value="7:30 am">7:30 am</option><option value="8:00 am">8:00 am</option><option value="8:30 am">8:30 am</option><option value="9:00 am">9:00 am</option><option value="9:30 am">9:30 am</option><option value="10:00 am">10:00 am</option><option value="10:30 am">10:30 am</option><option value="11:00 am">11:00 am</option><option value="11:30 am">11:30 am</option></select></div>
<div class="cf"></div><div style="height:0px;"></div>
</div>
<div class="form-group">
<div class="col-sm-4 col-md-3 padding-tb-7">
<div class="padding-lr-5">End Time</div>
</div>
<div class="col-sm-8 col-md-9"><select class="form-control responsive-form-select" name="req_end_time" data-np-intersection-state="visible"><option value="" selected=""></option><option value="12:00 pm">Noon</option><option value="12:30 pm">12:30 pm</option><option value="1:00 pm">1:00 pm</option><option value="1:30 pm">1:30 pm</option><option value="2:00 pm">2:00 pm</option><option value="2:30 pm">2:30 pm</option><option value="3:00 pm">3:00 pm</option><option value="3:30 pm">3:30 pm</option><option value="4:00 pm">4:00 pm</option><option value="4:30 pm">4:30 pm</option><option value="5:00 pm">5:00 pm</option><option value="5:30 pm">5:30 pm</option><option value="6:00 pm">6:00 pm</option><option value="6:30 pm">6:30 pm</option><option value="7:00 pm">7:00 pm</option><option value="7:30 pm">7:30 pm</option><option value="8:00 pm">8:00 pm</option><option value="8:30 pm">8:30 pm</option><option value="9:00 pm">9:00 pm</option><option value="9:30 pm">9:30 pm</option><option value="10:00 pm">10:00 pm</option><option value="10:30 pm">10:30 pm</option><option value="11:00 pm">11:00 pm</option><option value="11:30 pm">11:30 pm</option><option value="12:00 am">Midnight</option><option value="12:30 am">12:30 am</option><option value="1:00 am">1:00 am</option><option value="1:30 am">1:30 am</option><option value="2:00 am">2:00 am</option><option value="2:30 am">2:30 am</option><option value="3:00 am">3:00 am</option><option value="3:30 am">3:30 am</option><option value="4:00 am">4:00 am</option><option value="4:30 am">4:30 am</option><option value="5:00 am">5:00 am</option><option value="5:30 am">5:30 am</option><option value="6:00 am">6:00 am</option><option value="6:30 am">6:30 am</option><option value="7:00 am">7:00 am</option><option value="7:30 am">7:30 am</option><option value="8:00 am">8:00 am</option><option value="8:30 am">8:30 am</option><option value="9:00 am">9:00 am</option><option value="9:30 am">9:30 am</option><option value="10:00 am">10:00 am</option><option value="10:30 am">10:30 am</option><option value="11:00 am">11:00 am</option><option value="11:30 am">11:30 am</option></select></div>
<div class="cf"></div><div style="height:0px;"></div>
</div>
<div class="form-group" style="display: none;">
<div class="col-sm-4 col-md-3 padding-tb-7">
<div class="padding-lr-5">Type Of Event</div>
</div>
<div class="col-sm-8 col-md-9"><input type="text" name="event_type" class="form-control width90hack" maxlength="50" data-np-intersection-state="visible" value="Wedding Show"></div>
<div class="cf"></div><div style="height:0px;"></div>
</div>
<div class="form-group">
<div class="col-sm-4 col-md-3 padding-tb-7">
<div class="padding-lr-5">Additional Questions Or Event Details</div>
</div>
<div class="col-sm-8 col-md-9"><textarea name="additional_information" rows="5" cols="25" class="form-control width90hack" data-np-intersection-state="visible"></textarea></div>
<div class="cf"></div><div style="height:0px;"></div>
</div>
<div class="form-group" style="display: none;">
<div class="col-sm-4 col-md-3 padding-tb-7">
<div class="padding-lr-5">How did you hear about us?</div>
</div>
<div class="col-sm-8 col-md-9"><input type="text" name="req_source" class="form-control width90hack" maxlength="50" data-np-intersection-state="visible" value="Wedding Show Lead"></div>
<div class="cf"></div><div style="height:0px;"></div>
</div>
<div class="form-group"><div class="col-sm-10 col-sm-offset-2"><p><label class="questiontitle"><input type="checkbox" name="sms_consent" value="true"> Please tick this box to recieve SMS updates regarding your event.</label><br class="visible-xs hidden-sm hidden-md hidden-lg"></p></div></div><br><p align="center"><input type="submit" name="submit" value="Submit" class="formbutton"><input type="hidden" name="thank_you_url" value="https://erosbooth.com/requestreceivedweddingshow/"></p><br>
</div>
</form>
</div>
<!-- END DJEVENTPLANNER CODE -->
HAVE QUESTIONS, NEED HELP? SCHEDULE A CALL...
OTHER PAGES -
Thank You for Signing
This page is used to redirect clients after they’ve signed the contract. It’s especially helpful if you have a separate payment arrangement, such as collecting payment after the event. Having this page available ensures a seamless experience when needed.
PAGES TO REFERENCE:
Reminder:
Once you’ve placed the integration pieces on your website, please email the URLs and the specific locations of the integrated tools to our support team at support@superiorcrms.com. This step is essential to ensure we can complete the settings configuration within DJ Event Planner and make everything work seamlessly.