Add icons to form fields

[scottknz]

Hi,

I've been trying to add icons to form fields, like most modern forms now include (e.g. an email symbol on the left inside the form field)

Is this possible with CASPIO? We don't seem to have much control over the HTML of form elements and most of what I have read, especially for bootstrap css, requires a div element to be added to the form HTML element. For example:

<div class="form-group">
  <label class="control-label" for="email">
    Email
  </label>
  <div class="input-group">
    <div class="input-group-addon">
      @
    </div>
    <input class="form-control" id="email" name="email" type="text"/>
  </div>
</div>

Where the div class="input-group-addon" is a bootstrap class that inserts a icon at the start of the field.
Thanks,
Scott

[BaySunshine]

Hi @scottknz,

A simple way to show an icon is to save the email image on your web server. In the form, use an HTML block and click on the image button and add the URL of your email image. Specify the height, width etc. In the Advanced tab, select 'continue element on the same line' option.

Hope that helps.

Regards.

[PotatoMato]

Hello @scottknz, Caspio has a Youtube tutorial regarding "How to Add Icons Next to Field Names". I hope this helps.

 

- PotatoMato

 

[PotatoMato]

Hi! Just to update this post. You may also refer to this video tutorial regarding custom symbols: 

 

[Kurumi]

Hi! In addition to having Font icons such as Font Awesome for labels, you can also apply this in the Header in the Results Page of Report DataPage.

To apply in the DataPage, follow these steps:
1. Insert Header and Footer. In the Header, insert the installation CDN

<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.2.1/css/all.min.css" />
<script src="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.2.1/js/all.min.js"></script>

2. Search your icon here: https://fontawesome.com/v5/search?o=r&m=free&s=solid
3. Copy code snippets such as <i class="fas fa-users"></i>
4. Paste the code in Labels in the Header where you like to add an icon.

Result: