Skip to main content

Creating online admission form for schools

instead of submitting hard copies for student information, schools may have online submission forms then students can submit on the website. We’re going to find out how to create that online admission forms in this practice.

Here is the example.

Example of the online admission form

Example of the online admission form

Example of the online admission form

Preparation

Since all the additional information will be saved in different custom fields, we need Meta Box. It’s free and available on wordpress.org, so you can download it directly.

To have advanced features, we need some of its extensions:

They’re all in the Meta Box AIO. If you haven’t had it, you can download and install each extension individually.

1. Creating a new custom post type

Go to Meta Box > Post Types > Add New to create a new post type. In my case, the new post type is Student Info.

Create a new custom post type

After publishing, you will see a new menu in the Admin Dashboard.

New post type appear in the Admin Dashboard

2. Creating custom fields

Field types

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 Type of field Content
1. Personal InformationheadingTo divide the content into separate parts to make it clearer
Nationalityselect advancedAllow students to choose one or more nationalities from a pre-made list
Photoimage uploadAllow uploading pictures from computer folders, not Media Library of the website
MapsOpen Street MapsPoint out the exact address of students on the map
Program TyperadioChoose one of the studying programs on a list
Undergraduate Programcheckbox listChoose one major or more

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:

Add a new post in the Student infor post type

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.

Creating groups and set columns

Just add a field in the type of group, and add other fields to be its sub-fields.

Add other fields to be sub-fields

To display fields in columns, just set the number in their settings as above.

Each row to display the fields will be divided into 12 grids. If you want the fields displayed in columns, just change the number in the box to any number up to 12.

Change the number in the box

Here is the settings for columns of each field:

Field Field type Columns
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 NumberText6
AddressText12
(no label)Group6
BuildingText12
RoadText12
StateText12
CountryText12
Post CodeNumber12
MapsOpen Street Maps6
3. Contact in Emergency SituationsHeading12
Full NameGroup12
First NameText4
Middle InitialText4
Last NameText4
AddressText12
EmailEmail4
Phone NumberText4
CountryText4
4. Program/Course InformationHeading12
Program TypeRadio12
Undergraduate ProgramsCheckbox List12
Postgraduate ProgramsRadio12
Master’s ProgramsCheckbox List12
Graduate Certificates and DiplomasCheckbox List12
PhD ProgramsCheckbox List12

Here are all the fields that I’ve created in groups and sections:

The created fields

The created fields

The created fields

The created fields

Special settings of custom fields

Besides the fields that have no special settings, there are some fields that you need to focus and set up for them. Let’s see!

Settings of the Maps field

To set up the Maps field, add the Open Street Maps field. Then, you need to fill in the ID of the Address field in the Address field section. This is compulsory to get the exact location from the Address field and markup on the maps.

Setting the maps field

To make it work, go to the Settings tab > Custom Settings > Add New to enter geo as the key and true as the value.

Enter geo in the settings

Add options for the fields in the type of selection

There are some fields in the type of selection where student can choose an option from a provided list, such as: Program Type, Undergraduate Programs, Postgraduate Programs and PhD Programs.

In the Program Type field, I fill in several options in the Choices box.

Fill in several options in the Choices box

For the Undergraduate Programs:

For the undergraduate programs

For the PhD Programs, do likewise.

For the PhD programs

Since the Postgraduate Programs will have two options, set it as the Radio field with two options filled in the Choices box.

Set the Postgraduate programs as Radio

Setting the fields

Set conditional logic for the fields in the type of section

Since there will be many majors and courses in each type of program, I will use MB Conditional Logic to set when the fields show up to avoid mess up on the page..

Here, I took the Program Type and Undergraduate Program fields as an example:

The Program Type field has three options with values and labels.To show up only the course of Undergraduate Programs chosen by the students, go to the Undergraduate Programs field > Advanced tab and set conditional logic as below:

The program type field

Note that: program_type is the ID of the Program Type field while undergraduate_program is the corresponding value of the Undergraduate Programs option that we’ve filled in the Choices box of the Program Type.

