Tạo mẫu đăng ký nhập học online cho các trường học

Công nghệ thông tin ngày càng được áp dụng rộng rãi, ngay cả trong lĩnh vực giáo dục và tạo ra rất nhiều thay đổi cho lĩnh vực đặc biệt này. Đặc biệt, thời gian gần đây khi tình hình dịch bệnh Covid-19 lan nhanh và gây hậu quả nghiêm trọng, thì các cơ sở giáo dục đã dần chuyển hướng sang dạy và học trực tuyến rất nhiều. Cùng với đó, việc đăng ký nhập học cũng có thể làm được như vậy. Học sinh, sinh viên không cần phải đến các trường để nộp hồ sơ nữa, mà có thể ngồi tại nhà và điền thông tin vào bản đăng ký nhập học online. Việc này vừa giúp tiết kiệm chi phí di chuyển, chuyển phát tài liệu, giảm nguy cơ tiếp xúc, và cũng giúp nhà trường số hóa việc lưu trữ tài liệu về học sinh một cách dễ dàng hơn.

Trong bài viết này, mình sẽ hướng dẫn các bạn tạo một mẫu đăng ký nhập học trực tuyến như vậy.

Một mẫu đăng ký nhập học trực tuyến tạo bằng custom fields

Lưu ý là mọi thông tin và hình ảnh trong bài viết này chỉ là ví dụ minh họa, không hàm ý chỉ đích danh cá nhân hay tổ chức nào cả.

Chuẩn bị

Một mẫu đăng ký thì thường có rất nhiều trường thông tin để học sinh điền vào, nên mình sẽ cần dùng đến một plugin về custom fields để tạo nên mẫu điền thông tin này. Ở đây mình sẽ sử dụng plugin Meta Box và bộ các extension của Meta Box bao gồm:

Tất cả các extension này đều có sẵn trong Meta Box AIO khi bạn mua gói Developer hoặc Lifetime của Meta Box. Vì cần dùng khá nhiều extension, nên mình không khuyến khích các bạn mua riêng từng cái, mà nên mua 1 trong gói kia để tiết kiệm chi phí nhé.

Bước 1: Tạo một custom post type mới

Mình sẽ lưu thông tin của mỗi học sinh vào một bài viết ở một loại post type riêng, tạm đặt tên là Student Info.

Để tạo post type, chúng ta sẽ cần dùng đến extension MB Custom Post Types & Custom Taxonomies của Meta Box. Bạn vào menu Meta Box > Post Types > Add New và nhập các thông tin cho post type của bạn.

Bước 2: Tạo custom fields cho form đăng ký nhập học

Nội dung và loại field cần tạo

Thông thường, một bản đăng ký nhập học thường sẽ có rất nhiều trường thông tin để học sinh điền như thông tin cá nhân của học sinh, địa chỉ, liên lạc, thông tin người thân, lựa chọn ngành học, thông tin y tế, … tùy theo cách quản lý và yêu cầu riêng của mỗi trường.

Ở đây, mình sẽ tạo một số những trường thông tin cơ bản như ảnh ở trên thôi. Hầu hết các trường thông tin này đều sẽ được tạo ở dạng field text hoặc number. Có một số trường đặc biệt thì hơi khác chút như là:

FieldLoại fieldNội dung
1. Personal Information (Thông tin học sinh)headingĐể phân tách các nội dung thành các các phần riêng, giúp bố cục dễ nhìn hơn
Nationality (Quốc tịch)select advancedCho phép học sinh chọn 1 hoặc nhiều quốc tịch từ trong danh sách sẵn có
Photo (Ảnh đại diện)image uploadCho phép tải ảnh từ máy tính lên, không được lấy ảnh từ Media Library của website.
Maps (Bản đồ)Open Street MapsCắm mốc trực tiếp trên bản đồ vị trí nơi ở của học sinh.
Program TyperadioLựa chọn một trong số các chương trình học có trong danh sách
Undergraduate Programcheck boxLựa chọn một hoặc nhiều ngành học

Bạn xem thêm về cách tạo custom fields ở video này nhé:

Sau khi tạo xong các field, bạn tạo một post mới trong post type Student Info thì sẽ thấy các field hiển thị như sau:

Tất cả các custom fields cho biểu mẫu đăng ký sẽ hiển thị ở post editor trong phần backend.

