complex-form.html

<link rel="import" href="bower_components/polymer/polymer.html">
<link rel="import" href="bower_components/paper-styles/color.html">

<link rel="import"href="bower_components/iron-flex-layout/classes/iron-flex-layout.html">
<link rel="import" href="bower_components/paper-styles/color.html">
<link rel="import" href="bower_components/iron-form/iron-form.html">
<link rel="import" href="bower_components/paper-input/paper-input.html">
<link rel="import" href="bower_components/paper-button/paper-button.html">
<link rel="import" href="bower_components/gold-cc-input/gold-cc-input.html">
<link rel="import" href="bower_components/gold-cc-cvc-input/gold-cc-cvc-input.html">
<link rel="import" href="bower_components/gold-cc-expiration-input/gold-cc-expiration-input.html">
<link rel="import" href="bower_components/gold-zip-input/gold-zip-input.html">
<link rel="import" href="bower_components/gold-email-input/gold-email-input.html">
<link rel="import" href="bower_components/gold-phone-input/gold-phone-input.html">

<dom-module id="complex-form">

  <link rel="import" type="css" href="simple-form.css">

  <style>
    gold-cc-expiration-input, gold-cc-cvc-input {
      width: 120px;
      margin-right: 20px;
    }

    gold-zip-input {
      width: 120px;
    }

    .country {
      width: 260px;
      margin-right: 20px;
    }

    .quantity {
      display: inline-block;
      width: 30px;
      text-align: center;
      padding-left: 10px;
    }

    h4 {
      margin-bottom: 10px;
    }

    paper-button {
      width: 100%;
    }
  </style>
  <template>
    <div class="horizontal layout center form-title">
      <div class="avatar" item-icon></div>
      <div class="flex company">ACME Goods Co.</div>
      <br><br>
    </div>
    <form is="iron-form" id="form">

      <h4>Quantity: <paper-input name="quantity" class="quantity" value="1" type="number"></paper-input></h4>
      <h4>Contact Information</h4>

      <paper-input name="name" label="Name" required auto-validate autocomplete="cc-name"></paper-input>
      <paper-input name="address" label="Address" required auto-validate autocomplete="street-address"></paper-input>
      <gold-email-input name="email" class="flex" required auto-validate></gold-email-input>
      <gold-phone-input name="phone" class="flex" required auto-validate></gold-phone-input>

      <h4>Payment</h4>

      <gold-cc-input name="cc" required auto-validate
          value=""
          label="Sample Valid VISA number"
          card-type="{{cardType}}">
      </gold-cc-input>

      <div class="horizontal layout wrap">
        <gold-cc-expiration-input name="cc-expiration" required auto-validate></gold-cc-expiration-input>
        <gold-cc-cvc-input name="cc-cvc" required auto-validate card-type="[[cardType]]"></gold-cc-cvc-input>
        <gold-zip-input name="zip" required auto-validate></gold-zip-input>
      </div>

      <h4>Shipping</h4>
      <div class="horizontal layout wrap">
        <paper-input name="country" class="country" label="Country" placeholder="United States" required auto-validate></paper-input>
        <gold-zip-input name"mail-zip" required auto-validate></gold-zip-input>
      </div>

      <paper-button on-click="_submit">Pay</paper-button>

    </form>
  </template>
</dom-module>

<script>
  Polymer({

    is: 'complex-form',

    listeners: {
      'iron-form-submit': '_formSubmitted'
    },

    _submit: function() {
      var form = this.$.form;
      if (form.requestAutocomplete)
        form.requestAutocomplete();

      form.submit();
    },

    _formSubmitted: function(event) {
      console.log("Submitted: ", event.detail);
    }

  });
</script>