Contact Mail Form - HTML and JS using Mandrill API

mail_form.coffee

class window.Mail
  constructor: (@attrs)->

  from_email: -> @attrs['from_email']
  to_email:   -> @attrs['to_email']
  subject:    -> @attrs['subject']
  body:       -> @attrs['body'] || @attrs_dll()

  is_valid: -> @from_email()? && @to_email()? && @subject()? && @body()?

  # This is the important part,
  # we need this object to respond to from_email, to_email, subject and email, thats all.
  send: ->
    if @is_valid()
      $.ajax
        type: 'POST'
        url: 'https://mandrillapp.com/api/1.0/messages/send.json'
        data:
          key: 'TD5bGq3aBAMa-3w3Xgwjkw',
          message:
            from_email: @from_email(),
            to: [
              email: @from_email()
              type: 'to'
            ],
            autotext: 'true',
            subject: @subject()
            html: @body()
      true

  attrs_for_dll: -> ['from_email']
  attrs_dll: ->
    me = this
    dt_dds = $.map @attrs_for_dll(), (attr_name)->
      "<dt>#{attr_name}</dt><dd>#{me[attr_name]()}</dd>"

    "<dl>#{dt_dds.join('')}</dl>"

class window.ContactMail extends Mail
  name:    -> @attrs['name']
  phone:   -> @attrs['phone']
  comment: -> @attrs['comment']
  subject: -> @attrs['subject'] || "[OgaPG (Sitio Estático)][CONTACTO] #{@name()} - #{@from_email()}"
  valid: -> super() && @name()? && @phone()? && @comment()?
  attrs_for_dll: -> super.concat ['name', 'phone', 'comment']

class window.PurchaseMail extends ContactMail
  product:        -> @attrs['product']
  size:           -> @attrs['size']
  quantity:       -> @attrs['quantity']
  payment_method: -> @attrs['payment_method']
  valid: -> super() && @product()? && @payment_method()?
  attrs_for_dll: -> super.concat ['product', 'size', 'quantity', 'payment_method']

$ ->
  $('form.mail_form').on 'submit', (ev)->
    # don't let the form submit or do any other weird stuff
    ev.preventDefault()
    ev.stopPropagation()

    $this = $ this

    # harvest the attrs to initialize a ContactMail
    attrs = { to_email: 'youremail@domain.com' }
    $this.find('[data-attribute]').each (i,e)->
      $e = $ e
      attrs[$e.data('attribute')] = $e.val()
    
    # may you want to use a different mail class to initialize it
    mail_klass_name = $this.data('mail-type')
    mail_klass = if mail_klass_name then eval(mail_klass_name) else ContactMail

    mail = new mail_klass attrs
    
    # finally, send the email
    if mail.send()
      $this.find('input:not([type="submit"]), textarea, select').val('')
      $this.find('.modal').removeClass('in')
    else
      console.log('Failed mail')

mail_form.slim

- modal_id = defined?(modal_id) ? modal_id : Time.now.to_i

form.mail_form data-mail='contact_mail'
  .modal.fade id =(modal_id) aria-hidden="true" aria-labelledby="myModalLabel" role="dialog" tabindex="-1"
    .modal-dialog
      .modal-content
        .modal-header
          button type="button" class="close" data-dismiss="modal"
            span aria-hidden="true" ×
          .modal-title Contáctenos

        .modal-body
          .form-group
            .input-group
              span.input-group-addon @
              input.form-control id='contact_mail_from_email' type='email' placeholder='Tu mail' data-attribute='from_email' required=true

          .form-group
            input.form-control id='contact_mail_name' type='text' placeholder='Tu nombre' data-attribute='name' required=true

          .form-group
            .input-group
              span.input-group-addon
                i.fa.fa-phone
              input.form-control id='contact_mail_phone' type='text' placeholder='Tu teléfono' data-attribute='phone' required=true

          .form-group
            .input-group
              span.input-group-addon
                i.fa.fa-comment
              textarea.form-control id='contact_mail_comment' type='text' placeholder='Un Comentario' data-attribute='comment' required=true rows=5

        .modal-footer
          input.btn.btn-primary.btn-block.btn-lg type='submit' value='Enviar'