Nếu bạn giữ nguyên bố cục các field như này, thì khi đưa ra ngoài frontend, mỗi field cũng sẽ là một dòng kiểu vậy. Mình cảm thấy như thế không ổn, và người điền form sẽ khó theo dõi để nhập thông tin cũng như là khó thao tác.

Vì vậy, mình sẽ điều chỉnh lại một chút bằng cách gộp nhóm các field và chia cột cho chúng.

Sắp xếp bố cục hiển thị cho custom fields: gộp nhóm và chia cột

Để sắp xếp các field sao cho bố cục của trang đăng ký giống như với những gì mình mong muốn, thì mình sẽ cần dùng đến extension Meta Box GroupMeta Box Columns. Meta Box Group sẽ giúp mình gộp nhóm các field lại với nhau, còn Meta Box Columns giúp mình chia cột.

Nguyên tắc của việc chia cột đó là: chiều ngang của phần khung chứa field sẽ được chia thành dạng grid với 12 đơn vị. Bạn hãy coi đây là đơn vị tính cho field luôn nhé, tức là 1 field mà full width thì sẽ có kích thước là 12 đơn vị.

Trong phần settings của từng field, bạn có thể thiết lập kích thước này luôn.

Phần Columns cho phép bạn đặt kích thước của từng field.

Nếu bạn đặt giá trị của mục này là 9 chẳng hạn, thì tức là field đó của bạn sẽ hiển thị trong 1 khoảng rộng có chiều dài là 9 đơn vị.

Meta Box sẽ sắp xếp các field vào cùng 1 dòng sao cho tổng kích thước của các field nhỏ hơn hoặc bằng 12.

Lưu ý: Group cũng là 1 field nên cũng được thiết lập kích thước giống như những field khác. Lúc này, bên trong group cũng tiếp tục chia thành grid 12 đơn vị.

Để bạn hiểu rõ hơn, mình có chia trực tiếp trên form đăng ký như này:

Bố cục của form đăng ký về các custom fields được chia theo nhóm và cột.

Như vậy thì mình sẽ cần phải thiết lập lại các field của mình như sau:

FieldField typeColumns
1. Personal Informationheading12
(no label)group9
Full Nametext4
Middle Initialtext4
Last Nametext4
Date of Birthdate6
Genderradio6
Passport IDtext6
Nationalityselect advanced6
Photoimage upload3
2. Student’s Contact Informationheading12
Emailemail6
Phone Numbertel6
Addresstext12
(no label)group6
Buildingtext12
Roadtext12
Statetext12
Countrytext12
Postcodenumber12
MapsOpen Street Maps6
3. Contact in Emergency Situationsheading12
Full Namegroup12
First Nametext4
Middle Initialtext4
Last Nametext4
Addresstext12
Emailemail4
Phone Numbertel4
Countrytext4
4. Program / Course Informationheading12
Program Typeradio12
Undergraduate Programscheck box12
Post Graduate Programsradio12
Master’s Programscheck box12
Graduate Certificates and Diplomascheck box12
PhD Programscheck box12

Bây giờ, các field của mình sẽ hiển thị trong post editor như này:

Tất cả custom fields hiển thị với bố cục đẹp mắt trong post editor.

Các thiết lập đặc biệt cho các custom fields

Ở đây, mình có thiết lập một số field đặc biệt để khi đưa vào sử dụng thì học sinh sẽ cảm thấy chuyên nghiệp hơn. Những thiết lập này đều là tính năng có sẵn của Meta Box hoặc là ứng dụng của các extension mà Meta Box có như là: Meta Box Geolocation, Meta Box Conditional Logic.

Cùng xem thử nhé!

Thiết lập cho field Maps

Ở phần settings của field Maps (Open Street Maps), bạn cần nhập ID của field Address (field được dùng để nhập thông tin địa chỉ của học sinh) vào mục Address field. Đây là thiết lập bắt buộc, nên nếu bạn bỏ qua thì sẽ bị báo lỗi nhé.

Phần settings của field Maps (Open Street Maps)

Để bản đồ Open Street Maps hoạt động được, thì bạn cũng cần tới tab Settings của field group, kéo xuống phần Custom Settings > Add New, nhập key là geo và value là true.

Cái này có được nói khá rõ trong tài liệu hướng dẫn của plugin rồi nhé.

Thiết lập cho các field Building, Road, State, Country, Post Code

