Recruitment Marketing

Public

You can configure a jobs search form with options for different filters and results layouts.

This block type is only available for use on a:

• Job Page
• Search Page
• Blog Post Page
• Candidate Settings Page
• Not Found Page
• Forbidden Page

Accessing the Page Editor

To access the Page Editor for these pages

1. From the side menu, under Content click Web Pages.
2. Click the Careers Website tab.
3. In the Settings section, click the relevant item, for example: Search Page.

Adding a job search results block

1. In the Page Editor, click the Add Row icon to add a row of the relevant dimensions. Alternatively, if a Job Search Results block already exists, navigate to it and click the Edit Block button.
2. Within that row, click the Add Block button.
3. Select Job Search Results from the drop down.
4. Click the Edit Block button.
5. In the Job Search Results pop up, configure as required using:
   Refer below for design options.
   • Filters
     • Available Fields:
       • Remote
       • Hybrid
       • Department
       • Category
       • Employment type
       • Level
       • City
       • State
       • Country
       • Location
       • Requisition Identifier
       • Opening at (date / time)
       • Opening on (date)
       • Closing at (date / time)
       • Closing on (date)
     • Configuration options:
       • Filter values: choose whether to show all filters, or just those currently assigned to posted jobs
         
       • Counts: choose whether the counts should remain static based on posted jobs, or change based on selected filters
         
   • Layout
     • Available options:
       • Filter layout
       • Results layout
       • Location format
       • Sort by
       • Job results displayed per page
       • Enable "clear all filters"
       • Enable "Sort by:" dropdown
       • Enable active filters - indicates whether the name of the selected filters is displayed below the keyword search box
   • Search form
     • Enable "Jobs Near Me"
     • Search button text?
     • Advanced with CSS Class settings
6. Click the Save button to keep the settings.

Design options

Filter Layouts

Side Panel

Dropdowns

Configuring dropdown filter size

By default it is configured for 5 filters, To adjust the dropdown size for 3 filters add the following to your page's theme CSS:

.job-search-results-dropdown-filter-col {
  flex: 33%;
  max-width: 33%;
}

Results Layout

Table Layout

Card Layout

Configuring card columns

By default there are two columns of job cards if the screen width is larger than 576px, below this it has a single column.

Adding some CSS to your page's theme can change the number of columns. The number of columns is responsive and you can configure a different number of columns at different screen widths. In this case, it's 4 columns above 992px and 3 columns above 576px.

@media (min-width: 576px) {
  .job-search-results-card-col {
    flex: 0 0 33%;
    max-width: 33%;
  }
}

@media (min-width: 992px) {
  .job-search-results-card-col {
    flex: 0 0 25%;
    max-width: 25%;
  }
}

The breakpoints you should use for configuring when to change the number of columns are 576px, 768px, 992px & 1200px.