Ajaxify your site with remote => true and respond_to block into an pop up modal

_contact_popup.html.haml

= form_for :contact_us, url: contact_board_path, id: 'contact--form', remote: true do |f|
  .form--section-content
    = f.label :name_surname
    = f.text_field :name_surname, required: true
  .form--section-content
    = f.label :email
    = f.text_field :email, required: true, type: 'email'
  .form--section-content
    = f.label :message
    = f.text_area :message, required: true
  .btn--wrap.btn--fix-width
    = f.submit Submit

_modal.html.haml

.section--modal
  .modal--wrapper
    .modal--overlay
    .modal
      .modal--box
        .modal--x
          %span 
            x
        .modal--content
          .modal--id{:id => m_id}

_modal.scss

.section--modal {
  display: none;
}
.modal--wrapper {
  overflow: auto;
  .modal--overlay {
    background-color: rgba(white, 0.8);
    background-color: rgba(116, 99, 99, 0.65);
    background-color: rgba(0, 0, 0, 0.85);
  }
}

.modal--wrapper,
.modal--overlay {
  position: fixed;
  right: 0;
  top: 0;
  bottom: 0;
  left: 0;
  z-index: 9998;
}

.modal {
  max-width: 900px;

  margin: 0 auto;
  margin: 20vh auto;
  position: relative;
  border: 0;
  background-color: #f5f5f5;
  z-index: 9999;

  .modal--x {
    top: 0;
    right: 0;
    width: 50px;
    height: 50px;
    background: none;
    position: absolute;
    cursor: pointer;
    display: block;
    background-color: #343434;
    
    &:hover {
      background-color: red;
    }

    span {
      font-family: $roboto;
      font-weight: 700;
      display: block;
      font-size: 32px;
      color: white;
      z-index: 1000;
      position: absolute;
      left: 50%;
      top: 50%;
      transform: translate(-50%, -50%);
    }
  }
  .modal--box {
    position: relative;
  }

  .modal--content {
    padding: rem(100) 18.75%;

    @include mq('tablet-wide', min) {
      padding-left: 22.22222222222222%;
      padding-right: 22.22222222222222%
    }

  }
}

contact.html.haml

//render partial and give it an id
= render partial: 'layouts/modal', locals: {m_id: 'contact--form-modal'}

// link to call the modal popup
= link_to 'Open Modal', contact_popup_path, remote: true, target: '_blank'

contact.popup.js.haml

var contactFormModal = $('#contact--form-modal');
contactFormModal.html('#{j render partial: "navigation/contact/contact_popup" }');

$('.section--modal').show();

contact_board.js.haml

removeInside($('.modal--id'));
$('.section--modal').hide();

controller.rb

#create form
def contact_popup
    respond_to do |format|
      format.js {
        #you need to do it if you place the .js files in other folder then the controller nows about
        #otherwise it will say that contact_popup can't be found
        render(template: 'navigation/contact/contact_popup', layout: false)
      }
    end
  end
  
  #submit form
  def contact_board
    name = params[:contact_us]['name_surname']
    email = params[:contact_us]['email']
    body = params[:contact_us]['message']
    ContactUsMailer.send_email(name, email, body)

    respond_to do |format|
      format.js {
        render(template: 'navigation/contact/contact_board',
         layout: false)
      }
    end
  end

routes.rb

    get 'contact', to: 'navigation#contact', as: 'contact'
    post 'contact', to: 'navigation#contact_board', as: 'contact_board', defaults: {format: 'js'}
    get 'contact-popup', to: 'navigation#contact_popup', as: 'contact_popup', defaults: {format: 'js'}