Mình sẽ đặt ID của các field Building, Road, State, Country, Post Code lần lượt là building, road, state, country, và postcode. Đồng thời, đặt các field này là Read only.

Tại sao lại như vậy? Bởi vì là khi đã thiết lập field Maps như trên, nếu học sinh nhập thông tin vào field Address, thì các thông tin về state, country và post code sẽ tự động được lấy và điền vào các field này. Đây chính là tính năng của extension Meta Box Geolocation.

Vì đã được tự động điền rồi nên mình đặt là Read only để học sinh sẽ không cần phải điền vào nữa, giúp giảm thiểu việc viết nhầm thông tin thôi. Cái này thì là tùy các bạn.

Thiết lập cho các field ở phần Program / Course Information

Do danh sách các khóa học khá là dài, và lại chia thành nhiều nhóm ngành học khác nhau, nên mình sẽ sử dụng Meta Box Conditional Logic để đặt điều kiện cho các field khi nào mới hiển thị. Việc này vừa giúp trang đăng ký nhìn trông gọn gàng, vừa giúp tạo cảm giác chuyên nghiệp hơn.

Ví dụ:

Field Program Type có 3 lựa chọn tương ứng với 3 giá trị như sau:

undergraduate_program: Undergraduate Program

postgraduate_program: Postgraduate Program

phd_program: PhD Program

ID và lựa chọn của custom field.

Mình sẽ đặt điều kiện để các trường Undergraduate Programs, Postgraduate Programs, và PhD Program chỉ hiển thị khi học sinh chọn lựa chọn tương ứng với 1 trong 3 lựa chọn trên.

Ở phần thiết lập Advanced của field Undergraduate Programs, kéo xuống phần Conditional logic, chọn Add Rule và thiết lập như sau:

Ở phần thiết lập Advanced của field Undergraduate Programs, kéo xuống phần Conditional logic, chọn Add Rule và thiết lập

Trong đó:

  • program_type: là ID của field Program Type
  • undergraduate_program: là giá trị tương ứng của lựa chọn Undergraduate Program trong field Program Type

Bạn cũng làm tương tự như vậy với 2 field còn lại nhé. Bạn chỉ cần thay giá trị của lựa chọn trong phần Conditional logic là được.

Ngoài ra, bạn cũng thấy chương trình học Postgraduate Programs lại chia nhỏ ra thành 2 nhóm nhỏ, trong mỗi nhóm lại có ngành học khác nhau. Nên mình cũng tạo thêm cho mỗi nhóm ngành này một field riêng. Đồng thời, mình cũng đặt điều kiện tương tự cho chúng.

Cuối cùng, các bạn sẽ thấy các field của mình hiển thị ra như sau:

Bạn xem các field hiển thị như thế nào sau khi đã cài đặt.

Bước 3: Tạo trang đăng ký nhập học ngoài frontend

Bây giờ, chúng ta sẽ cần tạo một trang trắng ngoài frontend (mình đặt tên trang này là Admission Form), sau đó đưa toàn bộ form đăng ký nhập học với các custom fields mà chúng ta vừa tạo hiển thị ra trang này.

Ngoài ra, ở đây, ý tưởng của mình là trang này sẽ có giao diện như một tờ giấy đăng ký ngoài đời thật đi kèm với logo của trường, nên sẽ không có các phần header hay footer của website. Chính vì thế, cách làm trong bài này sẽ hơi khác so với cách đưa các submission form ra ngoài front end thông thường khác một chút (bạn xem cách thông thường như ở bài tạo bảng dữ liệu nhé).

Mình sẽ dùng extension MB Views của Meta Box để tạo nội dung cho trang đăng ký này.

Bạn vào menu Meta Box > Views > Add New.

Trước tiên, bạn kéo xuống phần Settings để thiết lập cho view này đã nhé. Trong đó, Admission Form ở phần Location chính là tên của trang đăng ký mà mình đã tạo.

Bạn thiết lập cho view ở mục settings. Trong đó, Admission Form ở phần Location chính là tên của trang đăng ký mà mình đã tạo

Ở phần Template, mình thêm đoạn code sau:

<div class="form-header">
<!--// Đặt logo của trường vào header của trang -->
    <img src="http://domain.com/wp-content/uploads/2021/05/Logo-1.png" style="width: 20%">
    <div class="form-header__right" style="text-align: right">
<!--    // Đặt tiêu đề H1 cho trang ở lề phải của header -->
        <h1>University Admission Form</h1>
        <span>Student ID: ________ <i>(For office use only)</i></span>
    </div>
