JSFiddle - React, Tailwind, and code Playground

by davehol

HTML

<div class="form-wrapper">
  <form method="GET" id="subscribeform" name="subscribeform" onsubmit="return false;">
    <input type="text" id="name" name="name" class="yui-ac-input" autocomplete="off" value="" placeholder="email address" aria-label="Contextual Search" onfocus="value=''">
    <button type="submit" id="searchButton" value="" class="srchbtncustom" aria-label="Contextual Search "><span class="cs-mobile-hide">Subscribe</span><span class="cs-mobile-show">Go</span></button>
  </form>
</div>
<h2 id="success" style="text-align: center;display:none;">Thank you for your interest</h2>

CSS

.form-wrapper {
  background: green;
  padding-top: 30px;
}

#subscribeform {
  width: auto;
  height: 100px;
  position: relative;
  margin-left: 10%;
  margin-right: 10%;
}

#subscribeform>input[type="text"] {
  left: 0;
  width: 66%;
  position: absolute;
  display: inline-block;
  direction: ltr;
  border: none;
  background: #ffffff;
  border-radius: 0px;
  font-family: Museo500;
  font-size: 18px;
  padding: 0 0 0 25px;
  height: 56px;
  color: #000054;
  box-shadow: none;
  outline: none;
  border-top-left-radius: 100px;
  border-bottom-left-radius: 100px;
}

#subscribeform .srchbtncustom {
  font-family: Museo500;
  width: 34%;
  height: 56px;
  padding: auto;
  border-radius: 0px;
  background: #e5001c;
  color: #FFF;
  position: relative;
  right: 0;
  font-size: 18px;
  border: none;
  outline: none;
  position: absolute;
  z-index: 0;
  box-shadow: none;
  border-bottom-right-radius: 100px;
  border-top-right-radius: 100px;
}

.search__wrapper,
#main-header,
.cs-mobile-hide {
  display: none;
}

@media (min-width: 1330px) {
  .cs-mobile-hide {
    display: block;
  }
  .cs-mobile-show {
    display: none;
  }
}

JavaScript

var subscribe = (function(){
  // variable to hold request
  var request;
  // bind to the submit event of our form
  $("#subscribeform").submit(function(event) {

    // abort any pending request
    if (request) {
      request.abort();
    }
    if ((!validateEmail($("#name").val()))||($("#name").val()=='')) {
      //alert("Lets try that email address again");
      $('#name').val("oops, invalid email!");
      return;
    };
    // setup some local variables
    var $form = $(this);
    // let's select and cache all the fields
    var $inputs = $form.find("input, select, button, textarea");
    // serialize the data in the form
    var serializedData = $form.serialize();

    // let's disable the inputs for the duration of the ajax request
    // Note: we disable elements AFTER the form data has been serialized.
    // Disabled form elements will not be serialized.
    $inputs.prop("disabled", true);
    $('#name').val("one sec...");

    // fire off the request to /form.php
    request = $.ajax({
      url: "https://script.google.com/macros/s/AKfycbxz6ldckAp007OQRffJgQtxpJTjbOnyqOq9kTMcoD1jF0FOoC4/exec",
      type: "post",
      datatype: "jsonp",
      data: serializedData
    });

    // callback handler that will be called on success
    request.done(function(response, textStatus, jqXHR) {
      // log a message to the console
      $('#result').html('<a href="https://docs.google.com/spreadsheets/d/10tt64TiALYhPMqR2fh9JzkuhxW7oC0rXXPb_pmJ7HAY/edit?usp=sharing" target="_blank">Success - see Google Sheet</a>');
      console.log("Hooray, it worked!");
      //$("#subscribeform").hide();
      $('#name').val("Thank you");
    });

    // callback handler that will be called on failure
    request.fail(function(jqXHR, textStatus, errorThrown) {
      // log the error to the console
      console.error(
        "The following error occured: " +
        textStatus, errorThrown
      );
    });

    // callback handler that will be called regardless
    // if...