You are viewing limited content. For full access, please sign in.

Question

Question

Feature Request - Forms

asked on March 9, 2017

2-sided scale similar to this... 

2 sided scale.gif
0 0

Answer

SELECTED ANSWER
replied on March 9, 2017 Show version history

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:

4 0
replied on March 13, 2017

It works!  (I had every faith in your instructions, but little in my own abilities.)

 

Thanks for the assist!

1 0
replied on March 13, 2017

I'm glad to hear it!  Please consider marking the reply as the answer to your question.  Have a wonderful day, and enjoy your form! smiley

1 0

Replies

replied on March 9, 2017

Thanks for the requests, this feature is already in our list, we will consider adding support for it in future releases.

1 0
You are not allowed to follow up in this post.

Sign in to reply to this post.