Title: GravityWP – CSS Selector Author: GravityWP Published: 10 juni 2017 Last modified: 16 april 2025 --- Plugins zoeken ![](https://ps.w.org/gravitywp-css-selector/assets/banner-772x250.jpg?rev=3215192) ![](https://ps.w.org/gravitywp-css-selector/assets/icon-256x256.jpg?rev=3215192) # GravityWP – CSS Selector Door [GravityWP](https://profiles.wordpress.org/gravitywp/) [Download](https://downloads.wordpress.org/plugin/gravitywp-css-selector.1.1.zip) * [Details](https://nl.wordpress.org/plugins/gravitywp-css-selector/#description) * [Beoordelingen](https://nl.wordpress.org/plugins/gravitywp-css-selector/#reviews) * [Installatie](https://nl.wordpress.org/plugins/gravitywp-css-selector/#installation) * [Ontwikkeling](https://nl.wordpress.org/plugins/gravitywp-css-selector/#developers) [Ondersteuning](https://wordpress.org/support/plugin/gravitywp-css-selector/) ## Beschrijving > This plugin is an add-on for the amazing Gravity Forms Plugin. > Special thanks > to [Brad Vincent](https://profiles.wordpress.org/bradvin/) and [Bryan Willis](https://github.com/bryanwillis) > for developing the first and revised version of this plugin. Gravity Forms has CSS Ready Classes to style your form fields. Using these classes, you can easily create more advanced layouts for the fields in your forms. Excellent idea, however, the problem is you always need to remember what the exact class name is. Now with this CSS Selector, you don’t need to remember. Simply click on a button to launch the pop-up and choose the class you want to add. #### Features * Convenient button added under the advanced tab next to the CSS Class field * Clean and simple pop-up that lists all the CSS Ready Classes * HTML Field Classes (alerts), Gravity PDF, Gravity Perks and CSS Ready Classes selectable * Add more than one CSS Ready Class * Dubbel klik een CSS klare klasse om toe te voegen en auto-close de pop-up * Add your own custom CSS to the pop-up modal ### About GravityWP GravityWP is a third party that develops high-quality addons for Gravity Forms. We provide additional tools that can be used to build full-blown web applications. * [Advanced Merge Tags](https://gravitywp.com/add-on/advanced-merge-tags/): Enhance your form customization with powerful merge tag modifiers, enabling functions like date adjustments, character and word counts, URL encoding, and retrieving data from other forms or sources. * [JWT Prefill](https://gravitywp.com/add-on/jwt-prefill/): Securely populate form fields using JSON Web Tokens, ensuring data integrity and streamlining user experience. * [Advanced Number Field](https://gravitywp.com/add-on/advanced-number-field/): Enhance number fields with features like custom units, fixed decimal places, sliders, and calculated min/max validation rules. * [List Number Format](https://gravitywp.com/add-on/list-number-format/): Transform list field columns into numeric formats, supporting calculations such as totals, or other row and column-based computations, with options for rounding, currency, and range constraints. * [List Dropdown](https://gravitywp.com/add-on/list-dropdown/): Convert specific list field columns into dropdown select inputs. * [List Datepicker](https://gravitywp.com/add-on/list-datepicker/): Add calendar- based datepickers to list fields, allowing users to select dates directly within list columns. * [List Text](https://gravitywp.com/add-on/list-text/): Enhance list columns with features like placeholders, textareas, and custom validation. * [Field to Entries](https://gravitywp.com/add-on/field-to-entries/): Automatically generate new form entries based on checkbox selections, multi-select choices, or list row data. * [Update Multiple Entries](https://gravitywp.com/add-on/update-multiple-entries/): Enable bulk updates of large amounts of existing entries in target forms through trigger forms, streamlining data management. * And more… Discover our suite of powerful [Add-ons for Gravity Forms](https://gravitywp.com/add-ons/). ## Schermafbeeldingen [⌊De knop die toegevoegd wordt aan 'Geavanceerd'⌉⌊De knop die toegevoegd wordt aan' Geavanceerd'⌉[ De knop die toegevoegd wordt aan ‘Geavanceerd’ [⌊De pop-up die wordt getoond⌉⌊De pop-up die wordt getoond⌉[ De pop-up die wordt getoond [⌊Add custom css⌉⌊Add custom css⌉[ Add custom css ## Installatie 1. Upload de plugin naar jouw `/wp-content/plugins/` map 2. Activeer de plugin in het ‘Plugins’ menu in WordPress 3. Wees er zeker van dat Gravity Forms ook geactiveerd is. ## FAQ ### Wat is nodig voordat deze plugin werkt? Ja, je moet de [Gravity Forms Plugin](http://www.gravityforms.com/) installeren voordat deze plugin werkt (in ieder geval versie 1.5). ### How to add custom CSS buttons? You can add your own CSS to the CSS Selector easily in your functions.php file. Just add the following example code there. It adds quick buttons and an accordion on top of the modal. That way you can put easily your own CSS in the layout you want. ``` // Add custom css: quick buttons and accordion at the top of the GravityWP - CSS Selector modal function my_custom_gwp_css_selector_add_css() { $html .= "
Custom css 2nd custom css
  • Custom CSS
    Custom css 2nd custom css
    • "; return $html; } add_filter( 'gwp_css_selector_add_custom_css', 'my_custom_gwp_css_selector_add_css' ); ``` ## Beoordelingen ![](https://secure.gravatar.com/avatar/87427c5d4f492e3d985dd3ca7c2a1b69d6000de6515cc0eeafd5198f2b61973e? s=60&d=retro&r=g) ### 󠀁[Great helper](https://wordpress.org/support/topic/great-helper-9/)󠁿 [Andre](https://profiles.wordpress.org/picturebreeze/) 12 maart 2021 1 reactie Fantastic plugin to style your Gravity forms. Saves a lot of time. Thanks you so much for making this available. ![](https://secure.gravatar.com/avatar/f84b0534ed86fd97443160ffb9345f1f4d750bbedc71e7c4055e937723891856? s=60&d=retro&r=g) ### 󠀁[time saver](https://wordpress.org/support/topic/time-saver-241/)󠁿 [guillermodewey](https://profiles.wordpress.org/guillermodewey/) 7 oktober 2019 1 reactie I’ve check out css name documentation for gravity like a million times to make columns until I came across this plugin.. thanks for making it available. it does what it should. would be nice to have the actual field value delete when selecred other option. ![](https://secure.gravatar.com/avatar/66d32d57aa68f118e4747d87c70763de421f34b6138f9468f72ee0f8bd12d8fb? s=60&d=retro&r=g) ### 󠀁[Great Plugin](https://wordpress.org/support/topic/great-plugin-21135/)󠁿 [swiftblack](https://profiles.wordpress.org/swiftblack/) 12 maart 2019 1 reactie Does the job exactly how you want.. wish I could drop 10 points here ![](https://secure.gravatar.com/avatar/76db85864b90cd3f44d668ac555adf0e7d57854834603ff3e4fb13b70a5446d8? s=60&d=retro&r=g) ### 󠀁[lovely plugin!](https://wordpress.org/support/topic/lovely-plugin-28/)󠁿 [ordrori](https://profiles.wordpress.org/ordrori/) 3 september 2018 thank you! ![](https://secure.gravatar.com/avatar/f27897a74d2cc9a42245c56d5e3172dc5da7c32c0a2760ed4a213702b5f5f3bc? s=60&d=retro&r=g) ### 󠀁[Nice, Easy, Really Helpful](https://wordpress.org/support/topic/nice-easy-really-helpful/)󠁿 [netart.gr](https://profiles.wordpress.org/geokantze/) 13 juli 2018 It adds an easy button that help us create columns in gravity forms. Thank you! ![](https://secure.gravatar.com/avatar/85e0036c0c67ca42d681ea616f8392079347bb7d4c92c0b4c1d27068351203e8? s=60&d=retro&r=g) ### 󠀁[Great Plugin and very much needed](https://wordpress.org/support/topic/great-plugin-and-very-much-needed/)󠁿 [bruno05](https://profiles.wordpress.org/bruno05/) 19 februari 2018 I tried the other css selector plugin but that looks like it has been abandoned. Found this and very impressed. Worked well and like all the options. Now if only you can create a styling plugin for Gravity forms. Gravity forms is great but ugly and does not have multi column support, but you have done a great job with this. [ Lees alle 9 beoordelingen ](https://wordpress.org/support/plugin/gravitywp-css-selector/reviews/) ## Bijdragers & ontwikkelaars “GravityWP – CSS Selector” is open source software. De volgende personen hebben bijgedragen aan deze plugin. Bijdragers * [ GravityWP ](https://profiles.wordpress.org/gravitywp/) “GravityWP – CSS Selector” is vertaald in 1 locale. Dank voor [de vertalers](https://translate.wordpress.org/projects/wp-plugins/gravitywp-css-selector/contributors) voor hun bijdragen. [Vertaal “GravityWP – CSS Selector” in je eigen taal.](https://translate.wordpress.org/projects/wp-plugins/gravitywp-css-selector) ### Interesse in ontwikkeling? [Bekijk de code](https://plugins.trac.wordpress.org/browser/gravitywp-css-selector/), haal de [SVN repository](https://plugins.svn.wordpress.org/gravitywp-css-selector/) op, of abonneer je op het [ontwikkellog](https://plugins.trac.wordpress.org/log/gravitywp-css-selector/) via [RSS](https://plugins.trac.wordpress.org/log/gravitywp-css-selector/?limit=100&mode=stop_on_copy&format=rss). ## Changelog #### 1.1 * Added pot files for translations * Updated Dutch translation. #### 1.0.2 * Added Gravity Forms version check, hide deprecated CSS Ready Classes in 2.5 and higher * Added title tags with more detailed description of the function of every CSS class * Added new vertical choices columns (gf_list_2col_vertical, gf_list_3col_vertical, gf_list_4col_vertical, gf_list_5col_vertical), only visible in GF 2.5 and higher * Added new HTML Field Classes (gf_alert_green, gf_alert_red, gf_alert_yellow, gf_alert_gray, gf_alert_blue), only visible in GF 2.5 and higher * Added gf_inline CSS Ready Class * Updated url to GravityWP documentation to add custom CSS buttons to the CSS selector( https://gravitywp.com/doc/add-custom-css-buttons/) * Security enhancements #### 1.0.1 * Updated url to official Gravity Forms CSS Ready Classes documentation (https:// docs.gravityforms.com/css-ready-classes/) #### 1.0 * Add gwp_css_selector_add_custom_css filter to add custom css * Updated translation files #### 0.2.2 * De Gravity PDF pagebread CSS class aangepast * gf_invisible CSS class toegevoegd * Lijst kolommen en hoogtes gecombineerd naar radioknoppen & checkboxen * Aangepaste verwijzingen naar documentatie #### 0.2.1 * Pagina ondersteuning voor Gravity PDF toegevoegd * Taalbestand bijgewerkt * Nederlandse vertaling bijgewerkt #### 0.2 * CSS classes voor Gravity PDF (exclude) en Gravity Wiz (Copy Cat) toegevoegd * Vormgeving aangepast (documentatie zichtbaar na klik) #### 0.1 * Eerste Uitgave * Lokalisatie toegevoegd ## Meta * Versie **1.1** * Laatst geüpdatet **1 jaar geleden** * Actieve installaties **4.000+** * WordPress versie ** 3.0.1 of nieuwer ** * Getest t/m **6.8.6** * Talen * [Dutch](https://nl.wordpress.org/plugins/gravitywp-css-selector/) en [English (US)](https://wordpress.org/plugins/gravitywp-css-selector/). * [Vertaal in je eigen taal](https://translate.wordpress.org/projects/wp-plugins/gravitywp-css-selector) * Tags * [css ready classes](https://nl.wordpress.org/plugins/tags/css-ready-classes/) [form](https://nl.wordpress.org/plugins/tags/form/)[forms](https://nl.wordpress.org/plugins/tags/forms/) [gravity form](https://nl.wordpress.org/plugins/tags/gravity-form/)[gravity forms](https://nl.wordpress.org/plugins/tags/gravity-forms/) * [Geavanceerde weergave](https://nl.wordpress.org/plugins/gravitywp-css-selector/advanced/) ## Waarderingen 5 van 5 sterren. * [ 9 5 sterren beoordelingen ](https://wordpress.org/support/plugin/gravitywp-css-selector/reviews/?filter=5) * [ 0 4 sterren beoordelingen ](https://wordpress.org/support/plugin/gravitywp-css-selector/reviews/?filter=4) * [ 0 3 sterren beoordelingen ](https://wordpress.org/support/plugin/gravitywp-css-selector/reviews/?filter=3) * [ 0 2 sterren beoordelingen ](https://wordpress.org/support/plugin/gravitywp-css-selector/reviews/?filter=2) * [ 0 1 sterren beoordelingen ](https://wordpress.org/support/plugin/gravitywp-css-selector/reviews/?filter=1) [Your review](https://wordpress.org/support/plugin/gravitywp-css-selector/reviews/#new-post) [Bekijk alle beoordelingen](https://wordpress.org/support/plugin/gravitywp-css-selector/reviews/) ## Bijdragers * [ GravityWP ](https://profiles.wordpress.org/gravitywp/) ## Ondersteuning Iets te melden? Hulp nodig? [Het supportforum bekijken](https://wordpress.org/support/plugin/gravitywp-css-selector/) ## Doneren Wil je de groei van deze plugin ondersteunen? [ Doneer aan deze plugin ](http://gravitywp.com/support/)