<?php include 'views/_header.tpl.php'; ?>

<script type="text/javascript" src="/static/js/jQuery/js/jquery.lightbox.js" defer></script>
<link rel="stylesheet" type="text/css" href="/static/js/jQuery/css/jquery.lightbox.css" media="screen" defer />

<link rel="stylesheet" href="/static/css/jquery.datetimepicker.css"/>
<script src='/static/js/jquery.datetimepicker.js'></script>

<script type="text/javascript">
$(document).ready(function(){
    $(".timepicker").datetimepicker({
        hours12: false,
        format: 'g:i A m-d-Y',
        formatTime: 'g:i A',
        datepicker: true,
        timepicker: true,
        timepickerScrollbar: true,
        step: 30        
    });
    
	$('#comingsoon,#comingsoon2,#comingsoon3,.comingsoon').click(function (e) {
		alert('Standard Pricing Coming Soon (Mon Apr 10,2023). Please see our special BETA Member Plan if you\'d like early access.');
		//$("#chevron_pp").toggleClass('fa-chevron-down fa-chevron-down open');
		//$("#pp_inputs").toggle();
		e.preventDefault();
	});
});
</script>
<!-- <a href="javascript:void(0);"></a> or javascript:; 
<a href="#!" class="someclass">Text</a>
<a href="javascript:void(0);" class="someclass">Text</a>

-->

<style type="text/css">
	body {
	/*color: #333;*/
	background: #000;
	background: url('/static/images/pagebgnoise.jpg') no-repeat;
	background-size: cover;
	background-position: center center;
	height: 100%;
	-webkit-font-smoothing: antialiased;
	-moz-osx-font-smoothing: grayscale; 
}

span, a, a:active, a:hover {
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale; 
}
#header .wrap-top-menu { z-index: 99999999999999 !important; }

