Hôm nay vô tình mình thấy được 1 số mẫu contact form khá đẹp, vì thế mình quyết định sẽ lấy nó về và css lại cho phù hợp với wordpress. Các bạn nếu thấy nó đẹp thì có thể copy về dùng nhé.

Mẫu contact form 7 số 1

Mẫu contact form7 số 1

Với mẫu này thì các bạn tạo giúp mình 1 cf7 với các field như sau nhé:

<div class="side-pttuan">
<div class="togglea"><i class="fa fa-envelope" aria-hidden="true"></i></div>
<h2>Liên hệ với chúng tôi</h2>
[text* text-854 class:hoten akismet:author "Họ và tên"]
[email* email-60 class:email akismet:author_email "Email của bạn"]
[tel* tel-113 class:sdt placeholder "Số điện thoại"]
[textarea textarea-269 class:yc placeholder "Yêu cầu"]
[submit class:gyc "Gửi yêu cầu"]
</div>

Sau đó chúng ta sẽ tiến hành CSS cho nó.

<style>
	.side-pttuan{
		width:30%;
	}
	.wpcf7-form-control.gyc{
		width:100%;
	}
	.side-pttuan{
		position: fixed;
		top: 50%;
		left: -350px;
		transform: translateY(-50%);
		width: 350px;
		height: auto;
		padding: 40px;
		background: #fff;
		box-shadow: 0 20px 50px rgb(0 0 0 / 50%);
		box-sizing: border-box;
		transition: 0.5s;
	}
	.togglea {
		position: absolute;
		height: 48px;
		width: 48px;
		text-align: center;
		cursor: pointer;
		background: #f00;
		top: 0;
		right: -48px;
		line-height: 48px;
	}
	.togglea i {
		font-size: 18px;
		color: #fff;
	}
	.side-pttuan.active {
		left: 0;
	}
</style>

Và cuối cùng là thêm 1 đoạn script nho nhỏ cho nó nữa là xong

<script>
jQuery(document).ready(function ($) {
  $('.togglea').click(function(){
    $('.side-pttuan').toggleClass('active');
    $('.togglea').toggleClass('active');
  })
})
</script>

Chúc các bạn thành công nhé.

Các bạn có thể xem hướng dẫn tại link youtube sau: https://youtu.be/6gNXWRBuqyE

5 thoughts on “Mẫu contact form 7 đẹp cho wordpress

  1. Nguyen Quang Tu says:

    Bác ơi, có cách nào lúc bấm gửi đi thì có thông báo thành công không. Hiện tại code này lúc gửi đi có thành công hay không cũng không thấy báo

    • Thành Tuấn says:

      Rất xin lỗi bạn nếu như QC làm bạn không thể đọc được bài. Để tải code bạn có thể click vào button tải ngay ở bên dưới á. Mong bạn thông cảm, vì mình đang test 1 số tính năng mới nên chưa có thời gian để loại bỏ phiền phức này.

      • Huấn says:

        cho mình hỏi sao khi gửi thành công thì cái thông báo thành công ko nằm luôn ở dưới nút Gửi yêu cầu mà lại bị nằm cố định dưới footer, có cách nào fix không hay do mình setup sai nhỉ?

Trả lời

Email của bạn sẽ không được hiển thị công khai. Các trường bắt buộc được đánh dấu *