Technology has been applied more and more popularly, even in education, and led to obvious changes in this special field. Notably, when the Covid-19 pandemic broke out and caused serious impacts on our lives, education institutions mostly started online teaching classes. As a result, school admission also can be done online. Students do not need to go to schools to hand in their profiles anymore. They can stay at home, and fill in their online admission forms. This can save expenses for traveling and delivery, as well as reduce risks of exposure. On the other hand, it helps the school office easily digitize the student’s data.

In this post, we are going to create an admission form for a university like that.

An online admission form for a university

Please be informed that every picture or information used in this tutorial is just for the illustration purpose. It’s not about any specific individual or organization.

Before Getting Started

An admission form usually has a lot of custom fields to be filled in, so I definitely need Meta Box to make a submission form. I also need these extensions:

  • MB Custom Post Types & Custom Taxonomies;
  • Meta Box Builder;
  • Meta Box Group;
  • Meta Box Columns;
  • Meta Box Geolocation;
  • Meta Box Conditional Logic;
  • MB Frontend Submission;
  • MB Views.

All of these extensions are available in Meta Box AIO when you have Developer Bundle or Lifetime Bundle of Meta Box. We will need a lot of extensions so I suggest you get either of those bundles to save money.

Video Version

Step 1: Create a New Custom Post Type

I will save the information of each student in one post of a new post type, which can be called Student Info.

To create this post type, we will need the MB Custom Post Types & Custom Taxonomies extension of Meta Box. Go to Meta Box > Post Types > Add New and enter the information for your new post type.

Step 2: Add Custom Fields for the Admission Form

Content and the Type of Fields

Regularly, an admission form may have a lot of fields for students to fill in, like personal information, address, contacts, family information, choice of major, medicine information, etc. It is up to the management strategies and demands of each school or university.

Here I just add some basic fields like in the above image. Most of those fields are the Text or Number fields. In some special others, they might be a little different, for example:

Field Types of Field Content
1. Personal Information heading To divide the content into separate parts to make it clearer
Nationality select advanced Allow students to choose one or more nationalities from a pre-made list
Photo image upload Allow uploading pictures from computer folders, not Media Library of the website
Maps Open Street Maps Point out the exact address of students on the map
Program Type radio Choose one of the studying programs on a list
Undergraduate Program check box Choose one major or more

If you want to know more about adding custom fields, please take a look at this:

After adding all of them, you can add a new post in the Student Info post type, and you will see they look like this:

All the custom fields for the admission form display in the post editor in the backend

If you keep this layout for the fields, each field will be a line on the frontend as the same as you see here. I think it is not appropriate, because people will find it difficult to follow and manipulate.

Thus, I will adjust a little bit by grouping the fields and setting them into columns.

Set Custom Fields into Groups and Columns

To arrange the fields into the layout that I want, I will need Meta Box Group and Meta Box Columns extensions. Meta Box Group can help me group the fields, and Meta Box Columns helps me to divide columns.

The rule of dividing columns is: a horizontal line will be divided into 12 grids. In the settings section of each field, you can set up this size.

The Columns section allows to set the size of the custom fields

If you set this section as 9, it means this field will be displayed in 9 grids.

Meta Box will arrange fields into a line so that their size is not more than 12 in total.

Note: Group is also a field, so its size will be set up like those of the other fields. Besides, a line inside the group also is divided into 12 grids.

To make it clearer, I draw on the form as below:

layout of the admission form about how the custom fields are arranged in groups and columns

So, I will set up my custom fields again like this:

Field Field type Columns
1. Personal Information heading 12
(no label) group 9
          Full Name text 4
          Middle Initial text 4
          Last Name text 4
          Date of Birth date 6
          Gender radio 6
          Passport ID text 6
          Nationality select advanced 6
Photo image upload 3
2. Student’s Contact Information heading 12
Email email 6
Phone Number tel 6
Address text 12
(no label) group 6
          Building text 12
          Road text 12
          State text 12
          Country text 12
          Post code number 12
Maps Open Street Maps 6
3. Contact in Emergency Situations heading 12
Full Name group 12
          First Name text 4
          Middle Initial text 4
          Last Name text 4
Address text 12
Email email 4
Phone Number tel 4
Country text 4
4. Program / Course Information heading 12
Program Type radio 12
Undergraduate Programs check box 12
Post Graduate Programs radio 12
Master’s Programs check box 12
Graduate Certificates and Diplomas check box 12
PhD Programs check box 12

Now, my custom fields will show up in the post editor with the new look:

all the custom fields display in the beautiful layout

Special Settings of Custom Fields

I want the student to find the admission form more professional, so I added some special custom fields. They are all available features of Meta Box or its extensions like Meta Box Geolocation, Meta Box Conditional Logic.

