itsmeit.coitsmeit.co
  • Home
  • Windows
    • Phần mềm tiện ích
  • Linux
    Linux
    Những bài viết hữu ích về Ubuntu & Linux cũng như các mẹo sử dụng thú vị giúp bạn làm chủ hệ điều hành và…
    Show More
    Top News
    Cài đặt gõ tiếng việt trên Ubuntu 22.04 Unikey | IBUS-Bamboo
    Cài đặt gõ tiếng Việt trên Ubuntu 22.04 Unikey, IBUS-Bamboo
    12/11/2023
    Cách sử dụng lệnh chmod trong Linux hoặc Ubuntu và các ví dụ thực tế
    Cách sử dụng lệnh chmod trong Linux hoặc Ubuntu và các ví dụ
    12/11/2023
    Hướng dẫn cách sử dụng lệnh ss trên linux & ubuntu
    Lệnh SS trên Linux | Ubuntu và hướng dẫn cách sử dụng
    20/12/2022
    Latest News
    Cách cấu hình Redis Cache để tăng tốc trang web WordPress
    15/11/2023
    Cách cài đặt Telegram trên Ubuntu 22.04 hoặc 20.04 LTS
    11/11/2023
    Cách sửa lỗi đăng nhập Gnome Online Accounts Ubuntu 22.04
    11/11/2023
    Cách xóa, gỡ bỏ Podman khỏi Ubuntu Linux
    11/11/2023
  • Web Developer
    • Wordpress Theme
      • Fashion Theme
      • Theme Blog Tin Tức
      • Theme Elementor
      • WooCommerce Theme
    • Wordpress Plugin
    • Magento Developer
Reading: Cách sử dụng Plugin Contact Form Flatsome mới nhất 2023
Share
Notification Show More
Font ResizerAa
itsmeit.coitsmeit.co
Font ResizerAa
  • Windows
  • Ubuntu & Linux
  • Linux | Ubuntu
  • Máy tính Windows
Have an existing account? Sign In
Follow US
Copyright © 2023. All Rights Reserved.
Web Developer

Cách sử dụng Plugin Contact Form Flatsome mới nhất 2023

itsmeit
Last updated: 17/11/2023 lúc 9:19 Sáng
By itsmeit Published 17/11/2023
Share
SHARE

Table of contents

  1. Hướng dẫn sử dụng biểu mẫu liên hệ Contact Form Flatsome
    1. Bước 1. Thêm hoặc chỉnh sửa form liên hệ trong flatsome
    2. Bước 2. Cách tạo shortcode và hiển thị Contact Form 7 ngoài frontend
    3. Bước 3. Sửa lỗi contact form 7 email trên Wordpress

Hướng dẫn cách sử dụng plugin contact form flatsome theme cũng như hầu hết những giao diện sử dụng wordpress hay WooCommerce. Contact Form 7 (CF7) hỗ trợ tạo ra những form như biểu mẫu liên hệ, form đăng ký khuyến mại, form newsletter..

Hướng dẫn sử dụng biểu mẫu liên hệ Contact Form Flatsome

Contact Form 7 viết tắt CF7, đây một plugin hỗ trợ tạo ra các form miễn phí và sử dụng nó qua shortcode. Bạn chỉ cần tạo form và sau đó có thể chèn vào bất kỳ nơi nào trên website nơi bạn muốn nó hiển thị.

Thêm biểu mẫu liên hệ contact form 7 vào trang web của bạn, một biểu mẫu với những thông tin bạn đã thiết lập cho phép khách hàng gửi email trực tiếp từ trang web đến Email của bạn. Giúp bạn có được thông tin mong muốn từ khách hàng hoặc những thông tin cần hỗ trợ, báo lỗi dịch vụ, sản phẩm…

Để có thể thiết lập, tạo contact form flatsome trước tiên bạn cần cài đặt plugin. Nếu chưa cài đặt hãy đăng nhập vào trang quản trị (Admin). Ở menu bên trái click vào Plugins->Add new. Tìm kiếm cụm từ contact form 7 và cài đặt, kích hoạt nó. Thông thường khi bạn cài đặt theme flatsome thì đã có sẵn Plugin này rồi. Bạn có thể kiểm tra trong mục plugin đã cài đặt hoặc ở menu bên trái có hiển thị Contact hoặc Liên hệ.

