Nội dung

Những đoạn code hay dùng cho contact form 7

6 tháng trước, Code plugin wordpress, Code theme wordpress, Plugin, 1014 Lượt xem

Đăng ký cập nhập video từ netweb.vn

Tổng hợp những đoạn code hay cho contact form 7, trong quá trình code web cho khách hàng, netweb sẽ cập nhập những đoạn code cf7 sử dụng lại thường xuyên ở bài này cho các bạn tiện theo dõi.

Chèn shortcode cho cf7

<?php echo do_shortcode('[contact-form-7 id="215" title="Báo giá vụ việc"]'); ?>

Form mẫu báo giá vụ việc

<div class="orderlist"><span>1. Thông tin khách hàng</span></div>
<p class="note">Thông tin cá nhân của bạn được bảo mật tuyệt đối. Chúng tôi cam kết chỉ sử dụng thông tin này cho mục đích xác nhận thông tin với Luật sư</p>

  <div class="row">
    <div class="col-sm-6">

      Họ và tên <span class="red"> *</span>
      [text* ho-ten id:ho-ten placeholder "Nhập họ tên"]
      

      Điện thoại <span class="red"> *</span>
      [tel* sdt id:phone placeholder "Nhập điện thoại"]
      

    </div>
    <div class="col-sm-6">

       Nhập email <span class="red"> *</span>
      [email* email id:email-1 placeholder "Nhập email của bạn"]
     

      Tỉnh thành: <span class="red"> *</span>
      [select* tinh-thanh id:tinh-thanh "Hà Nội" "Hồ Chí Minh" "Đà Nẵng" "Cần Thơ"]
      

    </div>
  </div>

<div class="orderlist"><span>2. Thông tin vụ việc</span></div>

Tiêu đề câu hỏi
[text tieu-de id:tieu-de placeholder "Nhập tiêu đề câu hỏi"]

Lĩnh vực tư vấn: <span class="red"> *</span>
[select* linh-vuc id:linh-vuc "Dân sự" "Hình sự" "Hôn nhân" "Đất đai" "Lao động" "Doanh nghiệp"]

Nội dung vụ việc
[textarea noi-dung id:noi-dung placeholder "Nhập nội dung"]

Đính kèm tệp
[file* upfile]

<div class="orderlist"><span>3. Ghi chú thêm</span></div>
[text ghi-chu-them id:ghi-chu-them placeholder "Nhập ghi chú"]

<div class="orderlist"><span>4. Mức giá mong muốn</span></div>
[select* muc-gia "Dưới 3.000.000đ" "Từ 3.000.000đ - 5.000.000đ" "Từ 5.000.000đ - 10.000.000đ" "Trên 10.000.000đ" "Giá thỏa thuận"]

<p class="note"> * Gửi yêu cầu đồng nghĩa với việc bạn đã đồng ý với <a href="#" target="_blank">điều khoản</a> và <a href="#" target="_blank">bảo mật dữ liệu</a> của chúng tôi.</p>


<div class="text-right"> 
[submit "Gửi yêu cầu"]
</div>

Css form báo giá vụ việc

<style>
    @media only screen and (min-width: 800px) {
      
    }
	
div#form-bao-gia input {
    width: 100%;
    margin-top: 6px;
    padding-left: 5px;
}
div#form-bao-gia select {
    width: 100%;
    margin-top: 6px;
    padding-left: 5px;
}

div#form-bao-gia textarea {
    width: 100%;
    margin-top: 6px;
    padding-left: 5px;
    height: 130px;
}
.orderlist {
    color: #0077c7;
    font-weight: bold;
    height: 18px;
    position: relative;
    margin-bottom: 10px;
}	
.orderlist:before {
    content: "";
    background: #e2e2e3;
    width: 100%;
    height: 1px;
    position: absolute;
    bottom: 10%;
    left: 0;
}

.orderlist span {
    position: absolute;
    left: 0;
    padding-right: 10px;
    background: #fff;
}	

.text-right {
    text-align: right;
}
	
input.wpcf7-form-control.wpcf7-submit {
    width: 100px !important;
    margin-bottom: 14px;
    background: #0077c7;
    color: #fff!important;
    font: 700 12px arial;
    padding: 10px 6px;
    border: none;
    cursor: pointer;
    display: inline-block;
}	
	
.panel-features {
    padding: 20px 8px;
    background-image: linear-gradient(to bottom,#0077c7,#006188);
    color: #fff;
}
	
.panel-features li h4 {
    font-size: 17px;
    line-height: 18px;
    color: #fff;
    font-weight: bold;
}

.panel-features h3 {
    margin-bottom: 20px;
    font-weight: bold;
    font-size: 17px;
    text-align: left;
}	
span.red {
    color: #ff0000;
}  
	
.form-fix {
    position: fixed;
    z-index: 9999;
}
	
</style>

<script>
$(window).scroll(function() {    
    var scroll = $(window).scrollTop();
     //console.log(scroll);
    if (scroll >= 200) {
        //console.log('a');
        $(".panel-features").addClass("form-fix");
    } else {
        $(".panel-features").removeClass("form-fix");
    }
});
</script>

Hình form hoàn thành

Bài viết mới cập nhập

  • Cách Tạo Popup Cho Website WordPress

    Cách Tạo Popup Cho Website WordPress

    6 ngày trước, 193 Lượt xem

    Xin chào các bạn, hôm nay netweb sẽ có 1 bài hướng dẫn các bạn cách tạo 1 popup cho website và sử dụng boostrap…

Bình luận trên facebook netweb.vn

Đam mê thiết kế web, kinh nghiệm 9 năm trong nghề thiết kế website, đang thiết kế web dạo tại netweb.vn, Callme: 08.9898.2526 (Mr Hải)