Let’s go to see it!

Settings of the Maps Field

In the settings section of the Maps field (Open Street Maps), you need to fill in the ID of the Address field in the Address field section. This is compulsory. If you miss it, an error alert will show up.

settings for the open street maps field

To make the Open Street Maps work, go to the Settings tab of the field group, scroll down to Custom Settings > Add New, enter geo as the key, and true as the value.

Please go to the documentation for more information about this field type.

Settings of the Building, Road, State, Country, Post Code Fields

I set the ID of the Building, Road, State, Country, Post Code fields as building, road, state, country, and postcode respectively.

Why? Because when you have set up the Maps field like above, if students write their information in the Address field, the data of state, country and postcode will be automatically imported to the corresponding fields. This is a feature of the Meta Box Geolocation extension.

The information has just been automatically filled in, so I set the fields as Read only, and students will not have to fill in by hand and make mistakes. It is up to you. If you do not want to do like me, that’s fine.

Settings of the Fields in the Program / Course Information Section

The list of courses is quite long and divided into many different majors as well, so I will use Meta Box Conditional Logic to set when the fields show up. This will make the form clearer and more professional.

For example:

The Program Type field has 3 options and 3 values respectively:

  • undergraduate_program: Undergraduate Program
  • postgraduate_program: Postgraduate Program
  • phd_program: PhD Program

options and ID of a custom fields

I will set conditions for Undergraduate Programs, Postgraduate Programs, and PhD Program fields to show up only when students choose the corresponding option in the Program Type field.

So, in the Advanced settings tab of the Undergraduate Programs field, scroll down to the Conditional logic section, choose Add Rule, and set up like this:

settings for custom fields with a conditional logic rule

Here we have:

  • program_type: the ID of the Program Type field
  • undergraduate_program: the corresponding value of the Undergraduate Program option in the Program Type field.

Do likewise with the other two fields. You just need to change the values of the options in the Conditional logic section.

Besides, you can see the Postgraduate Programs have two small options, which have different majors. Thus, I also add a new field for each of the groups. At the same time, I set up the same kind of conditions for them.

Finally, you will see all my custom fields show up like this:

see how the maps fields and conditional logic run

Step 3: Show the Admission Form to the Frontend

Now, we need a blank page on the frontend (I named it Admission Form), and then put the form with all of the fields we have made on this page.

Besides, I got an interesting idea. This page will look like a paper of admission form with a school logo, so it does not have the website footer or header. Thus, today we will do a new way to show the form to the frontend. It will be a little different from how we used to do it (as you may see in the How to Create an Auto-Updated Cheat Sheet).

I will use the MB Views extension of Meta Box to add content for this admission form page.

Go to Meta Box > Views > Add New.

First, scroll down to the Settings section to set up for this view. Set Admission Form is the page we want in the Location section.

Add view to build the template for the admission form page

In the Template section, I will add some codes:

<div class="form-header">
<!--// Put logo of the university to the header – >
    <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">
<! – // Set H1 for page on the header – >
        <h1>University Admission Form</h1>
        <span>Student ID: ________ <i>(For office use only)</i></span>
    </div>
</div>
<!--// Display the field group using shortcode – >
[mb_frontend_form id='university-admission-form']

To get the shortcode of the field group, go to Meta Box > Custom Fields, you will see it. Notice that you must enable the MB Frontend Submission extension of Meta Box first. This extension will automatically generate the shortcode for you.

get the short code of the field group

However, at this time, the shortcode will look like this:

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

I deleted the attribute post_fields='title,content' because I don’t want to show the Title and Content fields. To get to know more about the attributes of this shortcode, you can have a look at this documentation.

Now, let’s see how the field looks on the admission form page:

the custom fields display on the frontend without any style

I think the display is not really stunning. I also want to hide both the default header and footer of the website. So, I will style it a little bit. But now, I add CSS codes into the CSS tab of the View that I have created for the Admission Form page.

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;
}

style for the submission form in the frontend using CSS right in the view without touching theme file

And this is my admission form page getting done. But, it’s not the end here!

the admission form page of the university in the final look

Step 4: Set a Page for Reviewing Admission Form

I want to add something more to my admission form. Instead of saying thank you or notifying students for successful submissions, I expect they can review what they have written in the forms. For example, they can check student IDs (automatically shown and filled in the form), or even print the admission form pages out to save them or hand them in (if any).

Create a new page again, called Review Admission Form. After students fill their information in the forms, they will be redirected to this page.

To make the redirect link, I need to add some codes to the functions.php file of the 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 );

