2 cách thêm HTML forms vào WordPress

3 tuần ago, Hướng dẫn WordPress, Views

Giới Thiệu về Thêm HTML Forms vào WordPress

Forms (biểu mẫu) là một phần quan trọng của bất kỳ trang web tương tác nào. Chúng cho phép khách truy cập gửi thông tin, đặt câu hỏi, đăng ký nhận bản tin, hoặc hoàn thành các tác vụ khác. WordPress, mặc dù là một hệ thống quản lý nội dung (CMS) mạnh mẽ, không cung cấp một cách tích hợp sẵn mạnh mẽ để tạo và quản lý forms phức tạp. Vì vậy, chúng ta cần các phương pháp khác để thêm forms vào trang web WordPress của mình.

Bài viết này sẽ hướng dẫn bạn qua hai cách chính để thêm HTML forms vào trang web WordPress của bạn, từ cách đơn giản đến cách phức tạp hơn, với việc sử dụng plugins và cách viết code trực tiếp.

Cách 1: Sử Dụng WordPress Form Plugins

Đây là cách phổ biến và dễ dàng nhất để thêm forms vào trang web WordPress của bạn. Có rất nhiều plugins tạo form miễn phí và trả phí có sẵn, mỗi plugin đều có các tính năng và mức độ phức tạp khác nhau. Các plugin này thường cung cấp giao diện kéo và thả trực quan, giúp bạn tạo forms một cách nhanh chóng mà không cần viết bất kỳ mã code nào.

Lợi ích của việc sử dụng Form Plugins

Dễ sử dụng: Giao diện kéo và thả thường rất trực quan, ngay cả đối với người mới bắt đầu.
Tiết kiệm thời gian: Bạn không cần viết code, giúp bạn tiết kiệm thời gian và công sức.
Nhiều tính năng: Các plugin thường cung cấp nhiều tính năng như logic có điều kiện, tích hợp thanh toán, bảo vệ spam, và hơn thế nữa.
Hỗ trợ: Các plugin trả phí thường đi kèm với hỗ trợ khách hàng chuyên nghiệp.

Các Form Plugins WordPress Phổ Biến

Dưới đây là một số plugin tạo form WordPress phổ biến mà bạn có thể xem xét:

Contact Form 7: Một plugin miễn phí phổ biến với nhiều tính năng cơ bản.
WPForms: Một plugin trả phí (có phiên bản miễn phí giới hạn) với giao diện kéo và thả thân thiện với người dùng.
Gravity Forms: Một plugin trả phí mạnh mẽ với nhiều tính năng nâng cao.
Ninja Forms: Một plugin miễn phí (có các add-on trả phí) với khả năng tùy biến cao.
Formidable Forms: Một plugin trả phí với các tính năng tập trung vào forms dữ liệu.

Hướng dẫn sử dụng WPForms (Ví dụ)

Cài đặt và kích hoạt plugin WPForms: Truy cập “Plugins” > “Add New” trong bảng điều khiển WordPress của bạn, tìm kiếm “WPForms” và cài đặt, sau đó kích hoạt plugin.
Tạo form mới: Điều hướng đến “WPForms” > “Add New” để bắt đầu tạo form mới.
Chọn một template hoặc tạo form trống: WPForms cung cấp nhiều templates khác nhau (ví dụ: Contact Form, Simple Contact Form, Suggestion Form) hoặc bạn có thể chọn tạo một form trống.
Sử dụng giao diện kéo và thả để thêm các trường: Kéo và thả các trường (ví dụ: Name, Email, Message) vào form của bạn.
Cấu hình các trường: Nhấp vào mỗi trường để cấu hình các thuộc tính của nó (ví dụ: required, placeholder text).
Cấu hình settings của form: Điều hướng đến tab “Settings” để cấu hình các tùy chọn như thông báo email, trang xác nhận, và bảo vệ spam.
Nhúng form vào trang hoặc bài viết: Sau khi bạn đã tạo và cấu hình form, hãy sao chép shortcode của form (bạn sẽ tìm thấy nó trên trang chỉnh sửa form) và dán nó vào trang hoặc bài viết mà bạn muốn hiển thị form.

Cách 2: Thêm HTML Forms Thủ Công (Code)

Nếu bạn có kiến thức về HTML, CSS và PHP, bạn có thể thêm forms vào trang web WordPress của mình bằng cách viết code trực tiếp. Cách này cho phép bạn có toàn quyền kiểm soát cấu trúc và chức năng của form, nhưng nó cũng đòi hỏi nhiều công sức và kiến thức kỹ thuật hơn.

Ưu điểm của việc tạo Form Thủ Công

