Hướng dẫn tạo form liên hệ theo phong cách material design với hiệu ứng popup

Nhằm mang đến sự tươi mới và bổ sung cho bộ sưu tập Contact Form được phong phú, cập nhật theo xu hướng hiện đại với giao diện phẳng sử dụng thiết kế material design hiện nay. Do đó mình có thiết kế biểu mẫu liên hệ cho Blog theo phong cách material design với hiệu ứng popup khi click chuột. Thông thường thì chúng ta hay sử dụng biểu mẫu liên hệ theo dạng tiện ích bên sidebar hoặc tạo một trang liên hệ. Điều này vô tình làm cho form này bị cố định nhưng khi sử dụng form với hiệu ứng popup thì chúng ta có tể đặt ở bất cứ đâu, có thể ở trang chủ, trang bài viết, trang tĩnh... Hiểu theo cách đơn giản thì gọi là nút liên hệ và khi click chuột vào đó sẽ mở form liên hệ.

Để thêm được biểu mẫu liên hệ như đã giới thiệu bạn cần làm theo những bước sau đây:

Bước 1: Thêm tiện ích Biểu mẫu liên hệ

Việc này rất đơn giản chỉ cần vào bố cục thêm tiện ích Biểu mẫu liên hệ vào bất cứ chỗ nào có thể thêm được có thể là sidebar hoặc footer.

Bước 2: Chỉnh sửa lại tiện ích

Vào chủ đề chỉnh sửa HTML trên thanh công cụ Chuyển đến tiện ích bấm chọn ContactForm1 sau đó bấm mở rộng widget ra xóa bỏ đoạn dưới đây

Copy

  <b:if cond='data:title != &quot;&quot;'>

    <h2 class='title'><data:title/></h2>

  </b:if>

  <div class='contact-form-widget'>

    <div class='form'>

      <form name='contact-form'>

        <p/>

        <data:contactFormNameMsg/>

        <br/>

      

 <input class='contact-form-name' expr:id='data:widget.instanceId +

&quot;_contact-form-name&quot;' name='name' size='30'

type='text' value=''/>

        <p/>

        <data:contactFormEmailMsg/> <span style='font-weight: bolder;'>*</span>

        <br/>

      

 <input class='contact-form-email' expr:id='data:widget.instanceId +

&quot;_contact-form-email&quot;' name='email' size='30'

type='text' value=''/>

        <p/>

        <data:contactFormMessageMsg/> <span style='font-weight: bolder;'>*</span>

        <br/>

      

 <textarea class='contact-form-email-message' cols='25'

expr:id='data:widget.instanceId +

&quot;_contact-form-email-message&quot;' name='email-message'

rows='5'/>

        <p/>

        <input

class='contact-form-button contact-form-button-submit'

expr:id='data:widget.instanceId +

&quot;_contact-form-submit&quot;'

expr:value='data:contactFormSendMsg' type='button'/>

        <p/>

        <div style='text-align: center; max-width: 222px; width: 100%'>

        

 <p class='contact-form-error-message'

expr:id='data:widget.instanceId +

&quot;_contact-form-error-message&quot;'/>

          <p

 class='contact-form-success-message' expr:id='data:widget.instanceId +

&quot;_contact-form-success-message&quot;'/>

        </div>

      </form>

    </div>

  </div>

  <b:include name='quickedit'/>

Sau khi xóa bỏ thì tiện ích chỉ còn đoạn tương tự bên dưới

Copy

<b:widget id='ContactForm1' locked='false' title='Biểu mẫu liên hệ' type='ContactForm' version='1'>

            <b:includable id='main'>

</b:includable>

          </b:widget>

Bạn thêm style='display:none' đằng sau chữ version='1' để cho tiện ích này ẩn hoàn toàn ở bất kỳ trang nào xong lưu lại.

Bước 3: Thêm style cho form liên hệ

Phần đặt nút liên hệ bạn xem cần đặt tại trang nào thì nên sử dụng thẻ <b:if> </b:if> bên dưới </b:skin> còn muốn đặt bất cứ trang nào thì để style trong <b:skin></b:skin>. Đoạn CSS cần chèn là:

Copy

.img-replace{display: inline-block;overflow: hidden;text-indent: 100%;color: transparent;white-space: nowrap}

.cd-nugget-info{text-align: center;position: absolute;width: 100%;height: 50px;line-height: 50px;bottom: 0;left: 0}