Here we have:

  • 'rwmb_frontend_redirect': this hook allows you to change the URL of the page after students submit the form to another page;
  • university-admission-form: the ID of the field group for the admission form we are using;
  • https://domain.com/review-admission-form/?student_id=' . $config['post_id']: the structure of the redirect link we will use;

At that time, my redirect link will be in this form:

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

For example, 12345 is the ID of the post that the student has just entered information into its custom fields.

Next, still in the functions.php file, I will add these codes:

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

This code will get and return the value of the student_id variable from the redirect link. We will need this value right in the next move.

add code to the theme file to have redirect link to the review page

Then, create a new view in the Views section again. This view will be used for the new page that I will redirect to, the Review Admission Form page. It has the same content and style as the Admission Form page, so its view is the same as well, including template, settings, and CSS. The difference is the Location, which will be the Review Admission Form page at the moment.

In the Template section of this view, I’ll make a small change:

{% 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" style="text-align: right">
            <h1>University Admission Form</h1>
<! –        // Auto-generate the student ID – >
            <span>Student ID: {{ pupil_id }}</span>
        </div>
    </div>
<!--// Display the custom fields along with values in the corresponding post by post ID – >
    [mb_frontend_form id='university-admission-form' post_id="{{pupil_id}}"]
<!--// Add the Print button into the footer – >
    <div class="form-footer">
        <button onclick="window.print()" class="rwmb-button">Print</button>
    </div>
{% endif %}

create another view with the same layout for the review page

Explanation:

As I have mentioned before, each admission form will be saved in a post of the Student Info post type. Thus, I have added the post_id attribute to the shortcode above, so that only the data from the custom fields of the corresponding post can show up.

Besides, I also created one more variable, pupil_id. This variable will recognize its value automatically thanks to the return value of the estar_get_method_function( 'student_id' ) function.

Additionally, the review page has a Print button instead of Submit, so that students can print their admission forms out. Thus, I added that button to the footer of the page, and add this CSS to hide the Submit button:

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

Try a test, after submitting information, the link is changed and the Student ID is generated as well:

the redirect link run and redirect to the review page

Finally, this is my whole review page.

the review admission form page for student to review or print in the final look

Last Words

I have finished my tutorial about how to create an admission form for school or university websites. What do you think? If you find some parts difficult to understand, please feel free to leave some comments for us.

More than that, I hope that this tutorial can be helpful for many people to make various kinds of admission forms like health declarations, hospital profiles, staff profiles, etc. It seems that a lot of industries will need to digitize their information and documents. Good luck to you guys!

Pick Tools for Your Case Studies

Other case studies you might be interested in

  1. Create A Dynamic Landing Page in WordPress Using Custom Field
  2. How to Create ACF Flexible Content Field with Meta Box
  3. How to Create a Product Page using Meta Box Plugin
  4. How to Add Related Posts to WordPress Using Meta Box
  5. How to Create a Classified Ads Website using Meta Box
  6. Create Posts Series in WordPress Using Meta Box
  7. How to Add Guest Author in WordPress using Meta Box (Part 1)
  8. How to Add Guest Author in WordPress using Meta Box (Part 2)
  9. Create Dynamic Favicon in WordPress using Meta Box plugin
  10. How to Build a Hotel Booking Website Using Meta Box - P1
  11. How to Build a Hotel Booking Website Using Meta Box - P2 - Booking Page in Backend
  12. How to Build a Hotel Booking Website Using Meta Box – P3 – Booking Page for Customer
  13. How to Create an FAQs Page Using Meta Box
  14. How to Manually Reorder Posts with Meta Box
  15. How to Add Custom JavaScript Actions Using Button Field with Meta Box
  16. Display a User List On the Frontend with Meta Box
  17. How to Build a Hotel Booking Website Using Meta Box - P4 - Booking Management Page
  18. How to Filter Posts by Custom Fields and Custom Taxonomies on Archive Pages
  19. How to Use Custom HTML Field to Output Beautiful Texts or Output Custom CSS
  20. Create an OTA Website Like Booking.com with Meta Box Plugin - P1: Create a Page to Introduce Hotel Rooms
  21. Create an OTA Website Like Booking.com with Meta Box Plugin - P2: Create Filters on the Archive Page
  22. Create an OTA Website Like Booking.com with Meta Box Plugin - P3: Create Filters for Single Hotel Pages
  23. How to Add Custom Fields to Display Banners using Meta Box Plugin
  24. How to Create Download Buttons Using Custom Fields with Meta Box Plugin
  25. How to Create a Recipe with Meta Box Plugin
  26. How to Create an Auto-Updated Cheat Sheet in WordPress
  27. How to Create Online Admission Form for School or University
  28. How to Create Online Reservation Form for Restaurants using Meta Box

Leave a Reply

Your email address will not be published. Required fields are marked *