Toàn quyền kiểm soát: Bạn có toàn quyền kiểm soát giao diện và chức năng của form.
Tối ưu hóa hiệu suất: Bạn có thể tối ưu hóa code của form để đạt hiệu suất tốt nhất.
Không phụ thuộc vào plugin: Bạn không cần phải dựa vào plugins của bên thứ ba, điều này có thể giúp giảm tải cho trang web của bạn.

Nhược điểm của việc tạo Form Thủ Công

Đòi hỏi kiến thức kỹ thuật: Bạn cần có kiến thức về HTML, CSS và PHP.
Tốn thời gian: Việc viết code cho form có thể tốn nhiều thời gian hơn so với việc sử dụng plugin.
Khó bảo trì: Việc bảo trì code của form có thể khó khăn hơn, đặc biệt nếu bạn không có kinh nghiệm.

Hướng dẫn tạo Form Thủ Công

Tạo một file template: Tạo một file template mới trong thư mục theme của bạn (ví dụ: `custom-form.php`).

Viết code HTML cho form: Thêm code HTML cho form vào file template. Ví dụ:

                
<form action="<?php echo esc_url( admin_url('admin-post.php') ); ?>" method="post">
    <input type="hidden" name="action" value="submit_custom_form">
    <label for="name">Name:</label><br>
    <input type="text" id="name" name="name" required><br><br>

    <label for="email">Email:</label><br>
    <input type="email" id="email" name="email" required><br><br>

    <label for="message">Message:</label><br>
    <textarea id="message" name="message" rows="4" required></textarea><br><br>

    <input type="submit" value="Submit">
</form>

Viết code PHP để xử lý dữ liệu form: Thêm code PHP vào file `functions.php` của theme để xử lý dữ liệu form khi nó được gửi. Ví dụ:

                
<?php
add_action( 'admin_post_nopriv_submit_custom_form', 'handle_custom_form' );
add_action( 'admin_post_submit_custom_form', 'handle_custom_form' );

function handle_custom_form() {
    if ( isset( $_POST['name'] ) && isset( $_POST['email'] ) && isset( $_POST['message'] ) ) {
        $name    = sanitize_text_field( $_POST['name'] );
        $email   = sanitize_email( $_POST['email'] );
        $message = sanitize_textarea_field( $_POST['message'] );

        $to      = get_option( 'admin_email' );
        $subject = 'New Form Submission';
        $body    = "Name: $namenEmail: $emailnMessage: $message";
        $headers = array( 'Content-Type: text/html; charset=UTF-8' );

        wp_mail( $to, $subject, $body, $headers );

        // Redirect to a thank you page
        wp_redirect( home_url( '/thank-you/' ) );
        exit;
    } else {
        // Handle errors if fields are missing
        wp_redirect( home_url( '/error/' ) );
        exit;
    }
}
?>

Tạo một trang và gán template: Tạo một trang mới trong WordPress (ví dụ: “Contact Us”) và gán template `custom-form.php` cho trang đó.
Truy cập trang: Truy cập trang bạn vừa tạo để xem form.

Lưu ý quan trọng: Luôn nhớ sanitize và validate dữ liệu form để tránh các vấn đề bảo mật. Sử dụng các hàm WordPress như `sanitize_text_field()`, `sanitize_email()` và `sanitize_textarea_field()` để làm sạch dữ liệu trước khi xử lý nó.

Lời Khuyên Bổ Sung

Bảo vệ spam: Sử dụng reCAPTCHA hoặc các phương pháp chống spam khác để ngăn chặn spam submissions.
Tùy biến giao diện: Sử dụng CSS để tùy biến giao diện của form cho phù hợp với thiết kế trang web của bạn.
Kiểm tra kỹ lưỡng: Kiểm tra kỹ lưỡng form của bạn trước khi đưa nó vào trang web để đảm bảo rằng nó hoạt động chính xác.

Kết Luận

Bài viết này đã trình bày hai cách chính để thêm HTML forms vào trang web WordPress của bạn. Việc sử dụng plugins là một lựa chọn đơn giản và nhanh chóng cho hầu hết người dùng, trong khi việc viết code trực tiếp cho phép bạn có toàn quyền kiểm soát nhưng đòi hỏi nhiều kiến thức kỹ thuật hơn. Tùy thuộc vào nhu cầu và kỹ năng của bạn, hãy chọn phương pháp phù hợp nhất để tạo các forms đẹp mắt và chức năng cho trang web WordPress của bạn.

#ezw_tco-2 .ez-toc-widget-container ul.ez-toc-list li.active::before { background-color: #ededed; } aa