YOOtheme Pro ikoner i RS Form Pro formular

RS Form Pro er en af de ældste formularværktøjer til Joomla. Det er en gennemtestet udvidelse der kan løse simple såvel som komplekse formularopgaver. RS Form Pro brillerer især ved komplekse behov, hvor der eks. skal laves integration med andre systemer, indsættes data direkte i andre komponenter, brugeroprettelse i forbindelse med udfyldelse af en form osv. 

I de senere år, har RS Form Pro også fået UIKit som en layout mulighed. UIKit er det template framework YOOtheme har udviklet og benytter i YOOtheme Pro. Formularen bliver dermed responsiv og integrerer sig fuldt ud og følger websitets visuelle udtryk. Her vil de fleste være tilfreds, men hvis vi skal hæve baren en smule, kunne det være med tilføjelsen af ikoner til inputfelter. Det giver lige lidt ekstra på det visuelle indtryk, øger brugeroplevelsen og med de rette ikoner, hjælper brugen til en visuel forståelse af det indhold de skal indtaste. 

Desværre har RS Form Pro ikke denne mulighed direkte. Det lykkedes mig heller ikke at finde andre der havde lavet det (elegant), men med en smule gennemtænkt CSS og en bestemt uikit attribut på inputfelterne, er det faktisk en ganske overkommelig opgave. 

Sådan gør du

YOOtheme

Indsæt nedenstående CSS i din YOOtheme Pro template under Settings > Din egen kode > CSS/Less

fieldset.formContainer {
    padding: 0px;
    border: none;
    .uk-form-controls.formControls {
        position: relative;
        input[uk-icon] {
            padding-left: 46px !important;
            display: block !important;
        }
        svg {
            position: absolute;
            top: 14px;
            left: 14px;
        }
    }
}

.uk-icon-light {
    .uk-form-controls.formControls {
        svg > *:not([fill="none"]) {
            fill: rgba(255, 255, 255, 0.8) !important;
        }
        svg > *[fill="none"] {
        	stroke: rgba(255, 255, 255, 0.8);
        }
    }
}

Benytter du formularen i et panel eller lign. med mørk baggrund, så skal du i din YOOtheme Pro template tilføje klassen herunder til dit indholdselement. 

uk-icon-light

Klassen gør ikonerne hvide.

RS Form Pro

For hvert input felt skal du tilføje en attribut under attributes > additional attributes. Eks: 

uk-icon="user"

user henviser til et bestemt ikon. Listen af ikoner er tilgængelig her hvilket dog kan udvides med flere tusind forskellige, hvis ZOOlanders Essential Addons for YOOtheme Pro installeres. 

Det er alt der skal til. Vil du se et eks. på hvordan det ser ud, så kan du kigge rundt på websitet her. Alle formularer er lavet i RS Form Pro, hvor ikonerne på inputfelterne er opsat efter denne opskrift. 

Til simple formularer kan jeg dog også anbefale ZOOlanders Essential Addons, som gør gør det muligt at bygge formularer direkte i YOOthemes builder værktøj. Her kan du vælge ikoner direkte i builderen. Det var faktisk dem, der inspirerede mig til at lave ovenstående kode, så jeg også kunne få ikoner på inputfelterne i RS Form Pro.