Custom Icons Using The Smiley Face Field

This guide will explain how to configure and customize Bootstrap Icons to suit your specific needs.

1. Initial Setup:

• Drag and drop a “Smiley Face” field onto your form.
• Rename the field as necessary.

2. Configuring The “Smiley Face” Field:

• Click the pencil icon of the “Smiley Face” field.
• Delete the default configurations using the “X” button.

• Configure Bootstrap Icons attributes by adding the following options.
• In this example, we add details for “thumbs-up” and “thumbs-down”.
• thumbs-up || Thumbs Up || true || 60 || #0000FF
• thumbs-down || Thumbs Down || false || 60 || #FF0000

Here,

• Icon Name – Specifies the Bootstrap icon to be used (e.g., thumbs-up, thumbs-down).
• Title – A descriptive name for the icon (optional).
• Value – Define the values you want to capture on the form.
• Icon Size – Determines the icon’s size in pixels (e.g., 60).
• Select Color – Add the icon’s color using a hex code (e.g., #0000FF for blue, #FF0000 for red).

• Save the changes.

3. Test Your Form:

• The icons will be displayed on the form according to the defined attributes.

• Selecting any option will capture the value on the form.

Note: You can enable the “Hide Select Item Label Names” option to customize the UI, displaying icons without labels (optional).

4. Configuring The “Smiley Face” Field:

• Click the pencil icon of the “Smiley Face” field.
• Enable the “Hide Select Item Label Names” option.
• Save the changes.

5. Test Your Form:

• Selecting any option will automatically apply its corresponding hex color code, capturing the value on the form.

For any questions, please contact us - [email protected] or the Formyoula in-app chat. 🙂