Jump to content

Add icons to form fields

Recommended Posts


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">
  <div class="input-group">
    <div class="input-group-addon">
    <input class="form-control" id="email" name="email" type="text"/>

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

Link to comment
Share on other sites

  • 2 years later...
  • 1 year later...
  • 1 year later...

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.




Link to comment
Share on other sites

Join the conversation

You can post now and register later. If you have an account, sign in now to post with your account.
Note: Your post will require moderator approval before it will be visible.

Reply to this topic...

×   Pasted as rich text.   Paste as plain text instead

  Only 75 emoji are allowed.

×   Your link has been automatically embedded.   Display as a link instead

×   Your previous content has been restored.   Clear editor

×   You cannot paste images directly. Upload or insert images from URL.

  • Create New...