input.html

<script src="//ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script>

<style>    
@import url('https://fonts.googleapis.com/css?family=Open+Sans');    
* {
    box-sizing: border-box;
    font-family: Open Sans;
}

body {
    background-image: url("http://www.jongriffith.com/wp-content/uploads/2018/01/smallfullbody.png"),url("http://www.jongriffith.com/wp-content/uploads/2017/12/nye.png");
    background-position: right bottom, left top;
    background-repeat: no-repeat, no-repeat;
    background-attachment: fixed, fixed;
    -webkit-background-size: 180px, cover;
    -moz-background-size: 180px, cover;
    -o-background-size: 180px, cover;
    background-size: 180px, cover;

.header {
    text-align: center;
}

}
::-webkit-input-placeholder {
    font-family: Open Sans;
    font-size: 16px;
    font-color: #000000;
}
::-webkit-input-value {
    font-family: Open Sans;
    font-size: 16px;
    font-color: #000000;
}
input[type=text], select, textarea {
    width: 100%;
    padding: 12px;
    background: #FFFFFF;
    border: 1px solid #ccc;
    border-radius: 4px;
    box-sizing: border-box;
    resize: vertical;
    font-size: 16px;
}

label {
    padding: 8px 8px 8px 8px;
    display: inline-block;
    vertical-align: middle;
    min-height: 49px;
    border-radius: 4px;
    background-color: #ffffff10;
    line-height: 1.9;
    width: 210px;
}

input[type=submit] {
    font-family: Open Sans;
    font-size: 16px;
    background-color: #4CAF50;
    color: white;
    padding: 12px 20px;
    margin-right: 10px;
    border: none;
    border-radius: 4px;
    cursor: pointer;
    float: left;
    
}

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

.container {
    border-radius: 5px;
    padding: 20px;
    width: 80%;
    margin: 0 auto;
    overflow-y: auto;
    background-color: #ffffff98;
}

.contactform {
    background-color: rgba(255,255,255,0.3);
}

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

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

/* Clear floats after the columns */
.row:after {
    content: "";
    display: table;
    clear: both;
}

/* Responsive layout - when the screen is less than 600px wide, make the two columns stack on top of each other instead of next to each other */
@media (max-width: 1130px) {
    .col-25, .col-75, input[type=submit] {
        width: 100%;
        margin-top: 0;
    }
    label {
        width: 100%;
    }
    input[type=submit] {
        margin-top: 10px;
    }

}    

.video-responsive{
    overflow:hidden;
    padding-bottom:56.25%;
    position:relative;
    height:0;
}
.video-responsive iframe{
    left: 0;
    top:0;
    height:100%;
    width:100%;
    position:absolute;
}

.img {
  width: 100%;
  }

</style>

<div class="container">

  <h1><?= name ?>, is this information correct?</h1>

  <!--<p id="video">
    <div class="video-responsive">
      <iframe width="560" height="315" src="https://www.youtube.com/embed/Dmlvs2pZJ4M?autoplay=1&controls=0" frameborder="0" gesture="media" allow="encrypted-media" allowfullscreen></iframe>
    </div>-->
    
  <p id="message">
    The following information is coming directly out of my contacts list in my iPhone.  If you would, please confirm and/or update any of the information here it will directly update my contacts in real-time.  If no changes are needed, simply click "No Changes Needed." This information is in my personal address book.  Nobody has access to it but me, and it will remain strictly confidential.  Thanks!  Have a wonderful New Year!
  </p>

  <form id="contactform">
      
<div class="row">
  <div class="col-25">
    <label class="control-label" for="inputName">Your Name:</label>
  </div>
  <div class="col-75">
    <input type="text" id="inputFULL_NAME" placeholder="Full Name" value="<?= name ?>">
  </div>
</div>

<div class="row">
  <div class="col-25">
  <label class="control-label" for="inputEmail">Primary E-mail Address:</label>
  </div>
  <div class="col-75">
  <input type="text" id="inputHOME_EMAIL" class="input-large" value="<?= email ?>" placeholder="e.g. name@domain.com">
  </div>
</div>
  
<div class="row">
  <div class="col-25">
    <label class="control-label" for="inputAddressHome">Home Address:</label>
  </div>
  <div class="col-75">
    <input type="text" id="inputHOME_ADDRESS" class="input-xlarge" value="<?= home_address ?>" placeholder="e.g.: 1234 Main Street, Phoenix, AZ  85008">
  </div>
</div>
    
<div class="row">
  <div class="col-25">
    <label class="control-label" for="inputAddressWork">Work Address:</label>
  </div>
  <div class="col-75">
    <input type="text" id="inputWORK_ADDRESS" class="input-xlarge" value="<?= work_address ?>" placeholder="e.g.: 1234 Main Street, Phoenix, AZ  85008">
  </div>
</div>
   
<div class="row">
  <div class="col-25">
    <label class="control-label" for="inputMobilePhone">Mobile Phone:</label>
  </div>
  <div class="col-75">
    <input type="text" id="inputMOBILE_PHONE" class="input-medium" value="<?= mobile_phone ?>" placeholder="e.g.: description">
  </div>
</div>
   
<div class="row">
  <div class="col-25">
    <label class="control-label" for="inputSkype">Skype:</label> 
  </div>
  <div class="col-75">
    <input type="text" id="inputSKYPE" class="input-small" value="<?= skype ?>" placeholder="@username">
  </div>
</div>