/* ########################################################## */
/* ####### DATETIMEPICKER AND LABELS FOR BOOKING FORM ####### */
/* ########################################################## */    

    .xdsoft_datetimepicker  .xdsoft_timepicker{
        /* changed from 58px */
        width: 88px;
        float:left;
        text-align:center;
        margin-left:8px;
        margin-top:0px;
    }
    .xdsoft_datetimepicker  .xdsoft_timepicker .xdsoft_prev,
    .xdsoft_datetimepicker  .xdsoft_timepicker .xdsoft_next{
        float:none;
        background-position:-40px -15px;
        height: 15px;
        width: 30px;
        display: block;
        /* changed from 14px */
        margin-left:29px;
        margin-top:7px;
    }
  .label{
    text-align:right;
    font-weight:300;
  }
  #submit{
    text-align:center;
  }
  input { padding:10px; height:30px; -webkit-border-radius: 4px; -moz-border-radius: 4px; border-radius: 4px; border:1px solid #aaa; }
  textarea#body {  -webkit-border-radius: 4px; -moz-border-radius: 4px; border-radius: 4px; border:1px solid #aaa; }
  td { padding-top:10px; padding-bottom:10px; }
  button { border:1px solid rgba(255,255,255,.1); padding:15px 0; width:200px; margin:0; border-radius:25px ; -moz-border-radius:25px; -webkit-border-radius:25px;
    font-family: 'Open Sans', Montserrat,Arial,sans-serif; background: #42B54C; font-size:18px; text-align:center;
    color:#fff; text-shadow:0px -1px 1px rgba(0,0,0,.3); -webkit-border-radius: 4px; -moz-border-radius: 4px; border-radius: 4px; }
  button:hover { background:red; }

/* ########################################################## */
/* ########################################################## */

div.spacer { }
.pricingpage a, .pricingpage a:active, .pricingpage a:link, .pricingpage a:visited {
	color: #2996cc;
	text-shadow: none;
} /* OLD BLUE 0072C4 */
a.loginpop.introlinks, a.loginpop.introlinks:active, a.loginpop.introlinks:link, a.loginpop.introlinks:visited { 
    color:#0072C4; }
a.loginpop.introlinks:hover { color:#fff; }
.pricingpage a:hover {
	color: #000;
}
a[href^=tel] {
    color:#0194fb; 
    text-shadow:0px -1px 0px rgba(0,0,0,.3);
}
.fancybox-close {
    top: -10px;
    right:-26px;
}
div.fancybox-skin {
    top: 0px;
}
.fancybox-skin { padding:7px !important; background:rgba(0,0,0,.4); }
.fancybox-outer, .fancybox-inner { }

h2.pricing-header  { 
    font-weight: 800px;
    font-size: 36px;
    font-family: Montserrat,sans-serif;
    margin-bottom:15px;
}

.pricing-header-div {
    display: block;
    text-align: center;
    height: 2px;
    width: 70px;
    background-color: #2996cc;
    margin: 0 auto;
    margin-bottom: 15px;
}

h2.author-byline {
    background: url('/static/images/byline.png');
    text-transform: uppercase;
    font-family: 'Open Sans',Futura, sans-serif;
    font-weight: 600;
    font-size: 0.8rem;
    letter-spacing: 2px;
    margin: 0 0 3rem 0;
    font-size: 15px;
}
span.author-byline-inside {
    padding: 3px 20px 3px 0;
    background: white;
}
.fancybox-next span {
  right: 5px;
  position:fixed;
}
.fancybox-prev span {
  left: 5px;
  position:fixed;
}
.fancybox-nav span {
    visibility:visible;
}
a.fancybox-nav.fancybox-next { 
    position:fixed;
    right:0px;  
    width:25px;
}
a.fancybox-nav.fancybox-prev { 
    position:fixed;
    left:0px;   
    width:25px;
}
.videoWrapper {
    position: relative;
    padding-bottom: 56.25%; /* 16:9 */
    padding-top: 0px;
    height: 0;
}
.videoWrapper iframe {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
}
/* ### CENTERED BYLINE ### */
h2.author-byliner {
    background: url('/static/images/byline.png');
    text-transform: uppercase;
    font-family: 'Open Sans',Futura, sans-serif;    
    font-weight: 600;
    font-size: 0.8rem;
    letter-spacing: 2px;
    margin: 0 3%;
    margin-bottom:10px;
    font-size:15px;
    display:block;
    text-align:center;
    width:94%;
}
span.author-byline-insider {
    padding: 3px 10px 3px 10px;
    background: white;
    margin:0 auto;
    display:inline-block;
}
input[type="submit"] {
    border-radius:25px ; -moz-border-radius:25px; -webkit-border-radius:25px;
}
.rounded2 a { 
    background:#2996cc;
    /** GREEN background:#00AF14; **/
    color:#fff;
    border-radius:25px ; -moz-border-radius:25px; -webkit-border-radius:25px;
    padding:15px 70px;
    font-size:16px;
    display:inline-block;
}
.rounded3 a { 
    background:#ccc;
    color:#444;
    text-shadow:0px 1px 0px #fff;
    border-radius:25px ; -moz-border-radius:25px; -webkit-border-radius:25px;
    padding:15px 70px;
    font-size:16px;
    display:inline-block;
}
.rounded2 a:hover, .rounded3 a:hover { 
    color:#fff;
    background:#00355B;
    text-shadow: 0px 0px 0px rgba(0,0,0,.4);
}
.rounded a { 
    background:#eee;
    border-radius:25px ; -moz-border-radius:25px; -webkit-border-radius:25px;
    padding:15px 20px;
    font-size:15px;
    display:inline-block;
}
.rounded a:hover { 
    color:#fff;
    background:#00355B;
    text-shadow: 0px 0px 0px rgba(0,0,0,.4);
}
#mmen { display:none; }
#loading_image {
    display:none;
    height: 100%;
    width: 100%;
    position:fixed;
    top: 0; 
    right:0;
    bottom:0;
    left: 0;
    z-index: 999999999 !important;
    background: #1A87C5 url(/static/images/blue-loader.gif) no-repeat center center;
    background-size: 400px auto;
    /* rgba(255,255,255,.80) rgba(0,0,0,.85) */
}
.no-js #loader { display: none;  }
.js #loader { display: block; position: absolute; left: 100px; top: 0; }
span.processing { 
    color:#fff;
    /* GREEN color:#00D315; */
    /* text-shadow:0px 1px 0px rgba(255,255,255,.55); */
    text-shadow:0px -1px 0px rgba(0,0,0,.3); 
    text-align:center;
    font-size:22px;
    font-family: 'Open Sans',Futura, sans-serif;
    font-weight:500;
    position:absolute; 
    width:100%; 
    top:37%; 
    display:block; 
}
.featureslist a, .featureslist a:active, .featureslist a:visited, .featureslist a:hover { font-weight:bold; }
h1 { 
    text-shadow:0px 1px 0px rgba(255,255,255,.6); 
    color:#5c666b; 
    padding:10px 0; 
    font-weight:500; 
    font-size:40px; 
    line-height:48px; 
}
h1, h2, h3, h4, h5, h1 span, h2 span, h3 span, h4 span, h5 span {
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale; 
}
h1, h2 { text-align:center; }
h2 { line-height:28px; }
h1.mobileh1 { margin-top:15px; font-weight:100; }
h3 { font-weight:500; font-size:17px; line-height:25px; margin-bottom:5px; }
h4 { font-size:28px; margin-bottom:11px; }

/* padding:15px 30px 10px; margin-bottom:7px; margin-top:20px; font-family:'Open Sans',Futura,'Arial Black',sans-serif; font-weight:300; font-size:20px; color:#fff; text-shadow:0px -1px 1px rgba(0,0,0,.3); */
.btn-o , .btn-oo a { border:1px solid #fff; padding:15px 0; width:94%; margin:0 3%; display:inline-block; 
font-family: 'Open Sans', Montserrat,Arial,sans-serif; background: #42B54C; font-size:18px; text-align:center;
color:#fff; text-shadow:0px -1px 1px rgba(0,0,0,.3); -webkit-border-radius: 4px; -moz-border-radius: 4px; border-radius: 4px; 
}
.btn-o:active, .btn-o:hover, .btn-oo a:hover, .btn-oo a:active { border:1px solid #fff; background: #00D315; }
span.tip { display:none; }
button {
    height:42px;
    padding:1px 12px;
    border:0px;
    color:#fff;
    background:#00AF14; 
    -webkit-appearance: none;
    -moz-appearance: none;
    appearance: none;   
    border-radius:4px ; -moz-border-radius:4px; -webkit-border-radius:4px;
}
button:hover {
    background:#00355B;
}
#footer { padding-top:0px; }    
.main-footer { display:none; }  

#header {
    border-bottom: 0px solid #d4d4d4;
}
hr {
 border: 0;
    height: 1px;
    background-image: linear-gradient(to right, rgba(128, 128, 128, 0), rgba(128, 128, 128, 0.75), rgba(128, 128, 128, 0));
    width:85%;
}

/* ############### SLIDER ############## */

    #slider {
      width:281px;
      height:500px;
      position: relative;
      overflow: hidden;
      margin:91px 0 0 2px;
      background:none;
    }
    #slider ul { 
        width:281px;
        height:500px;
        position: relative;
        margin: 0;
        background:none;
        padding: 0;
        list-style: none;
    }
    #slider ul li {
        width:281px;
        height:500px;
        position: relative;
        display: block;
        float: left;
        margin: 0;
        padding: 0;
    }
a.control_prev, a.control_next {
      position: absolute;
      top: 35%;
      z-index: 999;
      display: block;
      padding: 3% 3%;
      width: auto;
      height: auto;
      background: #2a2a2a;
      color: #fff;
      text-decoration: none;
      font-weight: 600;
      font-size: 18px;
      opacity: 0.3;
      cursor: pointer;
      font-family:'Times New Roman',Arial,sans-serif;
}

a.control_prev:hover, a.control_next:hover {
  opacity: 1;
  -webkit-transition: all 0.2s ease;
}

a.control_prev {
  border-radius: 0 4px 4px 0;
}

a.control_next {
  right: 0;
  border-radius: 4px 0 0 4px;
}

.bottomicons, .bottomtray { display:none; }

/* ############### SLIDER ENDS ############## */

img.guarimg { width:70px; }
.speakwith { margin-bottom:55px; }

.spacer {
    padding-top: 35px;
}
.iframevid { width:560px; height:315px; }

/* SCROLL BARS */
.fancybox-inner {
    -webkit-overflow-scrolling: touch !important;
    background:#fff;
}

.col1icon { margin-right:0px; margin-left:10px; }
.leftcol1, .rightcol3 { padding-top:55px; }

button.greensubmit{ display:block; width:100%; }

.squishtext { padding:0 200px; }

.maintagline { font-weight:300; color:#fff; font-size:26px; line-height:40px; text-align:center; 
padding:0px 15px; margin-top:0px; }
.maintagline h2 { font-size:38px; line-height:48px; font-weight:500; margin-top: 70px; }
.subtagline { font-size:15px; line-height:22px; margin-top:10px; }

.recommended { 
	background-color: #BA00F1;
	background-image: linear-gradient(45deg, #BA00F1, #FD0172);
	text-shadow: -1px -1px -1px rgba(0,0,0,.5);
	padding:5px 0;
	font-size:12px;
	letter-spacing: 2px;
}

.beta { font-size:17px; line-height: 25px; }

/* ################################################################################ */
/* ###########################      MOBILE STYLING      ########################### */
/* ################################################################################ */

@media screen and (min-width: 2400px) {
    #lpcontainer { background-size:100% 745px !important; }
}

/* ########################## */
@media screen and (max-device-width:  1160px), screen and (max-width:  1160px) {
    center#planslogo { display:none; }
    .spacer { padding-top: 65px; }  
    .layout-2cols { }
    #devicecontainer { margin-left:0px; margin-right:0; width:340px; }
}

/* ########################## */
@media screen and (max-device-width:  1024px), screen and (max-width:  1024px) {
	/*.maintagline { font-weight:300; color:#222; font-size:19px; line-height:27px; text-align:center; padding:0px 5px; margin-top:0px; }*/
	.subtagline { font-size:14px; line-height:20px; margin-top:10px; }
    center#planslogo { display:none; }
    .spacer { padding-top: 65px; }  
    .layout-2cols { }
    #devicecontainer { margin-left:0px; margin-right:0; width:340px; }
}
/* This was 854px, but I'm changing it to 980 */
/* ########################## */
@media (max-width: 980px) {
    html,body { }
    .spacer { padding-top: 65px; }  
    .layout-2cols { }
    .grid_4 { width:100%; display:block; }
    .iframevid { width:270px; height:152px; }
    #leftsidecol { margin-left:0px; }
    .leftcol1, .rightcol3 { width:312px; margin:0 auto; }
    .leftcol1 { padding:0; margin-bottom:25px; }
    #devicecontainer { width:100%; text-align:center; }
    /* BACKGROUND IMG background: #ccc url(/static/images/bgmount.jpg) no-repeat top center; */ 
    #rightsidecol { padding-bottom:50px; width:100%; margin-left:0px; margin-right:0px; }   
    .rightcol3 { padding-top:40px; }
    .col1icon, .col1text { float:left !important; }
    .col1icon { margin-right:10px; margin-left:0px; }
    .col1text { text-align:left !important; }   
    h1.mobileh1 { margin-top:5px; font-size:22px; line-height:30px; padding:0 20px; }
    .long-field { font-size:16px; }
    span.tip { display:block; }
    .or { margin:10px 0 5px; }
    img.guarimg { width:50px; }
    .speakwith { margin-bottom:25px; }
    .sharebuttons a {
        margin:15px 5px 15px 0;
    }
    .squishtext { padding:0 20px; }
}
/* ########################## */
@media (max-width: 585px) {
	.maintagline { font-weight:300; color:#fff; font-size:20px; line-height:30px; text-align:center; 
padding:0px 20px; margin-top:0px; }
	.maintagline h2 { font-size:32px; line-height:42px; font-weight:500; margin-top: 20px; }
    .leftcol1 { margin-top: -40px !important; }
    #rightsidecol { margin-top: -60px !important; padding-top:0px !important; }
    input#email { margin-left:0px !important; margin-right:0px !important; font-family: 'Open Sans',sans-serif; max-width:250px; }
    button.greensubmit{ display:block; width:100%; }
    .squishtext { padding:0 20px; }
	.pricingpage {
		padding: 0 20px;
	}
	.beta { font-size:15px; line-height: 22px; }
}
/* ########################## */
@media (max-width: 480px) {
    .leftcol1 { margin-top: -40px !important; }
    #rightsidecol { margin-top: -60px !important; padding-top:0px !important; }
    input#email { margin-left:0px !important; margin-right:0px !important; font-family: 'Open Sans',sans-serif; max-width:250px; }
    button.greensubmit{ display:block; width:100%; }
    .squishtext { padding:0 20px; }
	.pricingpage {
		padding: 0 20px;
	}
	.beta { font-size:15px; line-height: 22px; }
}
</style>

<!-- PAGE CONTAINER -->
<div id="lpcontainer" class="pricingpage" style="overflow:hidden; color:#fff;">
    <!-- #1 FULL WIDTH CONTAINER STARTS HERE -->
    <div style="width:100%; height:auto; background:none;">
        <!-- CONTAINER_12 STARTS HERE-->
        <div class="layout-2cols">
            <div id="introsection" class="content grid_12" style="background:none; margin-top:20px; 
            margin-bottom:20px; padding:0; min-height:800px">                 
                
				<center><img src="/static/client/flipmob_horizontal_logo.png" alt="FlipMob"
					style="max-width:500px; width:85%;"></center>
				
				<div class="beta" style="display:none; border:1px solid #ccc; padding:15px; font-weight:300;
				 margin-bottom:20px; font-family:  Montserrat, 'Open Sans',Helvetica, 'Helvetica Neue', 
				 Verdana, Arial,sans-serif;">
					<span style="font-weight:600; color:#de1000"> BETA</span> (4/6/2024) - 
					<!--<a href="#" style="font-weight:600;" title="Join BETA Now">Join BETA now &raquo;</a>-->
				</div>

				<div class="maintagline" style="background:none;">
					
<!--				<h2 style="">
						$5 might not seem like much, but what if millions of people got together
						and combined <i>their</i> $5?
					</h2>
					
					Then, voted on all the different things they should do with it...
					<br /><br />
					Imagine what you could <span style="font-weight:600;">save</span>. Imagine 
					the increased <span style="font-weight:600;">buying power</span>
					<i>your</i> $5 would have. And, imagine how many more things you could 
					<span style="font-weight:600;">do</span> if you chipped in <i>more</i> than $5?
					<br /><br />
					Sign up now - and put $5 to <span style="font-weight:600;">work</span> 
					for <i>you</i>...	-->	
					
					<h2 style="">
						FlipMob helps people work together and combine their money
						to take advantage of deals, create opportunities for savings and/or profit
						and just about anything else you can think of. 
					</h2>
					
					
					<br /><br />
					
					<!--Welcome ....
					<br /><br />

					Join forces and combine your money with others - for as little as $1 to 
					create instant savings, profit and access to new opportunities.
					
					<br /><br />
					
					Expand your buying power. Lower your costs. Increase your opportunities.			 
					
					<br /><br />
					
					If 50M people pitched in $5/each, they could buy or invest $250M per month in
					whatever they wanted.-->
					
					<br /><br />

					<!--<a href="/profile/edit" title="View the Dashboard Console"
					style="font-weight:600;">Edit Account</a>
					&ldquo;Landing Page&rdquo;
-->
					<br />
					<div class="subtagline" style="color:#777">

					</div>

				</div><!-- MAIN TAGLINE ENDS -->
				<div class="clear"></div>
            </div><!-- END OF INTRO SECTION -->     
			<div class="clear"></div>          
        </div><!-- END OF LAYOUT 2 COLS -->
        <div class="clear"></div>    
	</div><!-- FULL WIDTH CONTAINER ENDS -->
</div><!-- LP PAGE CONTAINER ENDS -->
<div class="clear"></div>
   
<?php include 'views/_footer.tpl.php'; ?>	
				 

<script type="text/javascript" defer>
  var href = $(this).attr("action");
$(function() {
    $('#gallery a').lightBox();
});  
</script>

<!-- PAYMENT PLANS CONTACT FORM POPUP -->
<div style="display:none;">
<div id="contactform" class="" style="max-width:850px;"><!-- max-width:550px; removed -->
    <div class="overlay-bl-bg"></div>
    <div class="container_6 pop-content" style="">
        <div class="" style="">
            <div class="form login-form" style="">          
                <!-- CONTENT CONTAINER STARTS HERE -->
                <div class="box-white" style="border:0px; height:auto; padding:0px; margin-top:-30px !important;">                  
                    <div style="background:#fff; padding:25px; color:#222; font-size:12px; font-weight:300;
                    text-align:left; font-family: 'Open Sans',sans-serif; font-weight:normal; line-height:22px;">   
                    
                        <!--<h1 style="font-weight:300; color:#222; margin-bottom:0px;">Payment Plans</h1>
                        
                        Often times we break projects up into 3-4 phases where we&rsquo;ll release 
                        an App Store-ready version of your app, with a <span style="font-weight:600;">payment due 
                        upon your review &amp; approval of 
                        each phase</span>. This also helps you start your planning, 
                        marketing &amp; promotions as early as possible. Submit your info below &amp; we&rsquo;ll
                        get in touch to help figure out a payment plan that works for you! Or call us at 
                        <a href="tel:1-888-564-0061">1-888-564-0061</a> or <a href="tel:1-312-857-3511">(312) 857-3511</a> (local)
                        <br /><br />-->
                        
                        <!-- START OF CONTACT FORM -->
    <?php
      $to='contact@orderitfrom.com';
      $messageSubject='ChattrBox Inquiry';
	  $confirmationSubject='ChattrBox Inquiry';
        
        // More headers
        $headers  = 'From: Pre-Order <contact@orderitfrom.com>' . "\r\n";
        $headers .= 'Reply-To: contact@orderitfrom.com' . "\r\n"; 
        $headers .= "MIME-Version: 1.0\r\n";
        $headers .= "Content-Type: text/html; charset=ISO-8859-1\r\n";   
      
      $fromclient = 'From: '.$email."\r\n";
      $fromthinapp = 'From: '.$to."\r\n";   
      $email='';
      $phone-'';
      $time='';
      $body=''; 
      $confirmationBody="Your request for more info has been received. \r\nThanks, Support Team.\r\n";
      $displayForm=true;
      if ($_POST){
        $email=stripslashes($_POST['email']);
        $name=stripslashes($_POST['name']);
        $phone=stripslashes($_POST['phone']);
        $time=stripslashes($_POST['time']);
        $body=stripslashes($_POST['body']);
        $bookinginfo= $name . " has requested more info " . $time. "<br/><br />Their number is: " . $phone . " and 
        their email is: " . $email . "<br /><br />Their message:<br /><br />" . $body;
        $msg= "<center><img src='https://orderitfrom.com/static/images/scheduled_hdr.jpg' />
        <br /><br />
        Someone will be getting in touch with you soon to discuss your needs.<br /><br />
        Thank you,
        <br /><br />
        - Support Team.<br />
        </center>";
        // validate e-mail address
        $valid=eregi('^([0-9a-z]+[-._+&])*[0-9a-z]+@([-0-9a-z]+[.])+[a-z]{2,6}$',$email);
        $crack=eregi("(\r|\n)(to:|from:|cc:|bcc:)",$body);
        if ($email && $body && $valid && !$crack){
            //This goes to Pre-Order
          if (mail($to,$messageSubject,$bookinginfo,$headers,'-fcontact@orderitfrom.com')
              // This goes to the sender
              && mail($email,$confirmationSubject,$msg,$headers,'-fcontact@orderitfrom.com')){
            $displayForm=false;    
    ?>

    <p style="font-size:22px;">
      Thanks for your interest. We&rsquo;re looking forward to learning
      more about your project and needs. A confirmation 
      email has been sent to your e-mail address and your message is also shown below.
    </p>
    <?php
            echo '<p><span style="font-weight:500;">'.htmlspecialchars($body).'</span></p>';
            echo '<br />';
            echo '<a href="/pricing" style="font-weight:500; color:#82ADCC;">Show Form again &raquo;</a>';
          }else{ // the messages could not be sent
    ?>
    <p>
      Oooops! Something went wrong. :(  This is usually due to a server error, and is probably not your fault.
      We apologize for any inconvenience. Please feel free to email us at contact@orderitfrom.com or call us at 312-857-3511
      to get in touch with us directly. Thank you.
    </p>
    <?php
          }
        }else if ($crack){ // cracking attempt
    ?>
    <p><strong>
      Your message contained e-mail headers within the message body.
      This seems to be a cracking attempt and the message has not been sent.
    </strong></p>
    <?php
        }else{ // form not complete
    ?>
    <p><strong>
      Your message could not be sent.
      You must include both a valid e-mail address and a message.
    </strong></p>
    <?php
        }
      }
      if ($displayForm){
    ?>

    <form action="/loyalty-card" method="post">

        <!-- ################### --> 
        <!--     FIRST COLUMN    -->
        <!-- ################### -->    
        <div class="content grid_6" style="font-size:17px; margin-top:0px; padding:0 20px 20px; border:0px solid #ccc;
        box-sizing:border-box; -moz-box-sizing:border-box; -webkit-box-sizing:border-box; text-align:left">
            <label for="email" style="font-size:12px;">Name: </label>
            <input type="text" name="name" id="name" value="<?php echo htmlspecialchars($name); ?>" size="30" 
            style="width:95%; max-width:350px; padding:7px; margin-bottom:10px;" placeholder="Your Name" />
            <br />
            <label for="email" style="font-size:12px;">E-mail: </label>
            <input type="text" name="email" id="email" value="<?php echo htmlspecialchars($email); ?>" size="30" 
            style="width:95%; max-width:350px; padding:7px;" placeholder="Your E-mail" />
        </div><!--end: grid4 div -->
        
        <!-- ################### --> 
        <!--     2 COLUMN    -->
        <!-- ################### -->    
        <div class="content grid_6" style="font-size:17px; margin-top:0px; padding:0 20px 20px; border:0px solid #ccc;
        box-sizing:border-box; -moz-box-sizing:border-box; -webkit-box-sizing:border-box; text-align:left">
            <label for="email" style="font-size:12px;">Phone (optional): </label>
            <input type="text" name="phone" id="phone" value="<?php echo htmlspecialchars($phone); ?>" size="30" 
            style="width:95%; max-width:350px; padding:7px; margin-bottom:10px;" placeholder="XXX-XXX-XXXX" /><br />
            <label for="email" style="font-size:12px;">When? (optional) </label>
            <input class="timepicker txt" type="text" name="time" value="<?php echo $time; ?>" placeholder="<?= date('g:i A m-d-Y') ?>" 
            style="width:95%; max-width:350px; padding:7px; color:#222;" size="30" />  
        </div><!--end: grid4 div -->
        
        <!-- ################### --> 
        <!--     BOTTOM COLUMN    -->
        <!-- ################### -->    
        <div class="content grid_12" style="font-size:17px; margin-top:0px; padding:0 20px 20px; border:0px solid #ccc;
        box-sizing:border-box; -moz-box-sizing:border-box; -webkit-box-sizing:border-box; text-align:center">
            <button type="submit" style="font-weight:300;">Submit now</button>
            <br />
            <span style="color:#aaa; font-size:12px;">A confirmation e-mail will be sent to you</span>
        </div><!--end: grid4 div -->
        
    </form>
    <?php
      }
    ?>                          
                        <!-- END OF CONTACT FORM -->

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