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, e.g., 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. From the Content Block Library, under Job blocks, hover over Job Search Results and click Add.
4. Click the Edit Block button.
5. In the Job Search Results modal, configure as required using the following sections. See below for Design options.
   1. Filters - The available fields are:
      1. Workplace Types (Remote, Hybrid, On Site)
      2. Department
      3. Category
      4. Category Group
      5. Employment type
      6. Level
      7. City
      8. State
      9. Country
      10. Location
      11. Location Group
      12. Requisition Identifier
      13. Opening at (date/time)
      14. Opening on (date)
      15. Closing at (date/time)
      16. Closing on (date)
      17. Remote (To be removed)

      18. Hybrid (To be removed) 

          Note:

          The Category Group filter operates independently of the Category filter, and the Location Group filter operates independently of the Location filter.

   2. Configuration options:
      1. Filter values: Choose whether to show all filters or just those currently assigned to posted jobs.
      2. Counts: Choose whether the counts should remain static based on posted jobs or change based on selected filters.
   3. Layout - The available options are:
      1. Filter layout
      2. Results layout
      3. Location format
      4. Location sorting: Indicates whether to sort locations alphabetically or to display them in the order specified by the integrated ATS.
      5. Sort by
      6. Job results displayed per page
      7. Pagination position: Indicates whether to show results count and pagination controls above or below the search results.
      8. Enable "Clear all filters": This resets the currently selected filters. By design, it does not clear the keyword search box.
      9. Enable "Sort by:" dropdown: When enabled, the candidate can now choose how to order the search results. Supported options are by title (A to Z, Z to A) or by last updated date (oldest to newest, newest to oldest).
      10. Enable active filters: Indicates whether the name of the selected filters is displayed below the keyword search box. Only available when using the desktop filter layout.
      11. Display counts
   4. Search form:
      1. Enable "Jobs Near Me"
      2. Search button text?
      3. Advanced with CSS Class settings
6. Click the Save button to keep the settings.

Design options

Filter Layouts

Side Panel

Drop-downs

Configuring drop-down filter size

By default, it is configured for 5 filters.

To adjust the drop-down 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.