Tworząc nowy formularz aplikacyjny najlepiej jest umieścić w nim klauzule, które kandydat(ka) musi zaakceptować, aby móc zaaplikować. W ten sposób zgoda będzie wyrażona zgodnie z RODO - które mówi, że każda zgoda musi być:
✔ dobrowolna
✔ konkretna
✔ świadoma
✔ jednoznaczna
✔ wyrażona działaniem potwierdzającym (np. zaznaczenie checkboxa)
Działaniem potwierdzającym może też być samo złożenie aplikacji.
Musisz tylko pamiętać, aby odpowiednio sformułować CTA (tekst przycisku) na formularzu - żeby było jasne, dla kandydata, że aplikując wyraża zgodę na przetwarzanie jego danych osobowych.
Poniżej znajdziesz gotowy skrypt, który pozwoli Ci to zrobić na Twoim formularzu rekrutacyjnym stworzonym w Traffit.
Wskazówki dotyczące customizacji
W sekcji CONFIGURATION każdego z poniższych skryptów możesz dowolnie skonfigurować:
teksty na przyciskach
layout przycisków (row - jeśli mają pojawiać się jeden obok drugiego, column - jeśli mają pojawiać się jeden pod drugim)
które z Twoich klauzul mają zostać przypisane do kandydata aplikującego za pomocą danego przycisku.
PROVISION IDS to informacja o ID klauzul, które masz w swoim systemie.
Aby znaleźć ID klauzul, wejdź na dany formularz i zbadaj kod HTML formularza i znajdź <input id="dynamic_form_provisions_1" ...>
Cyfra na końcu (tu:1) to ID klauzuli.
Przykłady::
allProjectsProvisionId: 1 / Numer klauzuli to 1
singleProjectProvisionId: 2 / Numer klauzuli to 2
Przykład w systemie:
buttonAllProjectsLabel oraz allProjectsProvisionId - dotyczą zgód na przyszłe rekrutacje
single - dotyczy tylko obecnej rekrutacji
WAŻNE: Skrypt zadziała na wszystkie klauzule, które zostały dodane w systemie do danego formularza.
Jeśli na Twoim formularzu jest więcej klauzul - te nieuwzględnione w skrypcie nadal będą widoczne na formularzu z checkboxem.
Wersja skryptu z dwoma przyciskami
Dodanie tego skryptu do Twojego formularza skutkować będzie pojawieniem się na nim 2 przycisków do aplikacji (zamiast jednego).
Przycisk 1 zbiera aplikacje wraz ze zgodą na przyszłe i obecne rekrutacje,
Przycisk 2 zbiera aplikacje tylko ze zgodą na obecną rekrutację:
Zobacz skrypt
Zobacz skrypt
<script>
(function () {
'use strict';
// ========================================
// CONFIGURATION - Edit these values
// ========================================
var CONFIG = {
// Button labels (text shown on buttons)
buttonAllProjectsLabel: 'APLIKUJ I WYRAŹ ZDOGĘ W RAMACH TEJ I PRZYSZŁYCH REKRUTACJI',
buttonSingleProjectLabel: 'APLIKUJ I WYRAŹ ZDOGĘ NA TĘ REKRUTACJĘ',
// Layout options:
// 'row' - buttons side by side (default)
// 'column' - buttons stacked vertically
buttonLayout: 'row',
// Provision IDs to check for each button
// Format: single number (e.g., 1, 2, 3)
// Set to null to not check any provisions
allProjectsProvisionId: null, // Button 1: provision ID to check (null = none)
singleProjectProvisionId: null, // Button 2: provision ID to check (null = none)
};
// ========================================
// Only run on public application form pages
if (!window.location.pathname.includes('public/form/a')) {
return;
}
// Wait for DOM to be ready
var retryCount = 0;
var maxRetries = 10;
function initTwoButtonForm() {
// Check if at least one provision ID is configured
var hasAllProjectsId =
CONFIG.allProjectsProvisionId !== null &&
CONFIG.allProjectsProvisionId !== undefined &&
CONFIG.allProjectsProvisionId !== '';
var hasSingleProjectId =
CONFIG.singleProjectProvisionId !== null &&
CONFIG.singleProjectProvisionId !== undefined &&
CONFIG.singleProjectProvisionId !== '';
// If no provision IDs configured, don't make any changes
if (!hasAllProjectsId && !hasSingleProjectId) {
return;
}
// Find the original submit button wrapper
const buttonWrapper = document.querySelector('.form__button-wrapper');
const originalButton = document.querySelector('.submit-button');
if (!buttonWrapper || !originalButton) {
if (retryCount < maxRetries) {
retryCount++;
console.warn('Submit button not found, retrying... (' + retryCount + '/' + maxRetries + ')');
setTimeout(initTwoButtonForm, 100);
} else {
console.error('Submit button not found after ' + maxRetries + ' retries. Script aborted.');
}
return;
}
const form = originalButton.closest('form');
// Find and hide the configured provision checkboxes
var allProjectsCheckbox = null;
var singleProjectCheckbox = null;
if (hasAllProjectsId) {
allProjectsCheckbox = form.querySelector(
'#dynamic_form_provisions_' + CONFIG.allProjectsProvisionId
);
if (!allProjectsCheckbox) {
console.warn('Provision checkbox not found for ID: ' + CONFIG.allProjectsProvisionId);
return; // Exit if configured provision doesn't exist
}
}
if (hasSingleProjectId) {
singleProjectCheckbox = form.querySelector(
'#dynamic_form_provisions_' + CONFIG.singleProjectProvisionId
);
if (!singleProjectCheckbox) {
console.warn('Provision checkbox not found for ID: ' + CONFIG.singleProjectProvisionId);
return; // Exit if configured provision doesn't exist
}
}
// Hide the checkboxes
if (allProjectsCheckbox) {
var allProjectsRow = allProjectsCheckbox.closest(
'.custom-control, .form-group, .checkbox-row'
);
if (allProjectsRow) {
allProjectsRow.style.display = 'none';
}
}
if (singleProjectCheckbox) {
var singleProjectRow = singleProjectCheckbox.closest(
'.custom-control, .form-group, .checkbox-row'
);
if (singleProjectRow) {
singleProjectRow.style.display = 'none';
}
}
// Hide the original button
originalButton.style.display = 'none';
// Apply layout configuration
if (CONFIG.buttonLayout === 'column') {
buttonWrapper.style.flexDirection = 'column';
}
// Clear the button wrapper
buttonWrapper.innerHTML = '';
// Create button 1 only if allProjectsProvisionId is configured
if (hasAllProjectsId && allProjectsCheckbox) {
const button1 = document.createElement('button');
button1.type = 'button';
button1.className = 'submit-button submit-button--similar';
button1.innerHTML = '<span>' + CONFIG.buttonAllProjectsLabel + '</span>';
button1.addEventListener('click', function (e) {
e.preventDefault();
// Button 1: Check BOTH provisions (all projects)
allProjectsCheckbox.checked = true;
if (singleProjectCheckbox && singleProjectCheckbox !== allProjectsCheckbox) {
singleProjectCheckbox.checked = true;
}
// Trigger jQuery validation and submission
if (window.$ && window.jQuery) {
var $form = $(form);
if ($form.valid && $form.valid()) {
form.submit();
}
} else {
if (form.reportValidity && !form.reportValidity()) {
return;
}
form.submit();
}
});
buttonWrapper.appendChild(button1);
}
// Create button 2 only if singleProjectProvisionId is configured
if (hasSingleProjectId && singleProjectCheckbox) {
const button2 = document.createElement('button');
button2.type = 'button';
button2.className = 'submit-button submit-button--single';
button2.innerHTML = '<span>' + CONFIG.buttonSingleProjectLabel + '</span>';
button2.addEventListener('click', function (e) {
e.preventDefault();
// Uncheck the other provision if it exists
if (allProjectsCheckbox && allProjectsCheckbox !== singleProjectCheckbox) {
allProjectsCheckbox.checked = false;
}
// Check this provision
singleProjectCheckbox.checked = true;
// Trigger jQuery validation and submission
if (window.$ && window.jQuery) {
var $form = $(form);
if ($form.valid && $form.valid()) {
form.submit();
}
} else {
if (form.reportValidity && !form.reportValidity()) {
return;
}
form.submit();
}
});
buttonWrapper.appendChild(button2);
}
}
// Initialize when DOM is ready
if (document.readyState === 'loading') {
document.addEventListener('DOMContentLoaded', initTwoButtonForm);
} else {
initTwoButtonForm();
}
})();
</script>
<style>
/**
* Custom CSS for two-button application form
* Styles the two submit buttons to match the design from the screenshot
*
* Note: Button layout (row/column) is controlled by the CONFIG.buttonLayout
* setting in the JavaScript above. The CSS provides the base styles.
*/
/* Button wrapper - display buttons side by side on desktop, stacked on mobile */
.form__button-wrapper {
display: flex;
gap: 15px;
flex-direction: row;
width: 100%;
margin-top: 20px;
/* flex-direction is controlled by CONFIG.buttonLayout in JavaScript */
}
/* Base button styles */
.submit-button {
flex: 1;
padding: 15px 25px;
font-size: 15px;
font-weight: 500;
border: none;
border-radius: 4px;
cursor: pointer;
transition: all 0.3s ease;
text-align: center;
line-height: 1.5;
white-space: normal;
word-wrap: break-word;
}
/* Button for "this and similar projects" */
.submit-button--similar {
background-color: #5558d9;
color: white;
}
.submit-button--similar:hover {
background-color: #4447c0;
}
.submit-button--similar:active {
background-color: #3336a8;
}
/* Button for "this project only" */
.submit-button--single {
background-color: #5558d9;
color: white;
}
.submit-button--single:hover {
background-color: #4447c0;
}
.submit-button--single:active {
background-color: #3336a8;
}
/* Mobile responsive - stack buttons vertically on small screens */
@media (max-width: 840px) {
.form__button-wrapper {
flex-direction: column !important;
gap: 10px;
}
}
</style>
Oto jak wygląda efekt na formularzu aplikacyjnym w przypadku użycia skryptu (o tekście na przycisku decydujesz w skrypcie):
Wersja z jednym przyciskiem
Aby stworzyć formularz z jednym przyciskiem, skorzystaj z powyższego skryptu, wpisując "null" w pole z ProvisionID, które chcesz ukryć.
Jeśli chcesz, aby na formularzu był tylko przycisk 2, wpisz "null" w pole ProvisionID dla przycisku 1:
Ukrycie checkboxa "Zaznacz wszystko"
Jeśli na danym formularzu chcesz ukryć checkbox "Zaznacz wszystko" - użyj w tym celu poniższego skryptu:
<style> #selectAllCheckbox { display: none; } </style>