It means when the students chose the Program Type as Undergraduate Programs, all the courses of it will be displayed.

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

Change the values of the options

Then the fields will be shown or hide like this:

The fields will be shown or like

After creating all the fields, move to the Settings tab. Remember to choose the Location as Post Type and select the Student Info post type to apply these fields to it.

Set location for the created fields

When you publish the field group, notice the field group ID since we’ll use it later.

Notice the field group ID

Now, when creating a new post in the Student Info post type, you’ll see all the custom fields:

Create a new post in the post type

3. Displaying the form on the frontend

Creating a new page

Go to Pages > Add New to create a new blank page. Here, I created a page named Admission Form.

Create a new page

When creating the new page, set the featured image for it. This image will be use as the logo of the school.

Set the featured image for the created new page

Remember to copy the URL of the featured image since we’ll use it to display on the frontend.

Creating a template for the page

Go to Meta Box > Views > Add New to create a new template.

Create a template for the page

To display the admission form, add this code to the Template tab:

<div class="container">
<div class="form-header">
<!-// Put logo of the university to the header – >
<img src="http://metabox4.wpengine.com/wp-content/uploads/2022/11/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']
</div>

Add some code

Explanation:

http://metabox4.wpengine.com/wp-content/uploads/2022/11/Logo-1.png

This is the URL of the featured image of the page which we use for the logo on the page as well.

[mb_frontend_form id='university-admission-form']

This is the shortcode of the created field group. This shortcode is automatically generated for you thanks to the help of MB Frontend Submission.

To get the shortcode of the field group, make sure that you enable MB Frontend Submission. Then, go to Meta Box > Custom Fields and you will see the Shortcode column like this:

Get the shortcode of the field group

This is the full shortcode:

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

But I’ve already deleted the attribute post_fields='title,content' since I don’t want to show the Title and Content fields which are the default fields of WordPress.

Finally, scroll down to the Settings section, choose the Type as Singular. Then, set Location as Page and select the Admission Form page.

Choose type as singular

This is how the form looks on the page:

The form in the frontend

The form in the frontend

The form in the frontend

To have advanced styling, go to the CSS tab of the template and add some CSS code:

Add some css code for styling

4. Setting the page for reviewing

Instead of saying thank you or notifying students for successful submissions, I want to have a reviewing page for students to check student IDs or print the admission form. To do it, we need to create a reviewing page and redirect them to that page.

Creating a new page

Go to Pages > Add New to create a new page called Review Admission Form.

Create a new page

We’ll need a redirect link to redirect students from the admission form page to the reviewing page. To make the link, we 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 );

Explanation:

  • '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. You should change the domain to your one here.

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, add these codes:

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

Explanation:

  • estar_get_method_function: this is the name of the function that I set and estar is the theme I’m using. You can set it as you want;

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 the code to the box

Creating a new template for reviewing page

Go to Meta Box > Views to create a new template to redirect to the Review Admission Form page.

In the Template tab of the view, add this code:

{% set pupil_id = mb.estar_get_method_function( 'student_id' ) %}
{% if pupil_id %}
<div class="form-header">
<img src="http://metabox4.wpengine.com/wp-content/uploads/2022/11/Logo-1.png" style="width: 20%">
<div class="form-header__right" style="text-align: right">
<h1>University Admission Form</h1>
<span>Student ID: {{ pupil_id }}</span>
</div>
</div>
[mb_frontend_form id='university-admission-form' post_id="{{pupil_id}}"]
<div class="form-footer">
<button onclick="window.print()" class="rwmb-button">Print</button>
</div>
{% endif %}

Add the code to the template

In this code:

Because 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.

Create a pupil_id variable to recognize its value automatically thanks to the returned value of the estar_get_method_function( 'student_id' ) function.

Additionally, I want to have 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. To hide the Submit button, still in the created template, go to the CSS tab and add this code:

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

Add the code to the CSS tab

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

The final result

The final result

The final result