Modifying Form Buttons

1: Overview

Note: The fir attribute requires a survey compat level of 125+

FIR (Form Image Replacement) can be used on your survey to replace the standard form inputs (e.g., radios, checkboxes) with scalable SVG graphics.

The dynamic question version of FIR uses icons and images to replace the browser's form inputs. The fir attribute, in contrast, uses SVG (Scalable Vector Graphics) to replace the form inputs with a finite selection of image styles.

For example, instead of the default form inputs:

...with FIR applied, the inputs above will be transformed into:

2: Adding FIR

FIR can be applied to your survey at the global level (for all questions), or per individual question.

2.1: To the Entire Survey

Use the following attributes to customize FIR for all questions in your survey:

Attribute	Description	Example
`fir`	Enable or disable FIR Possible values: "on" or "off" Default: "off"	<survey compat="125" fir="on" ...>
`firStyle`	Choose a FIR style Possible values: "square", "rounded", "scale" or "fontawesome" Default: "rounded"	<survey compat="125" fir="on" firStyle="scale" ...>
`firSize`	Specify the FIR image size Possible values: "standard" or "20px", "large" or "25px", "small" or "15px", or any "##px" Default: "20px"	<survey compat="125" fir="on" firSize="30px" ...>
`firColors`	Select the FIR color palette Possible values: 4 valid HEX colors (comma-separated) Default: "#c7c7c7,#ffffff,#c5d600,#2bbdb9" (border, base, hover, selected)	<survey compat="125" fir="on" firColors="#000,#fff,#ffffff,#000000" ...>

You can also update these settings in the project's Display Settings.

2.2: To an Individual Question

Use the following attributes to customize FIR for an individual question:

Attribute	Description	Example
`fir`	Enable or disable FIR Possible values: "on", "off" or "inherit" Default: "inherit"	<radio label="Q10" fir="off" shuffle="rows" ...>
`firStyle`	Choose a FIR style Possible values: "square", "rounded", "scale" or "fontawesome" Default: "rounded"	<checkbox fir="on" firStyle="rounded" atleast="1" ...>

3: FIR Attributes & Options

3.1: `fir` - Set FIR "on" or "off"

The fir attribute is the main switch for enabling or disabling FIR. This attribute can be applied at the global level (e.g., in the <survey> element) or locally for an individual question (e.g., in a <radio> or <select> question).

FIR is applied to a question if:

fir is set to "on" for that question OR
fir is set to "inherit" for that question and fir is set to "on" at the global (survey) level

Only radio and checkbox form inputs are replaced with images. This includes questions that are positioned side-by-side, below, or include a <noanswer> element.

As illustrated below, when fir="off" is specified (default), the survey's form radio inputs use the browser's standard image:

When fir="on" is specified, the survey's form inputs are the same for all participants:

The code below produces the question above:

<radio
  label="q1"
  fir="on"
  title="Which of the following categories best describes your age?">
  <comment>select one</comment>
  <row label="r1">Under 18</row>
  <row label="r2">18-24</row>
  <row label="r3">25-34</row>
  ...
</radio>

3.2: `firStyle` - Select Which FIR Style to Use

The firStyle attribute controls the overall look of the FIR image. This attribute can be applied at the global level (e.g., in the <survey> element) or locally for an individual question (e.g., in a <radio> or <checkbox> question).

The possible values are: "rounded" (default), "square", or "scale".

Value	Output
firStyle="rounded"
firStyle="square"
firStyle="scale"

3.3: `firColors` - Specify the Color Palette

Note: The FIR color settings described below are only available for surveys with compat levels 128 or below.

The firColors attribute controls the color palette for the FIR images. This attribute can only be applied at the global level (e.g., in the <survey> element).

Specify 4 colors (comma-separated) for the border, base, hover, and selected colors (respectively). For example:

<survey
    compat="125"
    fir="on"
    firColors="#000,#fff,#ffffff,#000000"
    ...>

The code above produces the following result:

This image is a screenshot of the project's Display Settings options for configuring "Global FIR".

3.4: Declare FIR Colors Globally with Themevars

If you need to apply custom FIR globally, you can use the following available <themevars/>.

<themevars>
<themevar name="fir-border">#A5B312</themevar>
<themevar name="fir-inner">#B3121A</themevar>
<themevar name="fir-inner-hover">#292C96</themevar>
<themevar name="fir-inner-selected">#A65155</themevar>
</themevars>

For example:

<themevars>
  <themevar name="fir-border">#c7c7c7</themevar>
  <themevar name="fir-inner">#FFFFFF</themevar>
  <themevar name="fir-inner-hover">#8DDCDC</themevar>
  <themevar name="fir-inner-selected">#1CBAB9</themevar>