Hướng dẫn cài đặt plugin Contact Form Flatsome WordPress

Bước 1. Thêm hoặc chỉnh sửa form liên hệ trong flatsome

Để thêm, tạo hoặc chỉnh sửa contact form flatsome trong menu trái của trang admin bấm vào contact form. Phần này itsmeit sẽ sử dụng môt form có sẵn và chỉnh sửa nó như sau:

Thêm hoặc chỉnh sửa form liên hệ trong flatsome

Sau khi bấm Edit (chỉnh sửa) click vào tab Form, mặc định sẽ có 3 field name, email, content. Nếu bạn muốn thêm số điện thoại thì bấm vào nút tel bên trên, nó sẽ thêm 1 filed và trông nó giống như sau:

Chỉnh sửa các field trong plugin Contact Form 7 Flatsome (ảnh minh họa)
Chỉnh sửa các field trong plugin Contact Form 7 Flatsome (ảnh minh họa)

Bấm Insert Tag bạn sẽ nhận được một biểu mẫu form liên hệ với: Họ và tên, số điện thoại, địa chỉ email, nội dung dạng html code, bạn có thể thêm những trường khác cũng tương tự như vậy ví dụ: địa chỉ, giới tính, sở thích… Dưới đây là ví dụ về mẫu HTML trong contact form flatsome.

<label>Họ và tên (*)</label>
<p>[text* text-922 placeholder "Họ và tên"]</p>

<label>Số điện thoại (*)</label>
<p>[tel* tel-195 id:so-dien-thoai class:so-dien-thoai placeholder "Số điện thoại"]</p>

<label>Địa chỉ Email (*)</label>
<p>[email* email-815 placeholder "Địa chỉ email"]</p>

<label>Nội dung (*)</label>
<p>[textarea* textarea-810 placeholder "Nội dung"]</p>
[submit id:contact-submit-form class:contact-submit-form "Gửi"]

Bấm Save sau khi đã hoàn tất bước tạo, chỉnh sửa form. Bây giờ hãy coppy đoạn shortcode của form bạn vừa tạo ra để gắn lên trang liên hệ. Mã shortcode có dạng: [contact-form-7 id=”15″ title=”Contact form”].

Bước 2. Cách tạo shortcode và hiển thị Contact Form 7 ngoài frontend

Tiếp tục, ở menu bấm vào Page (Trang) và chỉnh sửa hoặc chỉnh sửa với UX Builder. Khi itsmeit cài đặt theme Flatsome và import demo đã có sẵn phần shortcode. Vì vậy itsmeit sẽ chọn Form vừa mới chỉnh sửa và bấm Apply-> Update.

Bạn cũng có thể thêm form mới bằng cách click vào khoảng trống bất kỳ nơi muốn hiển thị và bấm dấu “+” và tìm Contact Form 7 ở mục widget bên trái. Hoặc bạn cũng có thể chọn HTML và chèn shortcode. Kết quả hiển thị sẽ như sau:

Cách tạo shortcode và hiển thị Contact Form 7 ngoài frontend
Cách Add shortcode CF7 và hiển thị form ngoài frontend wordpress (ảnh minh họa)

Chưa xong, khi bạn add hoặc edit field trong form thì cũng cần phải thay đổi các giá trị tron tab Mail, hãy tiếp tục xem bước 3 itsmeit sửa lỗi các giá trị để contact form trong theme flatsome hoạt động nhé.

Bước 3. Sửa lỗi contact form 7 email trên Wordpress

Bấm chuyển qua tab Mail và coppy các giá trị trong các ô input của bạn, tương tự như ảnh dưới đây.

