Ajax Form with Polymer and Material Design

HTML

<base href="https://cdn.rawgit.com/download/polymer-cdn/1.7.0/lib/">
<link rel="import" href="iron-flex-layout/iron-flex-layout.html">
<link rel="import" href="iron-form/iron-form.html">
<link rel="import" href="paper-button/paper-button.html">
<link rel="import" href="paper-checkbox/paper-checkbox.html">
<link rel="import" href="paper-input/paper-input.html">
<link rel="import" href="paper-input/paper-textarea.html">
<link rel="import" href="paper-styles/color.html">
<link rel="import" href="paper-toast/paper-toast.html">

<style is="custom-style">
  body {
    @apply(--layout-vertical);
    @apply(--layout-center-center);
  }
  
  form {
    @apply(--layout-vertical);
    @apply(--layout-justified);
  }
  
  h1 {
    font-size: 24px;
    font-weight: 400;
    line-height: 32px;
    margin: 24px 0;
  }
  
  paper-button {
    @apply(--layout-self-end);
    font-size: 14px;
    line-height: 24px;
    font-weight: 500;
    min-width: 88px;
    min-height: 36px;
    margin: 24px 0;
    padding: 6px 16px;
  }
  
  paper-button.indigo {
    background-color: var(--paper-indigo-500);
    color: #fff;
    text-shadow: 0 0.5px 0 rgba(0, 0, 0, 0.2);
  }
  
  paper-button.indigo:hover {
    background-color: var(--paper-indigo-400);
  }
  
  paper-checkbox {
    margin: 12px 0;
  }
  
  paper-input[autocomplete] {
    --paper-input-container-input: {
      /* Remove autocomplete highlight color in Chrome
         http://stackoverflow.com/a/36140769 */
      -webkit-transition: background-color 0s ease-in-out 50000s, color 0s ease-in-out 5000s;
    }
    ;
  }
  
  paper-textarea {
    width: 100%;
  }
  
  pre {
    white-space: pre-wrap;
  }

</style>

<h1>Ajax Form with Polymer and Material Design</h1>

<form is="iron-form" id="form" action="https://eu.httpbin.org/get" method="get" disable-native-validation-ui>

  <paper-input name="name" label="Name" auto-validate required error-message="Please fill out this field."></paper-input>

  <paper-input name="email"...

CSS

body {
  font-family: 'Roboto', 'Noto', sans-serif;
  font-size: 14px;
  font-weight: 400;
  line-height: 24px;
  margin: 0;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

JavaScript

function _submitForm() {
  document.getElementById('form').submit();
}

form.addEventListener('iron-form-submit', function(event) {
  document.getElementById('request').textContent = JSON.stringify(event.detail, null, 2);
});

form.addEventListener('iron-form-response', function(event) {
  if (event.detail.status === 200) {
    document.getElementById('form').reset();
    document.getElementById('toast').show({
      text: 'Form was sent.',
      duration: 8000
    });
    document.getElementById('response').textContent = JSON.stringify(event.detail.response, null, 2);
  }
});

form.addEventListener('iron-form-error', function(event) {
  document.getElementById('toast').show({
    text: 'Error!',
    duration: 8000
  });
});

var webComponentsSupported = (
  'registerElement' in document && 'import' in document.createElement('link') && 'content' in document.createElement('template')
);
// Load webcomponents.js polyfill if browser doesn't support native Web Components.
if (!webComponentsSupported) {
  var script = document.createElement('script');
  script.async = true;
  script.src = 'https://cdn.rawgit.com/download/polymer-cdn/1.7.0/lib/webcomponentsjs/webcomponents-lite.min.js';
  document.head.appendChild(script);
}