Cách tạo hộp thoại modal popup contact form

Bạn có thể kết hợp hộp thoại modal và những bài viết hướng dẫn của mình trong chuyên mục Thiết kế Contact Form để tận dùng hộp thoại modal chèn contact form vào đó giúp độc giả liên hệ ngay khi click vào liên kết liên hệ thay vì phải chuyển hướng đến trang liên hệ.

Cách tạo hộp thoại modal popup contact form

Bước 1: Chèn modal html trong theme trước thẻ đóng </body>

Style 1

<div class="modal--target modal--html" id="contact">

  <div class="modal--confirm">

    <form action="" class="modal--dialog green" methor="POST" name="contact-form" target="hidden_iframe">

      <div class="_3em"></div>

      <div class="modal--content">

        <div class="modal--header">

          <div class="_mht">Biểu mẫu liên hệ</div>

          <div class="_mhc modal--icon modal--close"></div>

        </div>

        <div class="modal--body">

          <div class="form-group mr-10">

            <div class="input-group pd-10 w-50">

              <div class="input-title">Họ tên <span>*</span></div>

              <input autocomplete="off" class="input" name="" placeholder="Câu trả lời của bạn..." required="" spellcheck="false" type="text" value=""/>

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

            </div>

            <div class="input-group pd-10 w-50">

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

              <input autocomplete="off" class="input" name="" placeholder="Câu trả lời của bạn..." required="" spellcheck="false" type="text" value=""/>

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

            </div>

            <div class="input-group pd-10 w-50">

              <div class="input-title">Địa chỉ liên lạc</div>

              <input autocomplete="off" class="input" name="" placeholder="Câu trả lời của bạn..." spellcheck="false" type="text" value=""/>

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

            </div>

            <div class="input-group pd-10 w-50">

              <div class="input-title">Địa chỉ email <span>*</span></div>

              <input autocomplete="off" class="input" name="" placeholder="Câu trả lời của bạn..." required="" spellcheck="false" type="text" value=""/>

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

            </div>

            <div class="input-group pd-10 w-100">

              <div class="input-title">Yêu cầu khác</div>

              <textarea class="input textarea" name="" placeholder="Câu trả lời của bạn..." spellcheck="false" value=""></textarea>

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

            </div>

            <div class="input-group pd-10 checked w-100">

              <input class="checkbox" id="checkbox" name="checkbox" required="" type="checkbox"/>

              <label for="checkbox">Tôi đã đọc và đồng ý với <a href="/p/chinh-sach-noi-dung.html" title="chính sách và điều khoản trang web" rel="noopener" target="_blank">chính sách và điều khoản trang web</a></label>

            </div>

          </div>

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

        </div>

        <div class="modal--footer"><button class="modal--close" type="button">Hủy</button><button type="submit">Gửi</button></div>

      </div>

      <div class="_3em"></div>

    </form>

  </div>

</div>

Style 2

<div class="modal--target modal--html" id="contact">

  <div class="modal--confirm">

    <form action="" class="modal--dialog blue" methor="POST" name="contact-form" target="hidden_iframe">

      <div class="_3em"></div>

      <div class="modal--content">

        <div class="modal--header">

          <div class="_mht">Biểu mẫu liên hệ</div>

          <div class="_mhc modal--icon modal--close"></div>

        </div>

        <div class="modal--body">

          <div class="form-group mr-10">

            <div class="input-group pd-10 w-50">

              <div class="input-title">Họ tên <span>*</span></div>

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

            </div>

            <div class="input-group pd-10 w-50">

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

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

            </div>

            <div class="input-group pd-10 w-50">

              <div class="input-title">Địa chỉ liên lạc</div>

              <input autocomplete="off" class="input-text" name="" placeholder="Câu trả lời của bạn..." spellcheck="false" type="text" value=""/>

            </div>

            <div class="input-group pd-10 w-50">

              <div class="input-title">Địa chỉ email <span>*</span></div>

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

            </div>

            <div class="input-group pd-10 w-100">

              <div class="input-title">Yêu cầu khác</div>

              <textarea class="input-text textarea" name="" placeholder="Câu trả lời của bạn..." spellcheck="false" value=""></textarea>

            </div>

            <div class="input-group pd-10 checked w-100">

              <input class="checkbox" id="checkbox" name="checkbox" required="" type="checkbox"/>

              <label for="checkbox">Tôi đã đọc và đồng ý với <a href="/p/chinh-sach-noi-dung.html" title="chính sách và điều khoản trang web" rel="noopener" target="_blank">chính sách và điều khoản trang web</a></label>

            </div>

          </div>

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

        </div>

        <div class="modal--footer"><button class="modal--close" type="button">Hủy</button><button type="submit">Gửi</button></div>

      </div>

      <div class="_3em"></div>

    </form>

  </div>

</div>

Lưu ý: Các bạn kiểm tra nếu chưa chèn thẻ iframe, thì chèn vào nhé

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

Bước 2: Chèn liên kết mở modal form

<div class="theme-button green modal--open" role="button" data-target="#contact">Liên hệ</div>

Hoặc

<a class="theme-button green modal--open" role="button" href="#contact" title="Liên hệ">Liên hệ</a>

Bước 3: Thêm script submit form

Chèn đoạn script bên dưới modal html trong bước 1

<script>//<![CDATA[

$('form[name=contact-form]').on('submit', function() {

  var $this = $(this)

  $this.addClass('processing')

  $this.find('.background-overlay').removeClass('hidden')

  function oneprocess(callback) {

    setTimeout(function() {

      $this.removeClass('processing').addClass('success')

      callback()

    }, 4000)

  }

  function twoprocess() {

    setTimeout(function() {

      $this.removeClass('success');

      $this.find('.background-overlay').addClass('hidden')

      $this[0].reset()

      console.clear()

    }, 4000)

  }

  oneprocess(twoprocess)

})

//]]></script>