Sửa lỗi contact form 7 email trên Wordpress
Hướng dẫn fix, sửa lỗi contact form 7 email trên Wordpress Flatsome (ảnh minh họa)
  • To: Là email bạn muốn nhận biểu mẫu liên hệ từ khách hàng
  • Form: Email của trang web, bạn có thể đặt email theo domain nếu có hoặc để tương tự như trong ảnh. Sau @ phải là domain của website
  • Subject: Tiêu đề email tự đặt, bạn có thể thêm tên hoặc số điện thoại của khách hàng giống như ảnh để dễ phân biệt.
  • Additional headers: Có thể để trống hoặc đính kèm người nhận.
  • Message body: Nội dung cũng tương tự như ảnh chụp màn hình bên trên, điều quan trong nhất là bạn coppy đúng các mã [field].

Kéo chuột xuống dưới bấm Save khi đã chỉnh sửa xong. Và test thử thành quả contact form flatsome vừa mới tạo nhé.

su dung plugin contact form 7 flatsome 5

Trên đây là 3 bước đơn giản để tạo một form liên hệ trong wordpress sử dụng contact form 7 và theme flatsome. CF7 được khá nhiều người sử dụng nhưng nếu bạn muốn nâng cao hơn về chiến lược marketting bạn có thể tham khảo plugin Fluent Forms.

Rate this post

– Advertising –

Share this Article
Facebook Twitter Pinterest LinkedIn Reddit Telegram
Leave a comment Leave a comment
Theo dõi
Kết nối với
Đăng nhập
Thông báo của
guest
Kết nối với
guest
0 Comments
Phản hồi nội tuyến
Xem tất cả bình luận
Previous Article Đánh giá và So sánh Theme Jnews với Newspaper 2023 💥 So sánh Jnews với Newspaper nên chọn theme nào làm blog?
Next Article Cách chèn nội dung vào trước hoặc sau bài viết trong WordPress Cách chèn nội dung vào trước hoặc sau bài viết WordPress

You Might Also Like

Download Product Video Gallery for Woocommerce v1.5.0

Plugin chặn spam đăng ký tài khoản Wordpress (Block Spam)

JNews v11.1.3 – Theme WordPress làm web blog mới nhất

Plugin nghiên cứu từ khóa SEO wordpress Keyword Tool v2.3.3

Tải plugin cache Wordpess WP Rocket Pro v3.15.3 (Updated)

Stay Connected
Facebook Like
Twitter Follow
Pinterest Pin
Youtube Subscribe
Bài viết phổ biến
Tải Product Video Gallery for Woocommerce v1.5.0
Download Product Video Gallery for Woocommerce v1.5.0
17/11/2023 20 Views
Download Plugin Prevent Spam Register - Chặn spam đăng ký tài khoản Wordpress
Plugin chặn spam đăng ký tài khoản Wordpress (Block Spam)
17/11/2023 25 Views
JNews - Theme WordPress làm web Blog, Báo, Tin tức
JNews v11.1.3 – Theme WordPress làm web blog mới nhất
17/11/2023 28 Views
Tải IDM Full Repack v6.42 Build 1 Fix Serial Key Mới Nhất
Tải IDM Full Repack v6.42 Build 1 Fix Serial Key Mới Nhất
24/11/2023 1.2k Views
Tải Product Video Gallery for Woocommerce v1.5.0
Download Product Video Gallery for Woocommerce v1.5.0
17/11/2023 20 Views
Download Plugin Prevent Spam Register - Chặn spam đăng ký tài khoản Wordpress
Plugin chặn spam đăng ký tài khoản Wordpress (Block Spam)
17/11/2023 25 Views
Trang web chia sẻ kiến ​​thức về công nghệ internet, những ứng dụng thực tế của Windows và Linux, cũng như kiến ​​thức chuyên môn về phát triển và thiết kế website.

DMCA.com Protection Status

Quick Link
  • Windows
  • Ubuntu & Linux
About US
  • Giới thiệu
  • Privacy Policy
  • Terms & Conditions
  • Miễn trừ trách nhiệm
  • Liên hệ
Sign Up for Our Newsletter

Đăng ký bản tin của chúng tôi để nhận các bài viết mới nhất!

itsmeit.coitsmeit.co
Follow US
Copyright © 2023. All Rights Reserved.
  • Ubuntu & Linux
  • Phần mềm Windows
Welcome Back!

Sign in to your account

Continue with Google
Continue with GitHub
Continue with Twitter
Register Lost your password?