@mongodb-js/mongodb-ui-components/src/footer/form.js

A collection of frequently used functional UI components found on mongodb properties

import {h, Component} from 'preact'

const fields = [
  ['language', 'en'],
  ['elqFormName', 'Int_NL_NewsletterSignup-Dot-ComFooter_WW'],
  ['elqSiteID', 413370795],
  ['elqCookieWrite', 0],
  ['elqCustomerGUID'],
  ['db_company_name'],
  ['db_demandbase_sid'],
  ['db_marketing_alias'],
  ['db_industry'],
  ['db_sub_industry'],
  ['db_employee_count'],
  ['db_primary_sic'],
  ['db_street_address'],
  ['db_city'],
  ['db_state'],
  ['db_zip'],
  ['db_country'],
  ['db_country_name'],
  ['db_phone'],
  ['db_stock_ticker'],
  ['db_web_site'],
  ['db_annual_sales'],
  ['db_revenue_range'],
  ['db_employee_range'],
  ['db_b2b'],
  ['db_b2c'],
  ['db_traffic'],
  ['db_latitude'],
  ['db_longitude'],
  ['db_fortune_1000'],
  ['db_forbes_2000'],
  ['ip_address'],
  ['jump_id']
]

export class Form extends Component {
  constructor (props) {
    super(props)
    this.onSubmit = this.onSubmit.bind(this)
    this.state = {err: '', complete: false}
  }

  onSubmit (e) {
    e.preventDefault()

    const els = [].slice.call(e.target.elements)
    const data = {}

    els.forEach(el => { data[el.name] = el.value })

    window.fetch('/eloqua', {
      body: JSON.stringify(data),
      credentials: 'include',
      headers: {'content-type': 'application/json'},
      method: 'POST'
    })

    this.setState({complete: true})
  }

  render (props, {err, complete}) {
    return (
      <div class='relative full-if-lt-900'>
        {err !== '' &&
        <div class='form-error'>{err}</div>}

        {complete === true &&
        <div className='w-max-400'>
          <small class='disp-block'><strong>Thank You</strong></small>
          <small>Thanks for subscribing to the newsletter. This is your channel for getting the latest notifications of server and driver releases, details on local MongoDB events, updates on education programs, and the skinny on all things MongoDB.</small>

          <small class='disp-block m-t-5'>Still want more? Find ways to get involved on our <a href='/community'>community page</a>.</small>
        </div>}

        {complete === false &&
        <small class='disp-block m-b-10'>
          <strong>Get MongoDB Email Updates</strong>
        </small>}

        {complete === false &&
        <form
          ref={el => { this.form = el }}
          autoComplete='on'
          onSubmit={this.onSubmit}>

          {fields.map(([id, defaultVal]) => (
            <input
              type='hidden'
              defaultValue={defaultVal}
              name={id}
              id={id} />
          ))}
          <input
            required
            id='email'
            name='email'
            autoComplete='email'
            style={{border: 0, padding: '9px 16px', outline: 'none'}}
            type='email'
            class='radius w-220'
            placeholder='Email Address' />
          <input
            type='submit'
            class='btn-green m-l-10 p-h-5'
            value='→' />
        </form>}
      </div>
    )
  }
}