.cd-nugget-info a{position: relative;font-size: 14px;color: #5e6e8d;-webkit-transition: all 0.2s;-moz-transition: all 0.2s;transition: all 0.2s}

.no-touch .cd-nugget-info a:hover{opacity: .8;}

.cd-nugget-info span {vertical-align: middle;display: inline-block}

.cd-nugget-info span svg{display: block;}

.cd-nugget-info .cd-nugget-info-arrow{fill: #5e6e8d}

.cd-popup{position: fixed;z-index: 10;left: 0;top: 0;height: 100%;width: 100%;background-color: rgba(94, 110, 141, 0.9);opacity: 0;visibility: hidden;-webkit-transition: opacity 0.3s 0s, visibility 0s 0.3s;-moz-transition: opacity 0.3s 0s, visibility 0s 0.3s;transition: opacity 0.3s 0s, visibility 0s 0.3s}

.cd-popup.is-visible{opacity: 1;visibility: visible;-webkit-transition: opacity 0.3s 0s, visibility 0s 0s;-moz-transition: opacity 0.3s 0s, visibility 0s 0s;transition: opacity 0.3s 0s, visibility 0s 0s;}

.cd-popup-container {height: 450px;background: transparent url(https://i.imgur.com/WuRQfYN.jpg) no-repeat;color:#fff;position: relative;width: auto;height: 450px;max-width: 500px;margin: 4em auto;text-align: left;padding:25px;}

.cd-popup-container .cd-popup-close {position: absolute;top: 8px;right: 8px;width: 30px;height: 30px;}

.cd-popup-container .cd-popup-close::before, .cd-popup-container .cd-popup-close::after {content: '';position: absolute;top: 12px;width: 14px;height: 2px;background-color: #fff}

.cd-popup-container .cd-popup-close::before {-webkit-transform: rotate(45deg);-moz-transform: rotate(45deg);-ms-transform: rotate(45deg);-o-transform: rotate(45deg);transform: rotate(45deg);left: 8px}

.cd-popup-container .cd-popup-close::after{-webkit-transform: rotate(-45deg);-moz-transform: rotate(-45deg);-ms-transform: rotate(-45deg);-o-transform: rotate(-45deg);transform: rotate(-45deg);right: 8px;}

.is-visible .cd-popup-container{-webkit-transform: translateY(0);-moz-transform: translateY(0);-ms-transform: translateY(0);-o-transform: translateY(0);transform: translateY(0);}



.blanterinput {float: none;position: relative;margin-bottom: 45px;margin-right: 10px}

.blanterinput input,.blanterinput textarea {background: transparent;color: #fff;font-size: 15px;padding: 15px 0;display: block;width: 100%;border: none;border-bottom: 1px solid #fff}

.blanterinput input:focus,.blanterinput textarea:focus {outline: none}

.blanterinput label {color:#fff;font-size: 15px;font-weight: 400;position: absolute;pointer-events: none;left: 0;top: 10px;transition: .2s ease all}

.blanterinput input:focus ~ label,.blanterinput input:valid ~ label,.blanterinput textarea:focus ~ label,.blanterinput textarea:valid ~ label{top: -20px;font-size: 14px;color: #fff}

.bar {position: relative;display: block;width: 100%}

.bar:before,.bar:after {content: '';height: 2px;width: 0;bottom: 1px;position:absolute;background:transparent;transition: .2s ease all}

.bar:before {left: 50%}

.bar:after {right: 50%}

.blanterinput input:focus ~ .bar:before,.blanterinput input:focus ~ .bar:after,.blanterinput textarea:focus ~ .bar:before,.blanterinput textarea:focus ~ .bar:after {width: 50%}

.highlight {position: absolute;height: 50%;width: 100px;top: 25%;left: 0;pointer-events: none;opacity: .5}

.blanterinput input:focus ~ .highlight,.blanterinput textarea:focus ~ .highlight {animation: inputHighlighter .3s ease}

.blanterinput input:focus ~ label,.blanterinput input:valid ~ label,.blanterinput textarea:focus ~ label,.blanterinput textarea:valid ~ label {top: -20px;font-size: 13px;color:#fff}

input#ContactForm1_contact-form-email-message{height: 150px}

input#ContactForm1_contact-form-submit{color: #fff!important;background:transparent;border-radius: 4px;border: none;outline: none;cursor: pointer;transition: all .4s ease-in-out;text-transform: uppercase;float:left}

#ContactForm1_contact-form-error-message {float: right;background:transparent;color: #fff;font-size: 13px;font-weight: 700;border-radius: 3px;border:none}

#ContactForm1_contact-form-success-message{float: right;background:transparent;color: #fff;font-size: 13px;font-weight: 700;border-radius: 3pxborder:none}

i.material-icons {font-size: 18px;vertical-align: text-bottom}

Bước 4: Thêm Material+Icons

Thêm đoạn javascript bên dưới sau </b:skin> và trước </head>

Copy

<script type='text/javascript'>

//<![CDATA[

function loadCSS(e, t, n) { "use strict"; var i = window.document.createElement("link"); var o = t || window.document.getElementsByTagName("script")[0]; i.rel = "stylesheet"; i.href = e; i.media = "only x"; o.parentNode.insertBefore(i, o); setTimeout(function () { i.media = n || "all" }) } loadCSS("//fonts.googleapis.com/icon?family=Material+Icons");

//]]>

</script>

Bước 5: Thêm form

Chèn đoạn bên dưới vào trước thẻ đóng </body>

Copy

<script type='text/javascript'>

//<![CDATA[

    jQuery(document).ready(function($) {

        $('.contact-popup').on('click', function(event) {

            event.preventDefault();

            $('.cd-popup').addClass('is-visible');

        });



        $('.cd-popup').on('click', function(event) {

            if ($(event.target).is('.cd-popup-close') || $(event.target).is('.cd-popup')) {

                event.preventDefault();

                $(this).removeClass('is-visible');

            }

        });



        $(document).keyup(function(event) {

            if (event.which == '27') {

                $('.cd-popup').removeClass('is-visible');

            }

        });

    });

//]]>

</script>

<div style="text-align: center;">

<a class="contact-popup" href="javascript:void(0);">Contact us</a>

</div>



<div class='cd-popup' role='alert'>

    <div class='cd-popup-container'>

        <div style='text-align: center;'> <span style='font-size: large;'>CONTACT US</span> </div>

        <br/>

        <form name="contact-form">

            <div class="blanterinput">

                <input class="validate" id="ContactForm1_contact-form-name" name="name" required="" type="text" value="" /> <span class="highlight"></span> <span class="bar"></span>

                <label><i class='material-icons'>person</i>&amp;nbsp;Name</label>

            </div>

            <div class="blanterinput">

                <input class="validate" id="ContactForm1_contact-form-email" name="email" required="" type="email" value="" /> <span class="highlight"></span> <span class="bar"></span>

                <label><i class='material-icons'>email</i>&amp;nbsp;Email</label>

            </div>

            <div class="blanterinput">

                <textarea class="validate" cols="25" id="ContactForm1_contact-form-email-message" name="email-message" required="" rows="5"></textarea> <span class="highlight"></span> <span class="bar"></span>

                <label><i class='material-icons'>mic</i>&amp;nbsp;Message</label>

            </div>

            <input id="ContactForm1_contact-form-submit" type="button" value="Send" />

            <div id="ContactForm1_contact-form-error-message"> </div>

            <div id="ContactForm1_contact-form-success-message"> </div>

        </form> <a class='cd-popup-close img-replace' href='javascript:void(0);' /> </div>

</div>

Bước 6: Đặt nút liên hệ

Bạn có thể đặt nút này ở bất kỳ vị trí nào và có thể trong bài viết, đoạn cần chèn là

Copy

<a class="contact-popup" href="javascript:void(0);">Contact us</a>

Nếu bạn muốn làm nổi bật nút liên hệ có thể sử dụng style sau:

Copy

.contact-popup{color: #fff!important;background: #07ACEC;padding: 7px 20px;border-radius: 4px;border: none;outline: none;box-shadow: 0 2px 5px 0 rgba(0, 0, 0, 0.16), 0 2px 10px 0 rgba(0, 0, 0, 0.12);cursor: pointer;transition: all .4s ease-in-out;text-transform:uppercase}

.contact-popup:hover{background-color:#07ACEC}

Ví dụ mình sử dụng trong bài viết bằng nút Demo bên dưới

Contact us

Như vậy với 6 bước thiết lập bạn đã thêm được Biểu mẫu liên hệ rất ấn tượng và chuyên nghiệp. Hi vọng bài viết này sẽ giúp ích bạn.

CONTACT US

person  Name

email  Email

mic  Message

Baca juga