• Trang chủ
  • Windows
  • Mac OS
  • Điện thoại
  • Game hay
  • Thủ thuật
  • Website
  • Hướng dẫn
  • Tài liệu
Thursday, 1 May, 2025
Chia sẻ thủ thuật IT, tải phần mềm miễn phí
No Result
View All Result
  • Trang chủ
  • Windows
  • Mac OS
  • Điện thoại
  • Game hay
  • Thủ thuật
  • Website
  • Hướng dẫn
  • Tài liệu
  • Trang chủ
  • Windows
  • Mac OS
  • Điện thoại
  • Game hay
  • Thủ thuật
  • Website
  • Hướng dẫn
  • Tài liệu
No Result
View All Result
Chia sẻ thủ thuật IT, tải phần mềm miễn phí
No Result
View All Result
Home Hướng dẫn

Mẫu contact form 7 đơn giản và đẹp

Harris by Harris
26/05/2023
in Hướng dẫn, Tài liệu, Website
Reading Time: 4 mins read
0
huanvmdotcom chia se cf7 email dang ky dep
184
SHARES
575
VIEWS
Share to FacebookShare to TwitterPin on Pinterest

Mục lục bài viết

  1. Contact Form 7 là gì.?
  2. Chia sẻ mẫu contact form 7 đẹp với các bước làm đơn giản
    1. Bước 1: Tạo form mới
    2. Bước 2: Thay thế nội dung form mặc định
    3. Bước 3: Cấu hình Contact Form 7 để gửi Email không lỗi
    4. Bước 4: Thêm mã CSS cho Contact Form 7 vừa tạo
    5. Bước 5: Gắn Contact Form 7, Reload và Thưởng thức

Contact Form 7 là gì.?

Contact Form 7 hay còn gọi tắt là CF7 là một Plugin WordPress đến từ tác giả ở Nhật Bản. Plugin này sử dụng để tạo nhanh các biểu mẫu Form, Plugin này đã được sự tín nhiệm của hàng triệu Website và hàng triệu lượt cài đặt trên toàn thế giới.

mẫu contact form 7
Mẫu contact form 7

Chia sẻ mẫu contact form 7 đẹp với các bước làm đơn giản

Tạo form CF7 mới và đặt tên là Email Đăng Ký
Tạo form CF7 mới và đặt tên là Email Đăng Ký

Bước 1: Tạo form mới

Bạn tiến hành truy cập vào Form Liên Hệ / Tạo Form Mới. Và đặt tên cho Form này. Tôi đặt tên Form là Email Đăng Ký,

Kế tiếp bạn click sang tab: Nội dung Form.

dan doan form da tao flatsomeio
Thay thế nội dung form mặc định bằng form chia sẻ

Bước 2: Thay thế nội dung form mặc định

Thông thường sau khi tạo form mới sẽ có một form mẫu tạo sẵn, bạn tiến hành xóa và copy mã form đã được tạo sẵn và chia sẻ tới bạn.

Sau khi dán xong bạn tiến hành nhấn Lưu để hoàn tất quá trình tạo Form.

1
2
3
4
<div class="hvm_form-dang-ky">
[email email-daily placeholder "Email đăng ký"]
<div class="items"><i class="icon-envelop"></i>[submit "Đăng ký"]</div>
</div>

Bước 3: Cấu hình Contact Form 7 để gửi Email không lỗi

Thông thường Cấu hình mặc định của form không đúng nên chúng ta cần cấu hình lại cho chính xác.

Cấu hình mặc định của contact Form 7

Cau Hinh Mac Dinh Cua Contact Form 7

Để cấu hình lại chúng ta chú ý vào 03 mục ở ảnh dưới đây:

  1. Xóa nội dung Additional Headers
  2. Copy Field đã tạo
  3. Viết nội dung vào mục Message Body
Cau Hinh Lai Contact Form 7

Nếu lười bạn có thể sao chép mã đã được viết sẵn và dán vào mục Message Body là được:

