form.js

import { Component, h, prop } from 'skatejs';
const React = { createElement: h };

const sym = Symbol();

class WaitlistedForm extends Component {
  static get is(){ return 'waitlisted-form' }

  static get props () {
    return {
      domain: prop.string({ attribute: true }),
      form: prop.string({ attribute: true }),
      resultUrl: prop.string({ attribute: true })
    };
  }
  async connectedCallback () {
    let resp = await fetch(`https://${this.domain}/api/v2/site.json`)
    this.site = await resp.json()
    super.connectedCallback();
  }
  disconnectedCallback () {
    // Ensure we callback the parent.
    super.disconnectedCallback();
  }

  renderCallback () {
    console.log(this.site)
    let nameBlock = null
    if (this.site.ask_name) {
      nameBlock = (<div class="wl-row wl-name">
        <label>Name</label>
        <input name="reservation[name]" />
      </div>)
    }

    return (
      <form action="https://{this.site.domain}/external/reservations" method="POST">
        {nameBlock}
        <div class="wl-row wl-email">
          <label>Email</label>
          <input name="reservation[email]" />
        </div>
        <input type="submit" value="Sign Up" />
      </form>
    );
  }
}