RRWD studie webtoepassingen

Automatisch icoontjes toevoegen aan links via CSS zonder class

Rian Rietveld — Thu, 16 May 2013 12:30:25 +0000

Icoontjes toevoegen aan links ziet er mooi uit en het is handig voor bezoekers die zien wat voor soort link het betreft, bijvoorbeeld een externe link, een PDF- of Word-bestand.

Dit kan door de link een class met een achtergrondafbeelding mee te geven.

HTML:
externe link

CSS:
a.extern {
  padding-right: 15px;
  background: url(images/icon-link.gif) no-repeat center right;
}

Maar het kan ook automatisch, zonder toevoeging van een class.

In onderstaand voorbeeld ga ik uit van de website mijnwebsite.nl. Aan alle links wordt standaard een achtergondafbeelding voor een externe link gegeven.
Daarna wordt bij alle interne links (die beginnen met http://mijnwebsite of http://www.mijnwebsite of een interne link zijn) de achtergrondafbeelding verwijderd. Naar keuze kun je nu afbeeldingen toevoegen voor mail-links, of links naar PDF-, ODT, Word of bestanden met andere extensies.
De padding is afhankelijk van de grootte van de achtergrondafbeelding.

a { 
  padding-right: 15px; 
  background: url(images/icon-link.gif) no-repeat center right; 
}

a[href^="http://mijnwebsite"] { 
  padding-right: 0; 
  background: none;
}
a[href^="http://www.mijnwebsite"] { 
  padding-right: 0; 
  background: none; 
}
a[href^="#"] { 
  padding-right: 0; 
  background: none; 
}
a[href^="mailto"] { 
  padding-right: 15px; 
  background: url(images/icon-mail.gif) no-repeat center right; 
}
a[href$='.pdf'] { 
  padding-right: 15px; 
  background: url(images/icon_pdf.gif) no-repeat center right; 
}
a[href$='.PDF'] { 
  padding-right: 15px; background: url(images/icon_pdf.gif) no-repeat center right; 
}
a[href$='.doc'] { 
  padding-right: 15px; 
  background: url(images/icon_pdf.gif) no-repeat center right; 
}
a[href$='.DOC'] { 
  padding-right: 15px; 
  background: url(images/icon_pdf.gif) no-repeat center right; 
}

See it in action op iacobien.nl

Toegankelijke social media share buttons in WordPress

Rian Rietveld — Thu, 07 Jun 2012 11:55:43 +0000

Hoe voeg je toegankelijke social media buttons toe aan je post of page in WordPress als je de bezoeker je bericht of pagina wilt laten delen op bijvoorbeeld Facebook, Twitter, LinkedIn of Google+? Deze vraag kreeg ik van Winy Schalke van Alva Design.

De meeste kant-en-klare buttons voor het toevoegen van Social Media buttons worden opgebouwd in Javascript. Maar als je alle fancy stuff weghaalt en stript tot de basis blijft er eigenlijk alleen een link met variabelen over. Dit is ook te maken in alleen HTML/PHP. De link wordt dan opgebouwd via een functie in PHP.

Basale opbouw van de links

Voor Facebook:

de link: http://www.facebook.com/sharer.php
variabelen:
- t=titel
- u=de url van de te delen pagina

Voor Twitter

de link: http://twitter.com/share
variabelen:
- text=titel
- url=de url van de te delen pagina

Voor LinkedIn

de link: http://www.linkedin.com/shareArticle?mini=true
variabelen:
- t=titel
- title=de url van de te delen pagina

Voor Google+

de link: https://plus.google.com/share?url=
LET OP: dit was eerst https://plusone.google.com/_/+1/confirm?hl=nl, maar deze link werkt niet meer.
variabelen:
- url=de url van de te delen pagina

Voorbeeldcode

Een simpel voorbeeld in PHP, die je in WordPress kwijt kunt in je functions.php van je thema:

/**
 * Accessible share buttons
 * Displays 4 social media buttons with a share link beneath the post content on pages and posts, except for the homepage
 * Works inside the loop
 * Images are stored in the theme /images directory
 * Rian Rietveld rrwd.nl June 2012
 * @notes beta version 0.1
 **/

function rrwd_share_buttons( $post_content ) {
	global $post;

	// on posts and pages, except for home, comment out if necessary
	if ( is_home() || is_front_page() ) return $post_content;

	// Sanatize and urlencode title and permalink for inclusion in share links
	$share_title = sanitize_title( get_the_title() );
	$share_title = urlencode( $share_title );
	$share_permalink = get_permalink();
	$share_permalink = urlencode( $share_permalink );

	// Hidden heading, for screen readers only
	$share  = 'Deze pagina delen'."\n";

        $share .= ''."\n";

        $share .= ''."\n";
        $share .= ''."\n";

        $share .= ''."\n";
$share .= ''."\n";
        $share .= ''."\n";
$share .= ''."\n";
        $share .= ''."\n";
$share .= ''."\n";
        $share .= ' '."\n";
        // add buttons beneath the post content
        $post_content .= $share;

        return $post_content;

} // end function rrwd_share_buttons

add_filter('the_content', 'rrwd_share_buttons');

CSS voor de buttons

In de style.php van je thema


/*Style for accessible share buttons
------------------------------------------------------------ */
.rrwd-share-heading {
	left: -1000em;
	position: absolute;
	height: 0;
}
.rrwd-share-list {
	clear: both;
}
.rrwd-share-list li {
	float: left;
	padding: 0;
	margin-right: 10px;
}

.rrwd-share-img {
	width: 55px;
	height: 20px;
}

De afbeeldingen

Zet de bijbehorende afbeeldingen in de directory /images van je thema.

De namen in deze functie zijn:

share-facebook.png
share-twitter.png
share-linkedin.png
share-googleplus.png

De afbeeldingen hebben dezelfde grootte, te stylen via de class rrwd-share-img.

Live demo

Winy Schalke heeft de code geïmplementeerd voor pagina’s en berichten van de website van de Epilepsie Vereniging Nederland

Plugin

Ik heb er een korte plugin van gemaakt.
Te downloaden op: http://www.rrwd.nl/wp-plugins/wp-accessible-social-share-buttons.zip
Als je deze upload en activeert en daarna in je functions.php van je childtheme het volgende zet zou het moeten lukken:

In Genesis onder de titel:

add_action( 'genesis_after_post_title', 'wp_accessible_social_share_buttons' );// adds buttons below the title of a post or page

Voor plaatsing onder de content:

add_action('the_content', 'wp_accessible_social_share_buttons'); // adds buttons below the content of a post or page

Discussie

De links in deze functie openen niet in een nieuw venster. Dit kan worden toegevoegd (zet dan in de link target=”_blank”) mits je hiervan melding maakt, zie de webrichtlijnen hierover.

Gebruik voor de & om variabelen te linken een &

Documentatie

Facebook: https://developers.facebook.com/docs/share/
Twitter: http://twitter.com/about/resources/buttons
LinkedIn: https://developer.linkedin.com/forum/url-params-sharearticle
Google+: https://developers.google.com/+/plugins/+1button/

Code snippits voor het Genesis Framework in WordPress

Rian Rietveld — Wed, 25 Apr 2012 07:53:09 +0000

Doctype HTML5

/** HTML5 DOCTYPE */
remove_action( 'genesis_doctype', 'genesis_do_doctype' );
add_action( 'genesis_doctype', 'child_do_doctype' );
function child_do_doctype() {
?>

>



Pas knoppenbalk TinyMCE aan
/** Modifying TinyMCE editor to remove unused items.

http://wordpress.org/support/topic/tinymce-formatting-options-remove-h1-h1-pre/


http://wordpress.org/support/profile/buckmuck

*/
function rrwd_customformat_tinymce($init) {
// Add block format elements you want to show in dropdown
$init['theme_advanced_blockformats'] = 'p,h2,h3,pre';
$init['theme_advanced_disable'] = 'strikethrough,underline,forecolor,justifyfull';
return $init;
}
add_filter('tiny_mce_before_init', 'rrwd_customformat_tinymce' );

Gebruik een eigen stylesheet in TinyMCE
Zo kun je elementen van het stylesheet overnemen in de editor zodat het lijkt op de weergave in de website zelf. Het bestand editor-style.css zet je dan in je (child-)theme.
add_editor_style( 'editor-style.css' );

Verwijder layout keuzes: bijvoorbeeld
genesis_unregister_layout( 'content-sidebar' );
genesis_unregister_layout( 'content-sidebar-sidebar' );
genesis_unregister_layout( 'sidebar-sidebar-content' );
genesis_unregister_layout( 'sidebar-content-sidebar' );
genesis_unregister_layout( 'full-width-content' );

Custom Favicon (in plaats van het Genesis icoontje)
/** Custom Favicon
The favicon is stored in the theme/images directory and is called favicon.ico by default*/
remove_action('genesis_meta', 'genesis_load_favicon');
function rrwd_custom_favicon() {
echo "\n";
}
add_action('wp_head', 'rrwd_custom_favicon');

Bepaal het aantal sidebars in de footer
/** Add support for 1-column footer widgets */
add_theme_support( 'genesis-footer-widgets', 1 );
Pas de copyright regel aan in de footer
/** Customize the credits */
add_filter('genesis_footer_creds_text', 'custom_footer_creds_text');
function custom_footer_creds_text() {
 echo '';
 echo 'Copyright © ';
 echo date('Y');
 echo ' · Claudia Hulshof, Sustainable Style';
 echo '';
}

Verwijder de hele footer
/** Customize the entire footer */
remove_action( 'genesis_footer', 'genesis_do_footer' );
Verwijder de (bewerken) link op de website zelf als een gebruiker is ingelogd.
/** Remove the edit linkon the front end */
add_filter ( 'genesis_edit_post_link' , '__return_false' );
Meer op:

billerickson.net: http://www.billerickson.net/genesis-quick-tips/

How accessible is the WordPress CMS for a blind content manager

Rian Rietveld — Fri, 23 Mar 2012 10:37:22 +0000

As we take great effort to make the front-end of WordPress accessible, the next challenge will be to make an equally accessible CMS. In order to get an impression on this challenge awaiting us I have started a study, together with Jaap van de Putte on how accessible the current CMS of WordPress really is.

A few questions immediately come to mind. During the last couple of years the CMS of WordPress has become more and more dependent on Ajax with lightbox overlays. How do these function for a blind content manager using a screenreader? Can she/he grasp the complexity of the CSM? Is the generated HTML semantically correct and easy to understand?

In my experience as WordPress trainer I have found that the CMS is getting harder to understand for inexperienced content managers. So many options and possibilities. How does this work, if you look thought the CMS pages sequencially, without a quick overview that the graphics provide?

What better way to find out, then to visit a experienced vision-impaired user of computers and screen readers that never ever saw a CMS in his life. Actually, this is not that much unlike most of my seeing clients who want a website and a CMS.

For this I visited Leo Dijk, who works as a legal advisor at the Dutch Ministry of Education, Culture and Science in The Hague. He was kind enough to give me a morning of his time to try out the current CMS of WordPress.

Used software

At this moment there are two major screenreaders: SuperNova by Dolphin and Jaws by Freedom Scientific. Leo uses Explorer 8 with the SuperNova Screenreader version 11.58 on Windows, together with a braille terminal, a standard keyboard and a headphone. This is neither the latest version of Explorer nor the latest version SuperNova, but it is a common configuration for most blind people, especially as updates of SuperNova are expensive. This version of SuperNova doesn’t work well with Explorer 9, nor with Firefox, nor with Chrome. Javascript is executed, however.

WordPress test environment

In my test account I installed Dutch version of WordPress 3.3.1 with the StudioPress Genesis Framework with one extra plugin: Genesis Translations by Remkus de Vries. All settings and options out of the box. To get started some dummy content and a primary menu was added.

Front end experience

For reading the content and structure the front end was good. Tab order was logical and Leo gave StudioPress a compliment about how well the search widget was setup. There where however two important remarks:

Widget titles in Genesis by default have the H4 HTML tag. The content will contain mainly H1 and H2 levels, so an H4 skips the H3 level. This makes the structure of the information less accessible. A H2 for the widget title would be better.
In WordPress images default link to their own image when inserted into content. So, if clicked, the visible window will only contain a single image, and the site only can be recovered by using the back button. A normally sighted visitor can see what is happening and solve it intuitively. But, with a screen reader it is not so obvious. Leo couldn’t interpret what happened and concluded it was a broken link, because neither the title nor the alt tag of the images told him he was clicking a link to an image.

CMS

For normally sighted and visually impaired content managers, the first impression of the CMS is confusing. Much info, what does the jargon mean. As for everybody else an explanation was needed about the difference between a post and a page, the menu-item links, etc.

Tab en item order

With a screen reader, the page is read from top to bottom. The tab key is used to skip from item to item. An easy way to see what the resulting page order is like, is to disable the CSS.

WordPress menu with stylesheet disabled

The semantics of the HTML for adding a post

Main Menu (for the Genesis theme there is an extra link with only the image)
Adjust screen, help e.g.
Title of the action
Publish options
Categories
Tags
Features image
Input title
Input content
Theme SEO (Genesis theme)
Layout (Genesis theme)
Excerpt
Trackbacks
Custom fields
Comments
Slug Author

Finding the title input field

The label of the title is placed inside the input field for the title with CSS and Javascript. Hidden without Javascript and with a default style of visibility:hidden. In practice this means that with a screenreader the label is completely ommited.


Voer hier de titel in

Finding the content textarea

Using the WYSIWYG editor is obviously impossible. Selecting some text and changing it into a heading for instance is a task that cannot be done with a screen reader. Therefore the default setting must be to use the HTML editor or an editor that uses shortcodes for text markup.

The content text-area also lacks a label and can only be found by searching for the text “uploaden/toevoegen” (Upload/Add) which is just above the input area.


HTML
Wysiwyg
Uploaden/Toevoegen

Popup overlay’s

Adding links, inserting images, choosing colours, all work with through pop-ups that break out of the normal flow of the HTML and are not recognised as a popup in a screenreader, they are simply ignored.

Adding media

Inline addition of media with the upload/add option is impossible for a screenreader. But it can be achieved manually, using the menu-item ‘media’ first for uploading images and document and subsequently adding them later via the HTML code.

Conclusion and recommendations

The main issues are:

The input field for the title and the content are currently unrecognizable, they need a label and not just one inside the inputfield
The content manager will need to know HTML, since the buttons for the HTML markup don’t work in a screenreader.
The semantics of the HTML produced can be improved.

How to make life easier for a blind content manager:

Change the HTML into a more semantic order like
- the main menu
- input for the title
- input for the content
- publish options
- the sidebar with the extra options
- the help and adjust screen options
Add a label to the title and content input
Find a decent shortcode editor te replace the WYSIWYG, plugin suggestions are welcome.

Next step

This test was done using SuperNova by Dolphin. We will look into how Jaws performs in another session.
More idea’s, input, comments and suggestions for e.g. plugins are very welcome.

Thanks

A big thanks to Leo Dijk, for his detemination, patience and enthousiasm.

Wat doe je aan : Allowed memory size of xxx bytes exhausted bij WordPress

Rian Rietveld — Fri, 18 Nov 2011 13:00:35 +0000

De memory limit verhogen, en wel als volgt:

Voeg in de regel:

define(’WP_MEMORY_LIMIT’, ’64M’);

toe aan wp-config.php

Bron:

http://www.nerdgrind.com/increase-wordpress-and-php-memory-limit/

Menu titel laten zien boven uitvoer wp_nav_menu van WordPress

Rian Rietveld — Tue, 28 Jun 2011 14:07:49 +0000

In WordPress kun je eigen menu’s samenstellen en via de functie wp_nav_menu weergeven. Helaas zit er (nog?) geen optie bij om ook de titel van het menu te laten zien. Hieronder een manier om de titel op te halen en boven het menu te zetten.

Vervang onderstaand voorbeeld het id 9 door het id van het menu dat je wilt gebruiken.

In functions.php

function rrwd_get_name_menu ($id_menu) {
	// thanks to Pranick, http://themeforest.net/forums/thread/help-wp-nav-menu-title/45109?page=1
	$cippo_menu_locations = (array) get_nav_menu_locations();
	$cippo_menu = get_term_by( 'id', $id_menu, 'nav_menu', ARRAY_A );
	echo $cippo_menu[ 'name' ];
}

In de template bijvoorbeeld

9); ?>
 'menu-header', 'menu' => 9) ); ?>

