Enhanced Form Block Templates

Magic Data Templates for the core form block provide

  • A Magic Data enabled version the table formatted default template
  • A Magic Data enabled version of the Tableless Form Layout by jordanlev
  • Enhancements for embellishing forms.

Any Magic Data tokens inserted in form labels in the edit dialog will be evaluated when the form is shown.

A Simple Example 

Continuing with the example started in Retrieving and using form results, if you go to the about page and edit the form, you can enter tokens of Magic Data within any of the form labels. For example, if the form is only visible to registered users, you could edit the message field label to be:

Message from [% UID USERNAME%]

Save the block and select one of the Magic Data enabled form templates, then save and approve the page. 

The page will now show a personalised message label. 

Enhancements for Embellishing Forms

Both of the templates provided by Magic Data Forms are also enhanced for embellishing forms with content from any other block on the page. With these templates you can easily pull into your form images from image blocks, maps from maps blocks and pretty much anything else that comes in a block, though you could break something if you try and pull a form block into a form block, especially if it is the same block!

To embellish a form, first you need to know the id number of the question you want to pull another block before, after or within. You can get this by looking at your form in the developer console and finsing the number at the end of an id field with a name like

id="question_row5"

All you need is the number, so in this case you just need to know that you are dealing with question 5.

You then add any other block to the page, usually below your form block, with whatever you want to insert into the form. In the last tab of block design you then give the block an id or a class:

  • embellish_before_questionNNN - will insert the block with that ID or class before #question_rowNNN (a div or tr will be inserted)
  • embellish_after_questionNNN - will insert the block with that ID or class after #question_rowNNN (a div or tr will be inserted)
  • embellish_before_labelNNN - will insert the block with that ID or class before the label for #question_rowNNN
  • embellish_after_labelNNN - will insert the block with that ID or class after the label for #question_rowNNN
  • embellish_before_inputNNN - will insert the block with that ID or class immediately before the form input for #question_rowNNN
  • embellish_after_inputNNN - will insert the block with that ID or class immediately after the form input for #question_rowNNN

In all of the above, NNN is the question ID, in the case of our example that would be 5.

When the page is shown, the block with that class or ID will then be inserted into the form at the desired location.

60 embellish_form.png

This is all done using javascript after the page is rendered. If you experience a flash of the un-rearranged form and block, you can give the block a style of display:none. The page will then render with the embellishing block hidden, to be shown when the block has been moved into the form.

Remember, content from other blocks is associated with form questions by assigning a block id or class in the block design or by assigning the id or class within the block HTML. In all cases, NNN is the question ID from the form.

 If you want to disable the form embellishment capability of the Magic Data Forms templates, you can set the configuration constant:

MAGIC_DATA_FORMS_EMBELLISH_ENABLE - defaults to true, set to false to disable form embellishment.

Last updated: over a year ago