<div class="row">
  <div class="col-25">
    <label class="control-label" for="inputTwitter">Twitter:</label>
  </div>
  <div class="col-75">
    <input type="text" id="inputTWITTER" class="input-small" value="<?= twitter.replace('http://twitter.com/','') ?>" placeholder="@username">
  </div>
</div>

<div class="row">
  <div class="col-25">
    <label class="control-label" for="inputInstagram">Instagram:</label>
  </div>
  <div class="col-75">
    <input type="text" id="inputINSTAGRAM" class="input-small" value="<?= instagram.replace('http://instagram.com/','') ?>" placeholder="@username">
  </div>
</div>
   
<div class="row">
  <div class="col-25">
    <label class="control-label" for="inputYOUTUBE">YouTube Channel:</label>
  </div>
  <div class="col-75">
    <input type="text" id="inputYOUTUBE" class="input-small" value="<?= youtube ?>" placeholder="Paste your YouTube Channel Link Here">
  </div>
</div>

<div class="row">
  <div class="col-25">
    <label class="control-label" for="inputBirthday">Birthday:</label>
  </div>
  <div class="col-75">
    <input type="text" id="inputBIRTHDAY" class="input-small" value="<?= birthday ?>" placeholder="MM/DD/YYYY">
  </div>
</div>    
    
<div class="row">
  <div class="col-25">
    <label class="control-label" for="inputAnniversary">Anniversary:</label>
  </div>
  <div class="col-75">
    <input type="text" id="inputANNIVERSARY" class="input-small" value="<?= anniversary ?>" placeholder="MM/DD/YYYY">
  </div>
</div>
   
<div class="row">
  <div class="col-25">
    <label class="control-label" for="inputBlog">Blog:</label>
  </div>
  <div class="col-75">
    <input type="text" id="inputBLOG" class="input" value="<?= blog ?>" placeholder="http://">
  </div>
</div>
 
<div class="row">
  <div class="col-25">
    <label class="control-label" for="inputHomeWebsite">Personal Website:</label>
  </div>
  <div class="col-75">
    <input type="text" id="inputHOME_WEBSITE" class="input" value="<?= home_website ?>" placeholder="http://">
  </div>
</div>

<div class="row">
  <div class="col-25">
    <label class="control-label" for="inputWorkWebsite">Business Website:</label>
  </div>
  <div class="col-75">
    <input type="text" id="inputWORK_WEBSITE" class="input" value="<?= work_website ?>" placeholder="http://">
  </div>
</div>

<div class="row">
  <div class="col-25">
    <input type="hidden" name="id" value="<?= id; ?>" />
  </div>
  <div class="col-75">
    <input type="submit" class="btn blue" value="Update Your Contact Record" onclick="updateGoogleContacts(); return false;">&nbsp;
    <input type="submit" class="btn blue" value="No Changes Needed" onclick="noChangesNeeded(); return false;">
  </div>
</div>   
</form>

</div>



<script>

  function progress() {
    $("#message").html("<h3>Your contact details have been updated in my address book. Thanks!</h3><br /><center><img src=\"http://www.jongriffith.com/wp-content/uploads/2018/01/happy-new-year-wallpaper.jpg\" width=\"100%\"></center>");
    return;
  }
  function noChanges() {
    $("#message").html("<h3>Yessssss!  I got something right for once!  Thanks!</h3><br /><center><img src=\"http://www.jongriffith.com/wp-content/uploads/2018/01/happy-new-year-wallpaper.jpg\" width=\"100%\"></center>");
    return;
  }

  function updateGoogleContacts() {

    var contact = {};

    contact.FULL_NAME    = $("input#inputFULL_NAME").val();
    contact.EMAIL        = $("input#inputHOME_EMAIL").val();
    contact.HOME_ADDRESS = $("input#inputHOME_ADDRESS").val();
    contact.WORK_ADDRESS = $("input#inputWORK_ADDRESS").val();
    contact.MOBILE_PHONE = $("input#inputMOBILE_PHONE").val();
    contact.SKYPE        = $("input#inputSKYPE").val();
    contact.TWITTER      = $("input#inputTWITTER").val();
    contact.INSTAGRAM    = $("input#inputINSTAGRAM").val();
    contact.YOUTUBE     = $("input#inputYOUTUBE").val();
    contact.BLOG         = $("input#inputBLOG").val();
    contact.HOME_WEBSITE = $("input#inputHOME_WEBSITE").val();
    contact.WORK_WEBSITE = $("input#inputWORK_WEBSITE").val();
    contact.BIRTHDAY     = $("input#inputBIRTHDAY").val();
    contact.ANNIVERSARY  = $("input#inputANNIVERSARY").val();
    contact.id           = "<?= id ?>";

    google.script.run.withSuccessHandler(progress).labnolUpdateContact(contact);      

    $("#contactform").hide();
    $("#message").html("<h3>The employees are hard at working making sure we have everything in order...please stand by for confirmation...</h3><br /><br /><center><img src=\"http://www.jongriffith.com/wp-content/uploads/2018/01/loading_spinner.gif\" width=\"100\"><br /><img src=\"https://media.giphy.com/media/bSJB8Ju3063qU/giphy.gif\" width=\"250\"></center>");

    return false;

  }

  function noChangesNeeded() {
    
    google.script.run.withSuccessHandler(progress);     

    $("#contactform").hide();
    $("#message").html("Confirming no changes needed...<br /><br />");

    return false;
    
   }
  
</script>