Wikidot Design & Development

Enhancing the pagepath field

Increase the usability of the pagepath data form field with a little bit of CSS trickery.

When I first started using the pagepath field in Wikidot data forms not all that long ago, I could not for the life of me figure out how it worked. I would enter a new name in the field and save the form - but where was that name I just entered? It was nowhere to be seen. Editing the form would confirm that it had not been saved - but why not? I'm sure I entered it.

The trick, of course, is to press the enter key after inputting the new page name. However, as far as I am aware, this is not documented anywhere. If I couldn't work it out, given I'm rather literate with the Wikidot way of life, what chance does an anonymous visitor have of knowing what to do when faced with the pagepath field. Enter CSS to the rescue.

Making data form checkbox fields useful

Do something useful with checkbox fields in wikidot data forms with these helpful solutions.

Working out what to do with the checkbox field in wikidot data forms has puzzled me for months. The only output it gives is a 1 or 0, which is hardly useful for the user, even if they are completely literate in binary. So after seeing some creative ideas on the wikidot community, I came up with the following solutions.

Inline spans and a CSS module

The first solution uses spans wrapped around each of the possible answers (such as Yes/No or Agree/Disagree), which are given a class name that changes depending on whether or not the checkbox has been ticked. This is achieved by appending a 1 or 0 on the end of the class name, which is grabbed from the checkbox field with %%form_data{fieldName}%%. So we end up with something like this…

Do you agree? [[span class="yes%%form_data{Checkbox}%%"]]Yes[[/span]][[span class="no%%form_data{Checkbox}%%"]]No[[/span]].

Then, all we have to do is toggle the display of the classes depending on whether the checkbox has been selected or not (i.e 1 or 0):

.yes1 {display:inline;}
.yes0 {display:none;}
.no1 {display:none;}
.no0 {display:inline;}

CSS Button Generator using Wikidot Data Forms

Another showcase of the power of wikidot data forms

So Wikidot’s little baby, the data form, seems to be pretty popular at the moment as we all discover the power of the not-even-finished-yet implementation. There are some wonderful applications of data forms out there, and today I’m bringing you another - a CSS button generator. The form lets you build custom buttons for your wikidot site by selecting from a list of options for properties such as background colour, shadow, border radius, text size and more.

Most of the data is handled as a select field type, so that the %%form_raw{field}%% can then be passed into the code block (to show the user the code) and CSS module (to generate the preview). The colour fields use the text field type and a regular expression on the match property to only allow valid hexadecimal colour codes.

Site design © BMC WebDesign, 2011. All rights reserved. All tutorials on this site are free for commerical use, subject to conditions outlined in the disclaimer.