[Top] 116 WordPress Gravity Forms style aanpassen

Vrijwel alle WordPress websites die wij ontwikkelen leveren we met de Gravity Forms plugin van Rocketgenius. Met behulp van deze plugin kunnen wij en onze klanten heel eenvoudig formulieren ontwikkelen en plaatsen op websites. De formulieren die we maken met behulp van deze plugin zijn standaard voorzien van een nette opmaak.

Hieronder is een voorbeeld van een contactformulier te zien die gemaakt is met behulp van Gravity Forms:

De vormgevers bij Pronamic passen echter vaak de vormgeving van de formulieren aan. Dit zodat de formulieren netjes aansluiten bij het ontwerp van de website. Bij het uitwerken van het grafisch ontwerp naar een werkende website zal daar rekening mee moeten worden gehouden.

De opmaak van de Gravity Forms formulieren staan gedefinieerd in een CSS opmaakbestand. In dit bestand staat beschreven hoe elk element weergegeven moet worden. Zodra de vormgeving van de formulieren aangepast moet worden dient de inhoud van dat bestand naar het opmaakbestand van het betreffende WordPress thema gekopieerd te worden. Vervolgens kan de opmaak worden gewijzigd en zal in de configuratie van Gravity Forms aangegeven moeten worden dat de standaard opmaak niet gebruikt moet worden.

Dit is in principe een prima methode, maar toch heeft deze niet onze voorkeur. Door de standaard vormgeving van Gravity Forms uit te schakelen mis je ook alle toekomstige uitbreidingen van Gravity Forms. Daarom kiezen we er bij Pronamic liever voor om het bestaande opmaakbestand uit te breiden met en extra opmaakbestand. Dit realiseren we door de volgende functie op te nemen in het WordPress thema functions.php bestand.

function pronamic_extend_gforms_css() { wp_enqueue_style( ‘pronamic-gforms-style’, get_bloginfo(‘stylesheet_directory’) . ‘/forms.css’ , array(‘gforms_css’) ); } add_action(‘wp_print_styles’, ‘pronamic_extend_gforms_css’);

Door gebruik te maken van de WordPress wp_enqueue_style functie kunnen we aangeven dat ons opmaakbestand afhankelijk is van het Gravity Forms opmaakbestand (‘gforms_css’). Dit zorgt er voor dat het uitbreidingsbestand pas wordt geladen nadat het Gravity Forms opmaakbestand is geladen.