Code-snippit: submenu in WordPress

Rian Rietveld — Tue, 01 Mar 2011 15:33:41 +0000

Deze code laat (buiten de loop) een submenu zien van een pagina met kinders in WordPress

post_parent) {  
  $children = wp_list_pages("title_li=&child_of=".$post->post_parent."&echo=0&sort_column=menu_order");  
  $titlenamer = get_the_title($post->post_parent);  
} else {  
  $children = wp_list_pages("title_li=&child_of=".$post->ID."&echo=0&sort_column=menu_order");  
  $titlenamer = get_the_title($post->ID);  
}  
if ($children) { ?>

See it in action: Regelink.net

Bron: WordPress forum

Using Gravity Forms for iDeal payment

Rian Rietveld — Fri, 18 Feb 2011 15:52:03 +0000

IDEAL is an on-line payment method, populair in the Netherlands and Belgium. For the integration of iDEAL Light into WordPress, I used the outstanding plugin Gravity Forms (GF), in combination with 2 new template files. This is my first attempt, feel free to notify me of better ways to do stuff. I used GF version 1.4.5 for this. The next version of GF has more options for payment, but well, this works for now .

If you are looking for a WordPress plugin for this,
go check out Pronamic’ add-on iDEAL voor Gravity Forms.

This code is for selecting one or more of a single item.
It uses the security check by hash tag (see the iDEAL documentation for more info about this)

First create 5 new pages like

Order (this is the page with the GF)
Confirm (where the visitor checks and confirms her order)
Thanks (page for iDEAL to redirect to when the payment is successfull)
Error (page for iDEAL to redirect to when the payment is unsuccessful)
Cancel (page for iDEAL to redirect to when the payment is canceled)

Add some explaining text to this pages, to let the visitor know what’s happening.

Then create the GF-form

This is the form the visitor has to fill out with name/address and number of items she wants to order.

Required are 2 input fields:

items (make that a number-field, define a default value, e.g. 1)
price (make that a text-field, define a value with 2 decimals)

Form-options:

Form confirmation: choose Redirect and select to the full url of the page we named Confirm
Check “Pass Field Data Via Query String” and fill out: id={entry_id}

Include this form into the page Order.

Create the PHP template file for the order confirmation

Create a template file for the Confirm page. Include the following code before the get_header(); These are fixed parameters iDEAL needs.

$id_order = $_GET['id'];

// fixed parameters
$key = 'xxxxxxxxx'; // your hash key of secret key
$merchantID = '1234567890'; // your Acceptant ID
$subID = '0';              //almost always 0 (null)
$purchaseID = "$id_order";        //number or code for your backoffice (I used the form id)
$paymentType = 'ideal';    //always ideal
$validUntil = date('Y-m-d\TH:i:s.000\Z', time()+900); // this moment plus 15 min)
$itemNumber1 = '1';  // in case of hash tag, use always 1
$itemDescription1 = "Box of chocolates";     // the description of the item you sell
$itemQuantity1 = 1;                    // in case of hash tag, use always 1
$language = ''; // empty is faster
$currency = 'EUR';
$description = "Another order of some delicious chocolate"; // the description of your order
$baseurl    = 'http://www.yourdomain.nl'; // your website here....
$urlSuccess = "$baseurl/thanks/?id=$id_order";
$urlCancel  = "$baseurl/error/";
$urlError   = "$baseurl/cancel/";

Then add the data for the order and the calculated total amount, just below the content of the page. You need 3 id’s to make this work:

The id of the form
the field_number of “items”
the field_number of “price”

The can retrieve these by looking them up in the HTML-code of the form, id=’input_2_1′ means form id 2, field number 1.


$results = $wpdb->get_results( "SELECT value, field_number FROM wp_rg_lead_detail WHERE lead_id=$id_order ORDER BY field_number" ) ;
$form_meta = RGFormsModel::get_form_meta(2);
foreach ($results as $result) {
$field1 = RGFormsModel::get_field($form_meta, $result->field_number);
if ($result->field_number == 1 )  {
$items = $result->items;
if ($items < 1 ) $items = 1;
} elseif ($result->field_number == 22 ) {
$price = $result->value;
} else {
echo "". $field1["label"] . " \n";
echo "". $result->value . "\n";
}
}
$price  = str_replace(",", ".", $price);
$itemPrice1 = $price*100*$items;
$amount = $itemPrice1;
echo "Number of boxes \n";
echo "$items\n";
echo "Price for one box\n";
echo " € ". number_format( ($price) , 2, '.', '') . "\n";
echo "Total \n";
echo " € ". number_format( ($price*$items) , 2, '.', '') . "
\n";
$shastring = "$key$merchantID$subID$amount$purchaseID$paymentType$validUntil"
. "$itemNumber1$itemDescription1$itemQuantity1$itemPrice1";
$shastring = preg_replace(
array("/[ \t\n]/", '/&/i', '/</i', '/>/i', '/"/i'),
array(         '',        '&',       '<',       '>',        '"'),
$shastring);
$shasign = sha1($shastring);
?>























The (test)url provided by your iDEAL supplier is for example “https://idealtest.rabobank.nl/ideal/mpiPayInitRabo.do&#8221;
Then create the template for the Thanks page.
This is the page iDEAL redirects you if the payment is successful. In this page an email will be send to the owner of the site to inform her that someone made an order from the site.
Add below the content:


Add some style
in style.php you can add something like:
#check-order {
  margin: 0 0 14px 0;
}
#check-order dt {
  font-weight: bold;
  float: left;
  width: 200px;
}

