KI/resources/views/layout/contacto.blade.php

<div id="contacto">
  <div class="ui container">
    <div class="ui header">
      CONTACTO
    </div>
    <div class="ui two columns stackable grid">
      <div class="column">
        <form id="contacto_form" method="post" class="ui form">
          <div class="ui grid">
            <div class="eight wide column">
              <div class="input">
                <input type="text" name="nombre" placeholder="Nombre" />
              </div>
            </div>
            <div class="eight wide column">
              <div class="input">
                <input type="text" name="mail" placeholder="Mail" />
              </div>
            </div>
            <div class="sixteen wide column">
              <div class="input">
                <textarea name="mensaje" rows="2" placeholder="Mensaje"></textarea>
              </div>
            </div>
            <div class="four wide column">
              <button class="ui button">
                Enviar
              </button>
            </div>
            <div class="ui message transition hidden" id="mensaje_contacto">
              <i class="close icon"></i>
              <span id="msg"></span>
            </div>
          </div>
        </form>
      </div>
      <div class="column">
        <div class="ui center aligned grid">
          <div class="eight wide column left aligned">
            <p>
              Av. Calle 123, Comuna, RM
              <br />
              <a href="mailto:contacto@capitalinvestments.cl">
                contacto@capitalinvestments.cl
              </a>
              <br />
              <a href="tel:56222222222">+56 2 2222 2222</a>
            </p>
            <p>
              <a href="youtube">
                <i class="youtube icon"></i>
              </a>
              <a href="instagram">
                <i class="instagram icon"></i>
              </a>
              <a href="facebook">
                <i class="facebook f icon"></i>
              </a>
              <a href="linkedin">
                <i class="linkedin icon"></i>
              </a>
              <a href="twitter">
                <i class="twitter icon"></i>
              </a>
            </p>
          </div>
        </div>
      </div>
    </div>
  </div>
</div>

@push('scripts')
  <script type="text/javascript">
    var contacto = {
      id: "contacto_form",
      data: {
        nombre: '',
        mail: '',
        mensaje: ''
      },
      output: {
        id: 'mensaje_contacto',
        success: 'Mensaje enviado.',
      },
      url: '{{$urls->base}}/contacto',
      getData: () => {
        var form = $(contacto.id)

        contacto.data.nombre = form.find("[name='nombre']").val()
        contacto.data.mail = form.find("[name='mail']").val()
        contacto.data.mensaje = form.find("[name='mensaje']").val()
      },
      send: () => {
        $.post(contacto.url, contacto.data, (data) => {
          $(contacto.output.id).find('#msg').html(contacto.output.success)
          $(contacto.output.id).addClass('success').removeClass('hidden').show()
          $(contacto.output.id).find('.close').click(function() {
            $(contacto.output.id).find('#msg').html('')
            $(contacto.output.id).addClass('hidden').removeClass('success error')
          })
        }, 'json')
      },
      checkIds: () => {
        if (contacto.id.indexOf('#') < 0) {
          contacto.id = '#' + contacto.id
        }
        if (contacto.output.id.indexOf('#') < 0) {
          contacto.output.id = '#' + contacto.output.id
        }
      },
      setup: () => {
        contacto.checkIds()
        $(contacto.id).submit((e) => {
          e.preventDefault()

          contacto.getData()
          contacto.send()
          return false
        })
      }
    }
    $(document).ready(() => {
      contacto.setup()
    })
  </script>
@endpush