JSFiddle - React, Tailwind, and code Playground

by cerb

HTML

<form action="javascript:;">
  <p>
    <input type="text" data-token="url" placeholder="&lt;paste your webhook URL here&gt;" spellcheck="off" autocomplete="off">
  </p>


  <h1>Contact us</h1>
  <p>
    <label for="email">What email address should we respond to?</label>
    <input type="text" name="email" placeholder="[email protected]" spellcheck="off">
  </p>
  <p>
    <label for="message">How can we help?</label>
    <textarea name="message"></textarea>
  </p>
  <div class="status"></div>
  <p>
    <button type="button" class="submit">Submit</button>
  </p>
</form>

CSS

body {
  background-color: rgb(243, 245, 246);
}

body,
form,
td {
  font-family: 'Helvetica Neue', Helvetica, Arial, sans-serif;
}

h1 {
  color: black;
}

form label {
  font-weight: 500;
  font-size: 18px;
  color: rgb(80, 80, 80);
}

form input {
  border: 1px solid rgb(200, 200, 200);
  width: 95%;
  font-size: 18px;
  padding: 5px;
}

form textarea {
  border: 1px solid rgb(200, 200, 200);
  font-size: 18px;
  display: block;
  width: 95%;
  height: 100px;
  padding: 5px;
}

form button {
  cursor: pointer;
  background-color: rgb(240, 240, 240);
  border: 1px solid rgb(200, 200, 200);
  margin-top: 10px;
  border-radius: 5px;
  padding: 10px;
  font-size: 16px;
}

form button:hover {
  background-color: rgb(220, 220, 220);
  border: 1px solid rgb(180, 180, 180);
}

div.success {
  display: inline-block;
  padding: 10px;
  color: rgb(121, 159, 68);
  background-color: rgb(223, 245, 201);
  border-radius: 5px;
}

div.warning {
  display: inline-block;
  padding: 10px;
  color: rgb(151, 99, 32);
  background-color: rgb(252, 240, 187);
  border-radius: 5px;
}

div.error {
  display: inline-block;
  padding: 10px;
  color: rgb(150, 0, 0);
  background-color: #ffc0c0;
  border-radius: 5px;
}

JavaScript

var $frm = $('form');

$frm.find('button.submit').click(function() {
	var url = $frm.find('input[data-token=url]').val();
	
  if(url.length == 0)
	  return false;
	
  $.ajax({
    url: url,
    method: 'POST',
    crossDomain: true,
    dataType: 'json',
    data: $frm.serialize(),
    success: function(res) {
      if (res && res.error) {
        var $warn = $('<div class="warning"/>').text(res.error);
        $frm.find('div.status').html($warn);
        return;
      }

      if (res && res.success) {
        var $success = $('<div class="success"/>').text(res.success);
        $frm.find('div.status').html($success);
        $frm.find('button.submit').hide();
      }
    },
    error: function(e) {
      var $err = $('<div class="error"/>').text("An unexpected error occurred. Please try again later.");
      $frm.find('div.status').html($err);
      return;
    }
  });
});