Discussion
One thing that needs to be added is an unique number to the form-id, to prevent direct access to the confirm page with only adding an id number. Thinking about adding the IP number of the visitor in a hidden field and checking with the conformation if the visitor has the same IP.
And $id_order = $_GET['id']; had to get properly sanitized and checked
Documentation and resources

Gravity Forms
iDEAL
Handleiding iDEAL Lite (Dutch)
And a big thanks to Alex Cancado from Rocketgenius.com for support and michaelbyrd123 for code idea’s.

Geen sifr, geen cufon maar Font-face!

Rick Leyten — Wed, 19 Jan 2011 06:50:42 +0000

De laatste bijdrage van onze (nu ex-)stagiaire Rick Leyten: Na de fijne ervaring met sifr *ahum* besloot ik om te gaan zoeken naar een vervanging en die vond ik!
De makers van font-face maken het zo makkelijk dat echt het geen flash nodig heeft om te functioneren. Sterker nog iedereen met een geupdate browser (op Opera na.. dit komt binnenkort) ziet deze fonts.

Het enige wat je moet doen is in je css-stylesheet het volgende definiëren:

/* Font face */
@font-face {
font-family: GraublauWeb;
font-weight: bold; /* Optioneel */
src: url("jouw-internet-adres/GraublauWebBold.otf") format("opentype");
}