</themevars>

<radio 
  label="Q1"
  firStyle="fa">
  <title>Please select one:</title>
  <row label="r1">Row 1</row>
  <row label="r2">Row 2</row>
  <row label="r3">Row 3</row>
</radio>


<checkbox 
  label="Q1a"
  below="Q1">
  <title>Please select all that apply:</title>
  <row label="r1">Checkbox 1</row>
  <row label="r2">Checkbox 2</row>
</checkbox>

The code above produces the following result:

See The Less Styles System for a full list of FIR attributes.

4: Use Custom Font Awesome Icons

Note: Survey must be compat 126+ to use Font Awesome icons with FIR.

Using the survey XML editor, you can update the firStyle attribute to any one of the following values to use Font Awesome icons instead of SVG graphics: "fa", "fontawesome", "font-awesome".

For example:

<radio label="Q1" firStyle="fontawesome" firRadio="toggle-off" firRadioSelected="toggle-on">
    <title>Please select one:</title>
    <row label="r1">Row 1</row>
    <row label="r2">Row 2</row>
    <row label="r3">Row 3</row>
</radio>

The code above produces the following result:

FIR supports any of the icons found here in Font Awesome version 4.2. As illustrated in the example above, use any of the icons listed by removing the "fa-" prefix.

For example, specify "circle-o" instead of "fa-circle-o".

When the Font Awesome style is used, FIR will use the "hover" and "selected" colors from the firColors attribute.

For example, the following settings will produce firColors="#c7c7c7,#ffffff,#c5d600,#000000" in the survey tag. The color "#c5d600" will be used as the icons default color and the color "#000000" will be used when the icon is selected.

The Font Awesome style will not appear in the Display Settings and can only be added through the XML editor.

4.1: firRadio / firRadioSelected

The firRadio attribute is used to specify which Font Awesome icon to use for radio inputs when they are in the default, unselected, state.

The firRadioSelected attribute is used to specify which Font Awesome icon to use for radio inputs when they have been selected.

For example:

<radio label="Q1" firStyle="fontawesome" firRadio="coffee" firRadioSelected="heart">
    <title>Please select one:</title>
    <row label="r1">Row 1</row>
    <row label="r2">Row 2</row>
    <row label="r3">Row 3</row>
</radio>

The code above produces the following result:

4.2: firCheckbox / firCheckboxSelected

The firCheckbox attribute is used to specify which Font Awesome icon to use for checkbox inputs when they are in the default, unselected, state.

The firCheckboxSelected attribute is used to specify which Font Awesome icon to use for checkbox inputs when they have been selected.

For example:

<radio label="Q1" firStyle="fontawesome" firRadio="coffee" firRadioSelected="heart" firCheckbox="fighter-jet" firCheckboxSelected="rocket">
    <title>Please select one:</title>
    <row label="r1">Row 1</row>
    <row label="r2">Row 2</row>
    <row label="r3">Row 3</row>
</radio>

<note>This question is merged with Q1, so we need to apply icon selection to the MASTER question</note>

<checkbox label="Q1a" below="Q1">
    <title>Please select all that apply:</title>
    <row label="r1">Checkbox 1</row>
    <row label="r2">Checkbox 2</row>
</checkbox>

The code above produces the following result:

4.3: Declare Font Awesome Icons Globally with Themevars

If you need to apply custom Font Awesome icons globally, then you can declare the attributes in the survey tag or use <themevars/>.

For example, we can achieve the same result as above with the following code:

<themevars>
  <themevar name="fir-radio">coffee</themevar>
  <themevar name="fir-radio-selected">heart</themevar>
  <themevar name="fir-checkbox">fighter-jet</themevar>
  <themevar name="fir-checkbox-selected">rocket</themevar>
</themevars>

<radio
  label="Q1"
  firStyle="fa">
  <title>Please select one:</title>
  <row label="r1">Row 1</row>
  <row label="r2">Row 2</row>
  <row label="r3">Row 3</row>
</radio>

<checkbox
  label="Q1a"
  below="Q1">
  <title>Please select all that apply:</title>
  <row label="r1">Checkbox 1</row>
  <row label="r2">Checkbox 2</row>
</checkbox>

The code above produces the following result:

We can also declare the firRadio, firRadioSelected, firCheckbox, and firCheckboxSelected attributes in the main survey tag to achieve the same result:

<survey
  ...
  fir="on"
  firStyle="fa"
  firSize="25px"
  firColors="#c7c7c7,#ffffff,#c5d600,#000000"
  firRadio="coffee"
  firRadioSelected="heart"
  firCheckbox="fighter-jet"
  firCheckboxSelected="rocket">

<radio
  label="Q1"
  firStyle="fa">
  <title>Please select one:</title>
  <row label="r1">Row 1</row>
  <row label="r2">Row 2</row>
  <row label="r3">Row 3</row>
</radio>

<checkbox
  label="Q1a"
  below="Q1">
  <title>Please select all that apply:</title>
  <row label="r1">Checkbox 1</row>
  <row label="r2">Checkbox 2</row>
</checkbox>

The code above produces the same result.

You can also combine FIR styles. For example, use "square" globally and use "fontawesome" locally at the question level.

4.4: Override Icons for Button Select

Only Button Select version 6 (atm1d.6) can use custom Font Awesome icons.

The custom dynamic question style, Button Select, can also be customized to use Font Awesome icons. For example, we can update the single select version of Button Select using firRadio and firRadioSelected:

<radio
  label="Q1"
  firRadio="toggle-off"
  firRadioSelected="toggle-on"
  uses="atm1d.6">
  <title>Please select one:</title>
  <row label="r1">Row 1</row>
  <row label="r2">Row 2</row>
  <row label="r3">Row 3</row>
</radio>

The code above produces the following result:

5: Technical Considerations

5.1: Fallback for Lack of SVG Support

When a web browser does not support SVG, all FIR styles will be replaced with and default to the following Font Awesome icons:

These icons will still inherit the "hover" and "selected" colors specified in the main <survey> element's firColors attribute.

5.2: Dynamic Questions and FIR

FIR can be applied to dynamic questions. Special CSS classes have been added to hide FIR when FIR cannot be applied to the dynamic question. For example, using the dynamic question style "fir" will take precedence of the global FIR images.

To hide FIR for a specific question, specify fir="off" at the question. For example:

<radio label="Q10" uses="somespecialstyle.2" fir="off">

5.3: Survey Editor Support

You can control whether to use FIR and what style to apply within the Survey Editor from within the project's Display Settings.

Use these settings to control how FIR is displayed to participants. Don't forget to test your end result!

Learn more: Display Settings

6: Remove Ability to De-Select Radio Inputs

In compat 133+ surveys, when FIR is applied to a single select question, a participant has the ability to de-select a radio input.

To remove this functionality completely, add the following code to your survey's XML:

<style name="respview.client.js" wrap="ready" mode="after"><![CDATA[
$ (".cell").addClass("no-uncheck");
]]></style>

To remove this functionality for a specific question, add the following code to your survey's XML:

<style name="respview.client.js" wrap="ready" mode="after"><![CDATA[
$ ("#question_QQQ .cell").addClass("no-uncheck");
]]></style>

Update "QQQ" with the label of your question.

7: What's Next?

Forsta Surveys Support

Articles in this section

In this article

1: Overview

2: Adding FIR

2.1: To the Entire Survey

2.2: To an Individual Question

3: FIR Attributes & Options

3.1: `fir` - Set FIR "on" or "off"

3.2: `firStyle` - Select Which FIR Style to Use

3.3: `firColors` - Specify the Color Palette

3.4: Declare FIR Colors Globally with Themevars

4: Use Custom Font Awesome Icons

4.1: firRadio / firRadioSelected

4.2: firCheckbox / firCheckboxSelected

4.3: Declare Font Awesome Icons Globally with Themevars

4.4: Override Icons for Button Select

5: Technical Considerations

5.1: Fallback for Lack of SVG Support

5.2: Dynamic Questions and FIR

5.3: Survey Editor Support

6: Remove Ability to De-Select Radio Inputs

7: What's Next?

Forsta Surveys Support

Articles in this section

In this article

1: Overview

2: Adding FIR

2.1: To the Entire Survey

2.2: To an Individual Question

3: FIR Attributes & Options

3.1: fir - Set FIR "on" or "off"

3.2: firStyle - Select Which FIR Style to Use

3.3: firColors - Specify the Color Palette

3.4: Declare FIR Colors Globally with Themevars

4: Use Custom Font Awesome Icons

4.1: firRadio / firRadioSelected

4.2: firCheckbox / firCheckboxSelected

4.3: Declare Font Awesome Icons Globally with Themevars

4.4: Override Icons for Button Select

5: Technical Considerations

5.1: Fallback for Lack of SVG Support

5.2: Dynamic Questions and FIR

5.3: Survey Editor Support

6: Remove Ability to De-Select Radio Inputs

7: What's Next?

3.1: `fir` - Set FIR "on" or "off"

3.2: `firStyle` - Select Which FIR Style to Use

3.3: `firColors` - Specify the Color Palette