Thêm hiệu ứng submit form chuyên nghiệp vào biểu mẫu contact form

Các mẫu form liên hệ không mấy khi sử dụng hiệu ứng submit và như vậy trông nó rất đơn điệu không có thẩm mỹ và không chuyên nghiệp. Vậy tại sao bạn không thêm nó vào để cho chuyên nghiệp hơn?

Vậy hiệu ứng submit form sẽ xảy ra khi nào? Đó là khi người dùng hoàn thành biểu mẫu điền vào các thẻ input bắt buộc hoặc không bắt buộc trước khi nhấp vào nút gửi đi lúc đó hiệu ứng submit form bắt đầu xuất hiện trong một khoảng thời gian nhất định.

Tác dụng khi sử dụng hiệu ứng submit form

1. Đẹp: Đầu tiên đã nói đến hiệu ứng thì nó phải đẹp trước, và tùy theo cảm nhận của mỗi người mà chỉnh style cho phù hợp
2. Chuyên nghiệp: Khi hiệu ứng submit form được kích hoạt tạo cảm giác cho người gửi đang đợi cho quá trình gửi thông tin của mình trước khi thông báo đã gửi thành công.
3. Ngăn chỉnh sửa thông tin đã điền: Khi ai đó đã điền đầy đủ thông tin vào form và nhấn gửi đi hiệu ứng submit form được kích hoạt sẽ chặn không cho chỉnh sửa thông tin đã điền, phải đợi thông tin đó được gửi đi thành công sau khi form được reset lại mới điền và gửi lại được nếu có nhu cầu.
4. Reset lại form: Form sẽ tự làm mới lại sau một khoảng thời gian khi thông báo gửi thành công mà không phải tải lại trang

Để bạn đọc dễ hình dung mình tạo ngay cái demo dưới đây như sau:

1. Hiệu ứng load form sau khi nhấn gửi thông báo đang gửi

2. Thông báo gửi đi thành công

Cách thực hiện

Giả sử chúng ta sẽ chèn một biểu mẫu form liên hệ vào trong template như sau:

<div class="contact-form">

  <form action="#" class="form" method="POST" target="hidden_iframe">

    <div class="form-title">Tên</div>

    <div class="form-group">

      <input aria-label="Tên" autocomplete="off" name="name" placeholder="Câu trả lời của bạn..." required="" type="text" value=""/>

      <i class="bar"></i>

    </div>

    <div class="form-title">Email</div>

    <div class="form-group">

      <input aria-label="Email" autocomplete="off" name="email" placeholder="Câu trả lời của bạn..." required="" type="text" value=""/>

      <i class="bar"></i>

    </div>

    <div class="form-title">Số điện thoại</div>

    <div class="form-group">

      <input aria-label="Số điện thoại" autocomplete="off" name="phone" required="" type="text" value=""/>

      <i class="bar"></i>

    </div>

    <div class="form-title">Ghi chú</div>

    <div class="form-group textarea">

      <textarea aria-label="Ghi chú" autocomplete="off" name="content" placeholder="Câu trả lời của bạn..." required="" value=""></textarea>

      <i class="bar"></i>

    </div>

    <div class="form-submit">

      <button class="theme-button green" aria-label="Gửi" type="submit">Gửi</button>

    </div>

    <div class="background-overlay hidden"></div>

  </form>

</div>

<iframe border='0' height='0' name='hidden_iframe' style='display: none;' width='0'></iframe>

Sau khi ai đó điền vào biểu mẫu nhấn vào button Gửi, chúng ta sẽ viết script thêm class vào form để hiệu ứng xảy ra

<script>//<![CDATA[

$('.contact-form form').on('submit', function() {

  $(this).addClass('processing');

  $('.background-overlay').removeClass('hidden');

  function one(callback) {

    setTimeout(function() {

      $('.contact-form form').removeClass('processing').addClass('success');

      callback();

    }, 4000);

  }

  function two() {

    setTimeout(function() {

      $('.contact-form form').removeClass('success');

      $('.background-overlay').addClass('hidden');

      $('.contact-form form')[0].reset();

      console.clear();

    }, 4000);

  }

  one(two)

});

//]]></script>

Thêm style cho hiệu ứng submit form

<style type='text/css'>

.contact-form{position:relative}

.processing:before,.processing:after,.success:before,.success:after{position:absolute;z-index:99;pointer-events:none}

.processing:before{top:calc(50% - 15px);left:calc(50% - 15px);content:'';border-top:3px solid #33b5e5!important;border-right:3px solid #33b5e5!important;border-bottom:3px solid #33b5e5!important;border-left:3px solid #fff;animation:spin .6s infinite linear;border-radius:50%;width:30px;height:30px}

.success:before{content:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiFdpDVKyWpntjdOe9vb-gZ_ESaXd7eGwdR_prRB4rYCG8FlflAxj4EO_XDR34J8zaoraZrfIjtDxy-5rrLIetsls43bJTJ76lWsc28fF31dr3dlbK1zhN-u1238QfadAt_wXyZSGyPrWgp/s46/icon-check.png)}

.processing:after,.success:after{margin-top:35px;color:#fff}

.processing:after,.success:before,.success:after{top:50%;left:50%;transform:translate(-50%,-50%)}

.processing:after{content:'Đang gửi...'}

.success:after{content:'Đã gửi thành công!'}

.background-overlay{top:0;left:0;width:100%;height:100%;z-index:8;overflow:hidden;position:absolute;background:#0b0b0b;opacity:.6;transition:opacity .25s}

.hidden{display:none!important}

@keyframes spin{0%{transform:rotate(0deg)}100%{transform:rotate(360deg)}}

</style>

Kiểm tra