In de src plaats je waar de font zich bevindt, vervolgens definieer je in een html-tag waar deze font zich moet laten zien:

h2 {
    font-family: GraublauWeb;
    font-size: 18px;
}

En violá! Kind kan de was doen..

Bron:

Font-face
css3.info Web fonts with @font-face http://www.css3.info/preview/web-fonts-with-font-face/
A list apart CSS @ Ten: The Next Big Thing

Gravity Form met een dynamische input

Rick Leyten — Wed, 15 Dec 2010 08:48:43 +0000

Voor een project bij RRWD web development, moest ik een functionaliteit bedenken i.v.m. het ontwerp van een nieuwe WordPress website. In dit grafisch ontwerp stond in de sidebar een drop down menu met een submit button. Je kunt in dit geval een afspraak maken en alvast aangeven waar het over gaat. Dus zou het mooi zijn als de aangegeven reden van afspraak onthouden zou worden en meegestuurd werd naar het afspraak-formulier. Dit staat niet standaard in Gravity Forms, dus moest ik uit zoeken hoe we dit voor elkaar krijgen.

We beginnen simpel met een formulier te maken met de volgende html code:

Wanneer de submit button wordt geklikt gaat de pagina met de informatie na de “/contact” pagina. Hier in zit het mail formulier van gravity forms.

Maar om nou de waarde op te halen van het ingevulde formulier moeten we die ook even op vragen. Dat doen we met de volgende php code:

Deze staat boven het formulier waar het Gravity Forms formulier zich bevindt. Aangezien we geen PHP in een WordPress pagina kunnen zetten moeten we dus een aparte template maken voor deze pagina.

Vervolgens gaan we naar onze form in de WordPress-backend. Hier in maken we een dropdown-field met dezelfde waardes als het formulier dat we boven hebben staan.

Daarna gaan we naar de “Advanced” tab van de dropdown. Daar zien we “Allow field to be populated dynamic” staan, vink deze aan! Geef hem een parameter mee die identiek is aan de naam van het formulier dat we in het begin hebben gemaakt. In dit geval dus “choice”, en violá!

Het zou nu moeten werken!

Met dank aan: Carl Hancock van Gravity Forms voor de support.