2-sided scale similar to this...
Question
Question
Answer
It's not as nice as having built-in functionality, but here's a way you can do it with current functionality (tested in 10.2 Update 1).
On the layout page:
1. For the instructions text - Add a custom HTML element - code:
<p><b>Please state your opinions on <font color="blue">national health insurance</font> on the scale below</b></p>
2. For the column headers - Add a custom HTML element - code:
<table width="100%"> <tbody> <tr> <td width="20%"></td> <td width="12%" align="center"><b>very much</b></td> <td width="12%" align="center"><b>somewhat</b></td> <td width="12%" align="center"><b>neither</b></td> <td width="12%" align="center"><b>somewhat</b></td> <td width="12%" align="center"><b>very much</b></td> <td width="20%"></td> </tr> </tbody> </table>
3. For the label on the left side of the row - add a custom HTML element with CSS class "leftSide". It should contain the bold and italics text of your left side label (i.e. interesting).
4. For the selectors in the middle - add a radio button element with CSS class "radioFields" - leave the Field Label blank, set the Layout to Side by side, add five choices: 1, 2, 3, 4, 5.
5. For the label on the right side of the row - add a custom HTML element with CSS class "rightSide". It should contain the bold and italics text of your right side label (i.e. boring).
Repeat steps 3, 4, and 5 for each additional row, being sure to keep using the same CSS class names.
Layout page should look like this:
Add this CSS script to your form:
/*set the appearance of the labels on the left side*/ .leftSide { display : inline-block; width : 20%; text-align : right; } /*set the appearance of the labels on the right side*/ .rightSide { display : inline-block; width : 18%; } /*set the appearance of the radio buttons in the center*/ .radioFields { display : inline-block; width : 62%; } .radioFields .cf-field { width : 100%; } .radioFields .choice .form-option-label, .radioFields .cf-label { display : none; } .radioFields .choice { width : 20%; text-align : center; }
The completed form should look like this: