Hi! In this article, you'll find info about changing the default design of job postings and application forms with some easy-to-implement scripts and styles.
What are the scripts & styles and how to use them?
In TRAFFIT, you don't have to use the default job postings and application forms design. Instead, in a particular field in a job editing view, you can add scripts or styles that can modify the design of some system parts visible for candidates.
Those are nothing else than just a few lines of code, adding, i.e., new attributes to the buttons (change of color, text).
Additional scripts can be used on job posts and application forms, but also in job post templates and career site built with our generator.
Especially for you, we prepared a list of some popular scripts and styles used by our users. You can check them now on the list below đ
Replacing OR removing location
With this script, you can customize the job listing. Works for career page generator and when the listing is embedded to an existing website.
This example is replacing the location cities in all job posts listing items with Remote:
Script:
input[name="geolocation"] {
display: none !important;
}
.info > .details > div:last-child > span {
display: none;
}
.info > .details > div:last-child:after {
content: "Remote";
}
This example is removing the location cities from the listing:
Script:
input[name="geolocation"] {
display: none !important;
}
.info > .details > div:last-child {
display: none;
}
Script showing the full informational obligation text.
With this script, you'll show candidates the full content of the informational obligation text. By default, it's cropped, and the candidate has to click on a button to reveal the rest of the content.
Script:
<script>
window.onload = function() {
$('.clause-text').each(function(key, value) {
$(value).addClass('text-shown');
});
$('.show-more-btn').each(function(key, value) {
$(value).css('display', 'none');
});
}
</script>
Style changing the color of the "Apply" and "Send" buttons.
With this style, you'll change the color of buttons and texts on the job posting and the application form buttons for whichever you want. Thanks to that, you'll get the unified branding that matches your company everywhere. This example style changes the button color for green and text for white:
Style:
<style>
/* ADVERT */
.job-post .button--cta, .job-post .job-post__mobile-menu .mobile-menu__button {
color: white;
background-color: #44B759
}
/* FORM */
.traffit-public-form .traffit-public-form__main .main__form .form__button-wrapper .submit-button {
color: white;
background-color: #44B759
}
</style>
Script changing the names of the buttons in job postings and application forms.
If our calls to action don't match your company's language, or you'd want to make them better, you can do it with this script. It will change the standard button text "Apply" and "Send" for your own:
Script:
<script>
document.addEventListener('DOMContentLoaded', function(event) {
var buttonText = $("#dynamic_form_submit span");
if (buttonText.length) {
buttonText.text("CHANGE THIS TEXT (FORM)");
}
var applyButtons = $(".button--cta");
applyButtons.each(function(i, el){
$(el).text("CHANGE THIS TEXT (ADV)");
})
})
</script>
Script changing the command "show more" in the informational obligation text.
By default, if you want to expand the content of the informational obligation text, you need to click the "Show more" button. However, if you want the button to include a different call to action, you can do it with this script:
Script:
<script>
window.onload = function() {
var showMoreButtons = $("span[more] > span");
showMoreButtons.each(function(i, el){
$(el).text("Read full information");
})
}
</script>
Script changing the logo in the application form.
If you run a recruitment process for your client and want to add their logo in the application form, this script might be helpful.:
Script:
<script>
document.addEventListener('DOMContentLoaded', function() {
$(".company-logo__image").css("backgroundImage", "url('URL DO NOWEGO LOGO')");
})
</script>
Style deleting the logo in the application form.
Do you want your application form to be less connected with your company/recruitment agency? Then, use this style to delete the logo from it:
Style:
<style>
.info__company-logo, .header__company-logo {
display: none;
}
</style>
Enlarging the logo on the advert and the application form.
<style>
.info__company-logo {
border-radius: 0 !important;
width: 100px !important;
height: 100px !important;
}
.info__company-logo > .company-logo__image {
width: inherit !important;
height: inherit !important;
margin: 0 !important;
}
.header__company-logo {
border-radius: 0 !important;
width: 100px !important;
height: 100px !important;
}
.header__company-logo > .company-logo__image {
width: inherit !important;
height: inherit !important;
margin: 0 !important;
}
</style>
Style for a dedicated font
<link rel=âpreconnectâ href=âhttps://fonts.googleapis.comâ>
<link rel=âpreconnectâ href=âhttps://fonts.gstatic.comâ crossorigin>
<link href=âhttps://fonts.googleapis.com/css2?family=Raleway:wght@400;500&display=swapâ rel=âstylesheetâ>
<style>
body {
font-family: âRalewayâ, sans-serif;
}
</style>
Change of text in the top right button in Career Page.
You can change the button naming on whatever text you want to with this script:
Script:
document.addEventListener('DOMContentLoaded', function() {
var button = $(".menu__action > a");
if (button.length) {
button[0].innerText = '{PUT TEXT HERE}';
}
});
Script hiding the APPLY button on the job post
You can hide the Apply button (redirecting to the application form) visible on the job post by pasting this simple script as an additional script to the job post.
Script:
<script> document.addEventListener('DOMContentLoaded', () => { document.querySelectorAll('.box__button--apply, .mobile-buttons__button').forEach(button => button.remove()); }); </script>
Script adding extra information about the job below the Apply button
You can put additional information about the job under the Apply button, on the job post. Here's an example:
<script>
/*
<--------------------------------------------------- ADDITIONAL HEADERS --------------------------------------------------->
*/
// HERE YOU CAN MODIFY THE STRUCTURE OF THE ADDITIONAL HEADERS
const config = [
{
header: 'Additional header 1',
description: "Additional description 1",
// hr is responsible for the horizontal line
hr: true,
// br is responsible for an additional enter
br: true,
},
{
header: "Additional header 2",
description: "Additional description 2",
br: true,
}
];
window.addEventListener("DOMContentLoaded", () => {
const rightPanel = document.getElementsByClassName("box__info")[0];
const customContent = document.createElement('div');
config.forEach(item => {
const header = document.createElement('h3');
const description = document.createElement('span');
header.style.margin = '0';
description.style.fontSize = '0.9em';
header.innerHTML = item.header;
description.innerHTML = item.description;
customContent.append(header, description);
if (item.hr) {
const hr = document.createElement('hr');
customContent.append(hr);
}
if (item.br) {
const br = document.createElement('br');
customContent.append(br);
}
});
rightPanel.innerHTML = customContent.innerHTML;
});
/*
<--------------------------------------------------- ADDITIONAL HEADERS --------------------------------------------------->
*/
</script>
Adding this script will result in new headers appearing on your job post, under the Apply button - just like here:
Adding a hyperlink to the header image
If you want to add a hyperlink to the header image, feel free to use the script below:
<script>
const HEADER_IMAGE_URL = 'https://traffit.com/en/';
window.addEventListener('DOMContentLoaded', () => {
const headerImage = document.querySelector('.header__image .image__image');
if (!headerImage) {
return;
}
const anchor = document.createElement('a');
anchor.href = HEADER_IMAGE_URL;
headerImage.parentNode.insertBefore(anchor, headerImage);
anchor.appendChild(headerImage);
});
</script>
Remember to replace https://traffit.com/en/ with the URL address you want the candidate to be redirected to.
Changing the favicon on TRAFFIT job posts
What's favicon? Favicon is the tab icon associated with a particular website, visible in the viewer's browser.
The default favicon for job posts and application forms includes TRAFFIT logo:
You can easily change the favicon on your job posts and application forms created in TRAFFIT using this script:
<script>
var link = document.querySelector("link[rel~='icon']");
if (!link) {
link = document.createElement('link');
link.rel = 'icon';
document.head.appendChild(link);
}
link.href = 'https://traffit.com/favicon.ico';
</script>
https://traffit.com/favicon.ico links to the default TRAFFIT favicon - replace it with your new favicon file location.