Forms format bodycopy - custom *and* reusable?

[o.v]

I'm looking for means of creating a reusable form template, for lack of a better term. Is it possible to write format bodycopy in such a manner that it would be reusable, or is there an alternative approach to be taken to accomplish this?

 

Formatting individual forms w/bodycoypy is straightforward enough, I could always write:

<dt class="awesome-form-label">%question_label_123_q1%</dt>
<dd class="awesome-form-input">%question_field_123_q1%</dd>

then step back and enjoy the semantic awesomeness* (this isn't the holy grail of a markup, but rather a silly doodle just for argument's sake). However, when I get to styling the next question, I have to resort to copy-pasting it - and there will be a lot of copypasta when I'm done with one form. Now if I were to apply this particular markup across an entire site, not only would I be cursing explicit ID references when I do so, but I will be also cursed by my successor when it's time to upgrade to, I dunno, html6.

 

With a more conventional templating language I'd expect to be able to use implicit references:

{{#each question}}

{{question_label}}

{{question_field}}

{{/each}} ​

I could then keep reusing this anywhere on the site over and over. I love how [default] forms are parametric and can be managed without writing html [by someone other than me so I can do other things], and I want to maintain this workflow with custom markup. How can that be done?

[nnhubbard]

If you use 4.14.2 it includes a new accessible forms feature which builds semantic layouts without having to touch the HTML.

 

http://www.squizlabs.com/squiz-matrix/squiz-matrix-newsletter-425

[o.v]

That looks handy indeed from accessibility/semantics standpoint and would be looked into after the upgrade, however does not quite answer my question.

 

I do seek an additional level of customization flexibility - at least being able to apply custom classes and insert additional elements into that accessible forms markup. Is there perhaps a roundabout way to apply paint layouts to a form as an asset? Again, I absolutely love that squiz allows for form questions and content otherwise to be serialized and managed without developer input, but markup rigidity is a bit of a letdown.

 

I'll take a "no, there's absolutely no way to do it unless it's a feature request that gets actioned"

[nnhubbard]

That looks handy indeed from accessibility/semantics standpoint and would be looked into after the upgrade, however does not quite answer my question.

 

I do seek an additional level of customization flexibility - at least being able to apply custom classes and insert additional elements into that accessible forms markup. Is there perhaps a roundabout way to apply paint layouts to a form as an asset? Again, I absolutely love that squiz allows for form questions and content otherwise to be serialized and managed without developer input, but markup rigidity is a bit of a letdown.

 

I'll take a "no, there's absolutely no way to do it unless it's a feature request that gets actioned"

 

Form Sections can be linked into any number of different Custom Forms. So, you could create one with all of the fields and markup that you want, then link it into all the forms that need to use it.

 

Is this what you were wanting?

[o.v]

 

Form Sections can be linked into any number of different Custom Forms. So, you could create one with all of the fields AND markup that you want, then link it into all the forms that need to use it.

 

Is this what you were wanting?

 

No, I would like to be able to reuse the markup not the content (i.e. not the fields themselves).

 

Does this make sense? I understand why in a perfect world one layout would be enough (or is it three in squiz already? list, table and accessible layout?), but there's always an edge case that can't be solved without altering markup.

 

However reasonable that edge case is in the first place (like having label vertically aligned with textfield/dropdown values and checkbox/radiobuttons across most browsers while using a different font & em-size for all -_-) 

[nnhubbard]

 

No, I would like to be able to reuse the markup not the content (i.e. not the fields themselves).

 

 

Yeah, I don't think is is going to be possible without tons and tons of linked content divs.

[o.v]

 

Yeah, I don't think is is going to be possible without tons and tons of linked content divs.

 

Time to stock up on coffee

[wardy]

Can you not use good old CSS? The fact that all your custom forms are individual due to inheriting the asset ID of the form, then you'd almost certainly need to get in there and do some hard work. What I'd suggest doing is is create a form, then preview it and grab the source code, from there use your favourite HTML editor and style it. You can give all your form elements a class when setting up the form in the first place, though you don't need to do this as there are CSS handlers for just about anything you need to do in a form. 

 

Have a look at this simple form I did :http://www.worksafe.vic.gov.au/hsr

 

This was the first form we did in Squiz, and since then I've simplified things like the "label", cause you don't need to apply a class to labels, as there already a CSS selector for those. Even inside the label on some forms there's a little * to let the user know it's mandatory, these again are all styled in CSS; I'll add the <em>*</em> inside of the field name and then just use the CSS input selector for label then add em after it.

[o.v]

Can you not use good old CSS? The fact that all your custom forms are individual due to inheriting the asset ID of the form, then you'd almost certainly need to get in there and do some hard work. What I'd suggest doing is is create a form, then preview it and grab the source code, from there use your favourite HTML editor and style it. You can give all your form elements a class when setting up the form in the first place, though you don't need to do this as there are CSS handlers for just about anything you need to do in a form. 

 

Have a look at this simple form I did :http://www.worksafe.vic.gov.au/hsr

 

This was the first form we did in Squiz, and since then I've simplified things like the "label", cause you don't need to apply a class to labels, as there already a CSS selector for those. Even inside the label on some forms there's a little * to let the user know it's mandatory, these again are all styled in CSS; I'll add the <em>*</em> inside of the field name and then just use the CSS input selector for label then add em after it.

 

CSS only is not enough in some cases. Even things like bootstrap require markup changes (talk about basic), imagine what third-party js libraries and in-house designers make you do! The former may require data-* attributes while the latter will settle for nothing else than perfect alignment across have-been-major browsers.