Skip to main content

This site requires you to update your browser. Your browsing experience maybe affected by not having the most up to date version.

Form Questions /

spread formfields throughout the page


Reply


6 Posts   776 Views

Avatar
theoldlr

Community Member, 103 Posts

24 February 2011 at 3:04am

Edited: 24/02/2011 3:10am

I've made custom forms in SS before, but the fields have always been grouped together and put into the template all in the same spot with $Form.

I'm making a short quiz that fits into a relatively small space on the page, so unlike a normal form I can't just stick $Form in the template (I think). I was planning on something basically like this:

<div class="container">
<div class="questionslider">
<div class="question1">
[question 1 form field here]
</div>
<div class="question2">
[question 2 form field here]
</div>
</div>
</div>

the questionslider div will be as wide as the sum of widths of the question# divs and there will be controls to move back and forth through the questions (javascript)with the submit button on the last one.

How should I approach this? Hard code the template (feels wrong, but may be right?) Use the multiform module (feels like overkill since the quiz is only on 1 page)?

Advice appreciated! Thanks!

Avatar
Willr

Forum Moderator, 5513 Posts

24 February 2011 at 8:28pm

You can make a custom template for a form and implement a setup like that quite easily - http://doc.silverstripe.org/sapphire/en/topics/forms#using-a-custom-template

Avatar
theoldlr

Community Member, 103 Posts

25 February 2011 at 11:30am

Edited: 25/02/2011 11:36am

Thanks Willr, that was definitely what I was looking for... quick template question to go along with it though...

<% control Fields %>
<div class="slide question{$iteratorPos}">
<div id="question{$iteratorPos}" class="field text">
<label class="left" for="FBForm_question{$iteratorPos}">$title</label>
$Field
</div>
</div>
<% end_control %>

This is how I'm generating the fields, but even if I only have 2 fields it creates question0 - question2 divs. Is the last field considered the Action? Is there a way to control through all the fields but one? heres the constructor:

function __construct($controller, $formName) {
$fields = new FieldSet(
new OptionsetField(
$name='question0',
$title='Test Multiple Choice Question 1:',
$source= array(
'A'=>'Apple',
'B'=>'Boy',
'C'=>'Cat',
'D'=>'Dog'
)
),
new OptionsetField(
$name='question1',
$title='True or False',
$source= array(
'T'=>'True',
'F'=>'False'
)
)
);

$actions = new FieldSet(
new FormAction('submit', 'Get Quiz Score')
);

parent::__construct($controller, $formName, $fields, $actions);
}

Avatar
Willr

Forum Moderator, 5513 Posts

25 February 2011 at 12:34pm

Well it is just a DataObjectSet so you could use <% if First %>, <% if Last %>. Actions shouldn't be included in <% control Fields %> (they are under <% control Actions %>).

Avatar
theoldlr

Community Member, 103 Posts

26 February 2011 at 5:53am

I'm almost there... I'm having some trouble finding a work around for the limitation of if statements in the templates (Here's hoping for SS 3.0!)...
The additional field I was confused about before was the hidden field for security.

Custom Form class:

class FBForm extends Form{
.
.
.
function isFinished($position, $totalItems){
return($position == ($totalItems-1));
}
}

Template:

<% control Fields %>
<% if Last %>
<label class="left" for="FBForm_question{$iteratorPos}">$title</label>
$Field
<% else %>
<div class="slide question{$iteratorPos}">
<div id="question{$iteratorPos}" class="field text">
<label class="left" for="FBForm_question{$iteratorPos}">$title</label>
$Field
</div>

<!--/* None of this works, I dont think Top.isFinished doesnt seem to be the appropriate way to call 'isFinished'
<% if Top.isFinished(iteratorPos, TotalItems) %>
<% if Actions %>
<div class="Actions">
<% control Actions %>
$Field
<% end_control %>
</div>
<% end_if %> */-->
</div>
<% end_if %>
<% end_control %>

Totally stuck on how to make the above comment work. TIA!

Avatar
Willr

Forum Moderator, 5513 Posts

26 February 2011 at 12:24pm

<% if Top.isFinished(iteratorPos, TotalItems) %>

You wouldn't need $Top aas you are already in the Form context and isFinished is in the Form class. You would also have to use a simpler if statement by doing something like

<% if First %>
<% if isFinished(1) %>...

<% else %>
<% isFinished(2) %>..