Form Elements

This is a collection of custom scripts and tutorials for Gravity Forms and Supernova.

Table of Contents

• How to create a maintenance form

How to create a maintenance form

The Gravity Forms maintenance form uses a <select> dropdown for all options. The form can be enhanced to use images, by using custom CSS and JavaScript in Supernova.

Add the following code to Supernova -> Custom HTML -> Footer:

<style>
.gf-maintenance-form-image-select-container {
    grid-gap: 1em;
    margin: 2em 0;
    display: grid;
    grid-template-columns: repeat(7, 1fr);
}
.gf-maintenance-form-image-container {
    display: flex;
    flex-direction: column;
    align-items: center;
    box-shadow: 0 1px 10px rgba(0, 0, 0, .1);
    padding: 1em;
    gap: 1em;
    background-color: #f1f1f1;
    border-radius: 8px;
    line-height: 1.5;
}
.gf-maintenance-form-image-select-container img.gf-maintenance-form-select-image {
    width: 100px;
    height: 100px;
	padding: 1em;
    cursor: pointer;
    border: 4px solid transparent;
    transition: border-color 0.3s;
}
.gf-maintenance-form-image-select-container img.gf-maintenance-form-select-image.selected {
    border-color: var(--gf-ctrl-label-color-req);
	border-radius: 8px;
}
.gf-maintenance-form-image-label {
    margin-top: 5px;
    text-align: center;
    font-size: 14px;
}
</style>

<script>
document.addEventListener('DOMContentLoaded', () => {
    const selectElement = document.getElementById('input_2_3');
    const options = Array.from(selectElement.options);

    selectElement.style.display = 'none';

    const imageSelectContainer = document.createElement('div');
    imageSelectContainer.id = 'gf-maintenance-form-image-select-container';
    imageSelectContainer.classList.add('gf-maintenance-form-image-select-container');

    selectElement.parentNode.insertBefore(imageSelectContainer, selectElement.nextSibling);

    options.forEach(option => {
        if (option.value) {
            // https://www.svgrepo.com/collection/atlas-variety-line-icons/
            const sanitizedValue = option.value.toLowerCase().replace(/[,\s\/?]+/g, '_');

            const imgContainer = document.createElement('div');
            imgContainer.classList.add('gf-maintenance-form-image-container');

            const img = document.createElement('img');
            img.src = `https://bohanhyland.ie/wp-content/uploads/icons/${sanitizedValue}.svg`;
            img.alt = option.value;
            img.dataset.value = option.value;
            img.classList.add('gf-maintenance-form-select-image');

            const label = document.createElement('div');
            label.textContent = option.value;
            label.classList.add('gf-maintenance-form-image-label');

            imgContainer.appendChild(img);
            imgContainer.appendChild(label);
            imageSelectContainer.appendChild(imgContainer);

            img.addEventListener('click', () => {
                imageSelectContainer.querySelectorAll('img').forEach(img => img.classList.remove('selected'));

                img.classList.add('selected');

                selectElement.value = option.value;

                const event = new Event('change', { bubbles: true });
                selectElement.dispatchEvent(event);
            });
        }
    });
});
</script>

Make sure you replace the correct form ID in the line below:

const selectElement = document.getElementById('input_2_3');

The form uses illustrations from https://www.svgrepo.com/collection/atlas-variety-line-icons/. Place these SVGs in /wp-content/uploads/icons.