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.
image
  1. Configuring The “Smiley Face” Field:
  • Click the pencil icon of the “Smiley Face” field.
  • Delete the default configurations using the “X” button.
image
  • 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).
image
  • Save the changes.
image
  1. Test Your Form:
  • The icons will be displayed on the form according to the defined attributes.
image
  • Selecting any option will capture the value on the form.
image

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

  1. 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.
image
  1. Test Your Form:
  • Selecting any option will automatically apply its corresponding hex color code, capturing the value on the form.
image
image
Example Form.json1.8KB

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