1
2
3
4
5
6
Kính gửi chủ sở hữu Website [_site_title] - Có khách hàng gửi Email đăng ký mới
 
Email khách hàng: [email-daily]
 
--
Email này được gửi đến từ form liên hệ của website [_site_title] ([_site_url])

Sau khi các quá trình trên đã xong bạn tiến hành Lưu lại và quay trở lại trang cần gắn biểu mẫu liên hệ Email Đăng ký.

Bước 4: Thêm mã CSS cho Contact Form 7 vừa tạo

Các mã CSS đã được code sẵn để Chia sẻ CF7 Email Đăng Ký. Bạn chỉ cần sao chép vào mục Custom CSS hoặc tệp style.css của Theme đang hoạt động là được.

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
/* Mã CSS cho Contact Form 7 Email Đăng Ký.
.hvm_form-dang-ky {
    display: flex;
    position: relative;
}
.hvm_form-dang-ky .items {
    display: flex;
    align-items: center;
    justify-content: center;
    right: 6px;
    top:6px;
    padding: 5px 5px;  
}
.hvm_form-dang-ky input {
    margin: 0;
    height: 2.8rem;
    box-shadow: unset;
border: none;
}
.hvm_form-dang-ky .wpcf7-form-control-wrap {
    width: 100%;
}
.wpcf7-spinner,.hvm_form-dang-ky .items {
    position: absolute;
}
.hvm_form-dang-ky .wpcf7-submit {
    padding: 0;
    line-height: unset;
    min-height: unset;
    margin-left: 5px;
    background-color: unset;
    height: unset;font-size: 14px;
}
.hvm_form-dang-ky .wpcf7-submit:hover {
    background: unset;
    box-shadow: unset;
}
form.wpcf7-form {
    margin: 0;
}
/* Thay màu nền, màu chữ cho các mục dưới đây nếu cần.
.hvm_form-dang-ky .items {
  background-color: #FFCC29;
}
.hvm_form-dang-ky .items i{
    color: #fff;
}
.hvm_form-dang-ky .items input{
    color: #000;
}

Chú ý: Thay màu nền, màu chữ cho các mục dưới cùng của đoạn CSS mình code nếu cần thiết theo nhu cầu nhé.

Bước 5: Gắn Contact Form 7, Reload và Thưởng thức

Tới bước này là đã xong. Bạn chỉ cần gắn shortcode contact form 7 với tên mà bạn đã đặt vào vị trí mong muốn là có thể sử dụng được rồi.

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

Bài viết được chia sẻ trên Flatsome.io, mình chỉ copy lại để lưu và chia sẻ lại. Mong các bác không report ạ 😀

Digiprove sealCopyright protected by Digiprove © 2023
5/5 - (1 vote)
Chào ! Bạn thấy nội dung này thế nào?
Hữu ích 367Tạm được 371
Tags: cf7contact form 7
Previous Post

WooCommerce Hooks Guide: Full List and Examples

Next Post

WooCommerce Hook Guide: Cart Page

Harris

Harris

Thích du lịch, khám phá và thích vọc vạch

Next Post
WooCommerce Hook Guide: Cart Page

WooCommerce Hook Guide: Cart Page

Đăng ký
Đăng nhập bằng
Tôi đồng ý tạo tài khoản
Khi bạn đăng nhập lần đầu tiên thông qua nút Đăng nhập xã hội, chúng tôi thu thập thông tin hồ sơ công khai tài khoản của bạn do nhà cung cấp tài khoản mạng xã hội chia sẻ, dựa trên cài đặt quyền riêng tư của bạn. Chúng tôi cũng lưu địa chỉ email của bạn để tự động tạo tài khoản cho bạn trên trang web của chúng tôi. Khi tài khoản của bạn được tạo, bạn sẽ đăng nhập vào tài khoản này.
Không đồng ýĐồng ý
Nhận thông báo cho
guest
Đăng nhập bằng
Tôi đồng ý tạo tài khoản
Khi bạn đăng nhập lần đầu tiên thông qua nút Đăng nhập xã hội, chúng tôi thu thập thông tin hồ sơ công khai tài khoản của bạn do nhà cung cấp tài khoản mạng xã hội chia sẻ, dựa trên cài đặt quyền riêng tư của bạn. Chúng tôi cũng lưu địa chỉ email của bạn để tự động tạo tài khoản cho bạn trên trang web của chúng tôi. Khi tài khoản của bạn được tạo, bạn sẽ đăng nhập vào tài khoản này.
Không đồng ýĐồng ý
guest
0 Bình luận
Phản hồi nội tuyến
Xem tất cả bình luận

KHUYÊN DÙNG

Add Widget Before Content in any WordPress theme

Add Widget Before Content in any WordPress theme

14/09/2022
45
Rearrange WooCommerce checkout page data fields

Rearrange WooCommerce checkout page data fields

18/08/2023
20

ĐANG THỊNH HÀNH

Download Wondershare Filmora X 10.7.8.12 (Full + Repack)

Download Wondershare Filmora X 10.7.8.12 (Full + Repack)

14/08/2023
12.9k
Steinberg – Cubase Pro 12.0.0.205 x64

Steinberg – Cubase Pro 12.0.0.205 x64

24/03/2022
3.2k
Download Cubase 10 Pro All in One – Hướng dẫn cài đặt chi tiết

Download Cubase 10 Pro All in One – Hướng dẫn cài đặt chi tiết

15/09/2023
3.5k
Chia sẻ code nút liên hệ hiển thị bên trái

Chia sẻ code nút liên hệ hiển thị bên trái

30/08/2023
47
Mẫu contact form 7 đơn giản và đẹp

Mẫu contact form 7 đơn giản và đẹp

26/05/2023
575

GIỚI THIỆU

Chia sẻ thủ thuật IT, tải phần mềm miễn phí

Xin chào! Mình là Mạnh Huấn, website này mình xây dựng nhằm mục đích chia sẻ miễn phí các kiến thức, thủ thuật máy tính, làm web WordPress, SEO, MMO, các phần mềm hay... mà mình biết cho tất cả mọi người. Cảm ơn các bạn đã ghé qua, nếu thấy bài viết hay, hãy chia sẻ để ủng hộ tinh thần cho mình nhé!

Theo dõi mình tại đây:

BÀI VIẾT GẦN ĐÂY

Hướng dẫn cài đặt ZeroSSL trên DirectAdmin

Hướng dẫn cài đặt ZeroSSL trên DirectAdmin

12/10/2023
Set all products instock without edit manual in Woocommerce

Set all products instock without edit manual in Woocommerce

18/08/2023
Rearrange WooCommerce checkout page data fields

Rearrange WooCommerce checkout page data fields

18/08/2023

HV MEDIA ON FACEBOOK

  • Giới thiệu
  • Chính sách bảo mật
  • Bản quyền
  • Liên hệ
  • Quảng cáo
  • Gửi yêu cầu
  • Báo link hỏng

© 2020 HV Media - Chia sẻ thủ thuật IT, phần mềm by HV Media Center.

No Result
View All Result
  • Home
  • Mac OS
    • Adobe
    • Developer Tools
    • Graphics & Design
    • Internet – Security
    • Productivity
    • Utilities
    • Video – Audio
  • Windows
    • Anti Virus
    • Development
    • Graphics & Design
    • Office – Study
    • Tools
    • Utilities
    • Video – Audio
  • Điện thoại
    • Apps, Game Cho iOS
    • Phần mềm Android
  • Thủ thuật
    • Thủ thuật máy tính
    • Thủ thuật Mobile
    • Thủ thuật Facebook
  • Game hay
    • Game MacOS
    • Game Windows
  • Website
  • Hướng dẫn
  • Tài liệu

© 2020 HV Media - Chia sẻ thủ thuật IT, phần mềm by HV Media Center.

wpDiscuz
0
0
Bạn đang nghĩ gì, hãy để lại bình luận nhé !x
()
x
| Phản hồi