Chia sẻ CF7 Email Đăng Ký Đơn Giản và Đẹp

Chia sẻ CF7 Email Đăng Ký trong bài đăng này sẽ giúp cho quý anh chị và các bạn có cho mình một biểu mẫu contact form 7 đẹp. Mục đích để kêu gọi các Email đăng ký.

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.

Chia sẻ CF7 Email Đăng Ký đẹp với các bước làm đơn giản chỉ cần Copy Paste là được

Từ một câu hỏi của thành viên VietCoders Community. Tôi đã quyết định Code form này để Chia sẻ CF7 Email Đăng Ký tới mọi người.

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.

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 Flatsome.IO 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.

<div class="flatsomeio_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

Để 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

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

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 FlatsomeIO 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.

/* Mã CSS cho Contact Form 7 Email Đăng Ký.
Chia sẻ bởi https://www.flatsome.io */

.flatsomeio_form-dang-ky {
    display: flex;
    position: relative;
}
.flatsomeio_form-dang-ky .items {
    display: flex;
    align-items: center;
    justify-content: center;
    right: 6px;
    top:6px;
    padding: 5px 5px;  
}
.flatsomeio_form-dang-ky input {
    margin: 0;
    height: 2.8rem;
    box-shadow: unset;
		border: none;
}
.flatsomeio_form-dang-ky .wpcf7-form-control-wrap {
    width: 100%;
}
.wpcf7-spinner,.flatsomeio_form-dang-ky .items {
    position: absolute;
}
.flatsomeio_form-dang-ky .wpcf7-submit {
    padding: 0;
    line-height: unset;
    min-height: unset;
    margin-left: 5px;
    background-color: unset;
    height: unset;font-size: 14px;
}
.flatsomeio_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.
Chia sẻ bởi https://www.flatsome.io */
.flatsomeio_form-dang-ky .items {
  background-color: #FFCC29;
}
.flatsomeio_form-dang-ky .items i{
    color: #fff;
}
.flatsomeio_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 Chia sẻ CF7 Email Đăng Ký 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 Mẫu Chia sẻ CF7 Email Đăng Ký với tên mà bạn đã đặt vào vị trí mong muốn là có thể sử dụng được rồi.

Tổng kết

Hãy tham gia vào cộng đồng những người yêu thích và sử dụng Flatsome và tiếp cận với các Tài nguyên, Kiến thức hữu ích được chia sẻ Miễn phí.

Group Zalo

Fan Page

Group Facebook

Youtube FlatsomeIO