Wikidot Design & Development

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.