Gửi biểu mẫu trong WordPress mà không cần plugin
Trong WordPress, biểu mẫu là một mô-đun mà qua đó chúng tôi thu thập hoặc chia sẻ một số thông tin từ người dùng trên trang web hoặc blog của chúng tôi.
Contents
Có nhiều loại biểu mẫu trong WordPress như:
- Mẫu bản tin
- Mẫu đăng ký
- Hình thức thành viên
- Biểu mẫu liên hệ hoặc Biểu mẫu truy vấn
- Biểu mẫu thanh toán cho thương mại điện tử
- Đơn đặt phòng
- Mẫu đăng ký
- Nhận Báo giá hoặc Biểu mẫu Ước tính
- Biểu mẫu tạo khách hàng tiềm năng
- Mẫu đơn đăng ký cho các trang web giáo dục
- Biểu mẫu trò chuyện hoặc biểu mẫu hệ thống vé
- Biểu mẫu đăng ký email hoặc biểu mẫu chia sẻ
Từ danh sách đưa ra ở trên, có thể có nhiều loại biểu mẫu hơn trong trang web. Trong WordPress, chúng tôi có thể tạo bao nhiêu loại biểu mẫu mà chúng tôi muốn cho bất kỳ mục đích nào trên trang web hoặc blog của chúng tôi.
Tạo và gửi biểu mẫu trong WordPress với plugin
Nếu bạn muốn gửi hoặc tạo biểu mẫu trong wordpress bằng plugin. Sau đó, bạn có thể sử dụng các plugin wordpress được cung cấp bên dưới.
- Biểu mẫu liên hệ Ninja Forms – Trình tạo biểu mẫu kéo và thả cho WordPress
- Trình tạo biểu mẫu của 10Web – Trình tạo biểu mẫu liên hệ kéo và thả thân thiện với thiết bị di động
- Biểu mẫu liên hệ của WPForms – Trình tạo biểu mẫu kéo và thả cho WordPress
- HubSpot – CRM, Tiếp thị qua Email, Trò chuyện Trực tiếp, Biểu mẫu & Phân tích
- Mẫu liên hệ 7
Gửi biểu mẫu trong WordPress mà không cần plugin
Nếu bạn muốn gửi hoặc tạo biểu mẫu trong wordpress mà không cần plugin. Sau đó, hãy làm theo các bước dưới đây. Ở đây chúng tôi sẽ tạo một biểu mẫu liên hệ đơn giản. Bạn có thể tạo bao nhiêu biểu mẫu bằng cách làm theo bài viết này.
Bước 1
Tạo trang mẫu tùy chỉnh trong thư mục chủ đề của bạn tại website_root_path / wp-content / themes / your_theme. Bạn có thể đọc bài viết của chúng tôi về cách tạo một mẫu bài đăng tùy chỉnh trong wordpress. Ở đây bên dưới chúng tôi đã tạo một trang mẫu Biểu mẫu liên hệ và tạo một biểu mẫu trong mẫu này. Vì vậy, chỉ cần tạo một tệp contact-template.php tệp trong thư mục chủ đề của bạn và dán mã được cung cấp bên dưới vào tệp.
<?php
/*
* Template Name: Contact Form Template
* Template Post Type: page
*/
get_header();
?>
<?php if(isset($_GET['success'])): ?>
<div class="alert alert-success">
<h3>Congrats! Your Form Submitted Successfully.</h3>
</div>
<?php endif; ?>
<?php if(isset($_GET['error'])): ?>
<div class="alert alert-danger">
<h3>Sorry! Unable to submit the form.</h3>
</div>
<?php endif; ?>
<form name="contact_form" method="POST" action="<?php echo esc_url( admin_url('admin-post.php') ); ?>" enctype="multipart/form-data" autocomplete="off" accept-charset="utf-8">
<div>
<label>
Full Name
<input type="text" name="contact_full_name" required="">
</label>
</div>
<div>
<label>
Email
<input type="email" name="contact_email" required="">
</label>
</div>
<input type="hidden" name="action" value="contact_form">
<input type="hidden" name="base_page" value="<?php echo home_url( $wp->request ); ?>">
<div>
<button type="submit" name="submit_btn">
Submit
</button>
</div>
</form>
<!-- new registeration -->
<?php
get_footer();
?>
Bây giờ chúng ta có một trang mẫu biểu mẫu liên hệ. Truy cập Bảng điều khiển WordPress của bạn và tạo một trang và chọn mẫu của bạn Mẫu biểu mẫu liên hệ từ Thuộc tính trang bên phải. Sau khi tạo trang, hãy mở url trang của bạn và bạn sẽ thấy biểu mẫu chúng tôi đã tạo trong trang Mẫu biểu mẫu liên hệ của chúng tôi.
Bước 2
Bây giờ chúng tôi sẽ gửi biểu mẫu được cung cấp ở trên cho việc này, chỉ cần dán đoạn mã được cung cấp bên dưới vào tệp functions.php của bạn nằm trong thư mục chủ đề của bạn.
add_action( 'admin_post_nopriv_contact_form', 'process_contact_form' );
add_action( 'admin_post_contact_form', 'process_contact_form' );
function process_contact_form(){
GLOBAL $wpdb;
$params = $_POST;
/*create table if not exists*/
$table_name = $wpdb->prefix.'custom_contact_form';
$query = $wpdb->prepare( 'SHOW TABLES LIKE %s', $wpdb->esc_like( $table_name ) );
if ( ! $wpdb->get_var( $query ) == $table_name ) {
$sql = "CREATE TABLE {$table_name} (
id INT(6) UNSIGNED AUTO_INCREMENT PRIMARY KEY,
contact_full_name VARCHAR(255) NOT NULL,
contact_email VARCHAR(255) NOT NULL,
created_at TIMESTAMP DEFAULT CURRENT_TIMESTAMP ON UPDATE CURRENT_TIMESTAMP
)";
if($wpdb->query($sql)){
submitsForm($table_name,$params);
}
}else{
submitsForm($table_name,$params);
}
/*create table if not exists*/
die;
}
function submitsForm($table_name, $params){
GLOBAL $wpdb;
$curTime = date('Y-m-d H:i:s');
$query = "INSERT INTO {$table_name}(contact_full_name, contact_email,created_at) VALUES('{$params['contact_full_name']}','{$params['contact_email']}','{$curTime}')";
if($wpdb->query($query)){
wp_redirect($params['base_page'].'?success=1');
}else{
wp_redirect($params['base_page'].'?error=1');
}
}
Vậy là xong Bây giờ hãy gửi biểu mẫu của bạn và kiểm tra bảng cơ sở dữ liệu của bạn (table_prefix) custom_contact_form, bảng này sẽ có dữ liệu đã gửi của bạn.
Giải thích mã
- Trong Mẫu, chúng tôi đã sử dụng Mẫu Mẫu liên hệ Tên Mẫu và Trang Loại Bài đăng Mẫu.
- Trong Hành động biểu mẫu, chúng tôi đã sử dụng admin_url (‘admin-post.php’) để lấy vị trí xử lý biểu mẫu tệp lõi wordpress.
- Chúng tôi đã tạo hai trường ẩn trong biểu mẫu của mình và trường ẩn quan trọng là action contact_form mà chúng tôi đã sử dụng trong tệp functions.php của mình.
- Chúng tôi đã sử dụng hàm add_action trong wordpress để kết nối hàm process_contact_form của chúng tôi.
- Trong add_action, chúng tôi đã sử dụng hai hook admin_post_ (cho người dùng đã đăng nhập) và admin_post_nopriv_ (cho người dùng chưa đăng nhập) và thêm biểu mẫu liên hệ hành động của chúng tôi được tạo trong trường biểu mẫu ẩn hành động.
- Chúng tôi đã sử dụng đối tượng cơ sở dữ liệu wordpress toàn cầu $ wpdb để chạy truy vấn cơ sở dữ liệu.
Vì vậy, sử dụng các thủ thuật này, bạn có thể tạo biểu mẫu tùy chỉnh trong wordpress mà không cần plugin, tạo biểu mẫu bản tin trong wordpress mà không cần plugin, tạo biểu mẫu tạo khách hàng tiềm năng trong wordpress mà không cần plugin hoặc bất kỳ biểu mẫu liên hệ tùy chỉnh nào trong wordpress mà không cần plugin.
Hãy like share subscribe và đưa ra những phản hồi tích cực để mình có động lực viết nhiều hơn cho các bạn.
Để biết thêm hướng dẫn, vui lòng truy cập trang web của tôi .
Cảm ơn 🙂
Happy Coding 🙂