</div>
<!--// Shortcode của field group để hiển thị các field trong form đăng ký -->
[mb_frontend_form id='university-admission-form']

Để lấy shortcode của field group, bạn vào Meta Box > Custom Fields, bạn sẽ thấy đoạn shortcode ở đây:

Để lấy shortcode của field group, bạn vào Meta Box > Custom Fields

Lưu ý là để có đoạn shortcode này, thì bạn phải bật extension MB Frontend Submission của Meta Box nhé. Extension này sẽ tự động sinh ra shortcode này để bạn dùng.

Tuy nhiên, lúc này shortcode sẽ có dạng:

[mb_frontend_form id='university-admission-form' post_fields='title,content']

Mình không cần sử dụng đến 2 field Title và Content (2 field mặc định của WordPress) nên mình đã xóa luôn cả cụm post_fields='title,content' đi nhé. Để hiểu thêm về các thuộc tính dùng trong shortcode này, bạn đọc thêm tại đây nhé.

Bây giờ, hãy cùng xem các field hiển thị ra trang đăng ký nào.

Các custom field hiển thị ngoài frontend mà chưa có bất kỳ tạo kiểu nào.

Mình thấy hiển thị chưa được đẹp lắm, đồng thời muốn ẩn cả header và footer nguyên bản của website đi nên sẽ dùng CSS để style lại một chút. Mình sẽ thêm đoạn code CSS sau vào tab CSS của chính phần View mà mình vừa tạo nhé.

body {
    background: #e6e6e6;
}
.page-template-wide .container {
    padding: 20px 12px;
    background: #fff;
}
.header, .footer {
    display: none;
}
.form-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 20px;
}
.form-header h1 {
    text-align: right;
}
.rwmb-heading-wrapper {
    background: #e6e6e6;
    text-align: center;
}
.rwmb-heading-wrapper h4 {
    border-bottom: none;
}
.select2-container--default .select2-selection--single {
    height: 42px !important;
}
.select2-container--default .select2-selection--single .select2-selection__rendered {
    line-height: 42px !important;
}
.rwmb-image-item.attachment.estar-image-4x6 {
    width: 100%;
}
.rwmb-media-list:not(:empty) {
    padding: 0;
}
.rwmb-input-list.rwmb-inline, .rwmb-input-list {
    padding: 0;
}
[type="checkbox"], [type="radio"] {
    margin-right: .25rem;
}
.rwmb-input .description {
    margin-bottom: 0;
}
.address-group {
    opacity: 0.5;
}
.address-group input {
    pointer-events: none;
}
Bạn thêm đoạn code CSS sau vào tab CSS của chính phần View mà mình vừa tạo để tạo kiểu cho form đăng ký.

Và đây là trang đăng ký nhập học sau khi đã hoàn thiện của mình này:

Đây là trang đăng ký nhập học sau khi đã hoàn thiện.

Bước 4: Tạo trang xem lại nội dung đăng ký

Đến đây, mình vẫn muốn làm thêm một chút. Đó là thay vì gửi lời cảm ơn hay thông báo cho học sinh biết là đã đăng ký thành công giống như những submission form thông thường, thì mình muốn họ được xem lại toàn bộ nội dung họ đã nhập, xem mã học sinh (do hệ thống tự sinh ra và điền vào form), và thậm chí có thể in trang này ra để lưu hoặc ký/nộp (nếu cần) nữa.

Mình tạo một trang mới có tên là Review Admission Form. Sau khi học sinh nhập thông tin vào bản đăng ký xong thì họ sẽ được redirect về trang này.

Để tạo link redirect, mình sẽ cần thêm đoạn code sau vào file functions.php của theme:

add_filter( 'rwmb_frontend_redirect', function( $redirect, $config ) {
    if ( 'university-admission-form' !== $config['id'] ) {
        return $redirect;
    }
    $redirect = 'https://domain.com/review-admission-form/?student_id=' . $config['post_id'];
    return $redirect;
}, 10, 2 );

Trong đó:

  • 'rwmb_frontend_redirect': hook này cho phép bạn thay đổi URL của trang sau khi submit form để redirect sang một trang khác;
  • university-admission-form: là ID của field group dùng cho form đăng ký nhập học mà chúng ta đang dùng;
  • https://domain.com/review-admission-form/?student_id=' . $config['post_id']: là cấu trúc của link redirect mà chúng ta sẽ dùng;

Khi đó, link redirect của mình sẽ có dạng:

https//domain.com/review-admission-form/?student_id=12345/

Ví dụ như 12345 sẽ là ID của bài viết mà bạn học sinh vừa mới nhập thông tin nhập học vào nhé.

Tiếp theo, vẫn trong file functions.php, mình thêm đoạn code sau:

function estar_get_method_function( $param ) {
    return isset( $_GET[$param] ) ? $_GET[$param] : '';
}

Đoạn code này là để lấy giá trị của biến student_id trên đường link redirect kia đó. Mình sẽ cần dùng giá trị này ngay sau đây.

Bạn thêm đoạn code vào file functions.php của theme để có link direction đến trang đánh giá

Bây giờ, mình sẽ tạo một view mới trong phần Views với tên là Review Admission Form cho trang mới mà mình redirect tới này. Vì trang review này sẽ có cấu trúc và nội dung giống hệt như trang đăng ký, nên nội dung của view sẽ tương tự như vậy, bao gồm cả template, settings, và CSS. Tuy nhiên, Location sẽ là trang Review Admission Form.

Và ở phần Template của view này, mình có thay đổi một chút như sau:

{% set pupil_id = mb.estar_get_method_function( 'student_id' ) %}
{% if pupil_id %}
    <div class="form-header">
        <img src="http://domain.com/wp-content/uploads/2021/05/Logo-1.png" style="width: 20%">
        <div class="form-header__right">
            <h1>University <br> Admission Form</h1>
            // Tự động điền mã học sinh
            <span>Student ID: {{ pupil_id }}</span>
        </div>
    </div>
    // Hiển thị các custom fields form đăng ký cùng với các dữ liệu đã được nhập vào trong bài viết có ID tương ứng
    [mb_frontend_form id='university-admission-form' post_id="{{pupil_id}}"]
    // Thêm nút in bản đăng ký vào phần Footer
    <div class="form-footer">
        <button onclick="window.print()" class="rwmb-button">Print</button>
    </div>
{% endif %}
Bạn tạo một chế độ xem khác với cùng một bố cục cho trang đánh giá.

Giải thích:

Như mình đã nói lúc trước, mỗi bản đăng ký nhập học trực tuyến của học sinh sẽ được lưu vào một bài viết ở post type Student Info. Vậy nên, mình đã đưa thêm thuộc tính post_id vào trong shortcode trên để quy định là dữ liệu từ custom fields của bài viết nào sẽ được lấy ra hiển thị.

Ngoài ra, mình cũng tạo thêm 1 biến là pupil_id. Biến pupil_id này sẽ được ghi nhận giá trị tự động nhờ hàm estar_get_method_function( 'student_id' ) dựa trên biến student_id.

Thêm nữa là do trang review này không còn nút Submit, mà thay vào đó là nút Print để học sinh in bản đăng ký, nên mình đã thêm nút in vào footer của trang, đồng thời thêm đoạn CSS này vào để ẩn nút submit đi:

.rwmb-form-submit {
    display: none;
}

Sau khi thử submit nội dung, thì đường link của mình tự động thay đổi và Student ID cũng tự động được điền rồi này:

Link direction chạy và chuyển hướng đến trang đánh giá.

Và đây là toàn bộ trang review của mình sau khi nhập thử một bản đăng ký.

Đây là toàn bộ trang review của mình sau khi nhập thử một bản đăng ký

Lời cuối

Vậy là mình đã hoàn thành toàn bộ tính năng đăng ký nhập học online cho website của mình rồi đó. Còn bạn thì sao? Bạn có thấy phần nào khó hiểu hay còn khúc mắc ở đâu không? Hãy chia sẻ để cùng thảo luận ở phần comment nhé.

Ngoài ra, với bài hướng dẫn này, mình cũng rất hy vọng các bạn có thể ứng dụng cách làm này cho cả những form đăng ký khác nữa, như là khai báo y tế, hồ sơ nhập viện, bệnh án, hồ sơ nhân viên, hồ sơ công ty, … Có vẻ có khá nhiều ngành nghề sẽ cần đến việc số hóa lưu trữ hồ sơ đấy nhỉ. Chúc các bạn thành công nha!

Để lại bình luận

Email của bạn sẽ không được hiển thị công khai. Các trường bắt buộc được đánh dấu *