Format of the text field

[telly]

Hi- Is there a way to format the text in the text field on the DataPages?

I want formats:
- Color (change to red)
- Font Text (calibri)
- Font weight(Bold)

Here is the test Deployed DataPage: https://c0dcv045.caspio.com/dp/aa4a60002c0e5edfe68e415eadb7

[SunakoChan]

Hi- Try this code on your DataPage just paste it on your DataPage Header(note: disable first the html editor before pasting the CSS).

<style>
.cbFormTextField{
    color: #f90a0a !important;
    font-family: Calibri !important;
    font-weight: bold !important;
}
</style>

Note: Please change the color base on what you prefer.

Expected result: https://c0acs764.caspio.com/dp/ba4a60009a119570a12e4c478dc4/files/3139800

Hi- Try this code on your DataPage just paste it on your DataPage Header(note: disable first the html editor before pasting the CSS).

<style>
.cbFormTextField{
    color: #f90a0a !important;
    font-family: Calibri !important;
    font-weight: bold !important;
}
</style>

Note: Please change the color base on what you prefer.
Expected result: https://c0acs764.caspio.com/dp/ba4a60009a119570a12e4c478dc4/files/3139800

[SunakoChan]

Hi- You can also customize the DataPage, just go to Style> Source>All. Then search for the .cbFormTextFiel, after that, you can change the color, font-family, and font weight. You don't need to add !important: https://howto.caspio.com/styles/customizing-styles/.

[Kurumi]

Hi! Just sharing this tip. You can also use Font icons such as Font Awesome for labels.

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 or any HTML code where you like to add an icon.

Sample Result:

References:
- https://fontawesome.com/
- https://cdnjs.com/libraries/font-awesome

[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:

[Kurumi]

Hi - Just an update, for dynamically changing the font color of field values based on a condition - you can use this solution/CSS: https://howto.caspio.com/tech-tips-and-articles/dynamically-changing-colors-of-values/

[futurist]

Just to add, if you also wish to validate value entered in an input field to make sure that it follows this format: www.websitename.com

Then you can use this code:

 

<script type="text/javascript">

document.addEventListener('BeforeFormSubmit', function(event) {

var inputField = document.querySelector('#InsertRecordNameofField');

  const value = inputField.value;
  const regex = /^www\.[a-zA-Z0-9-]+\.[a-zA-Z]{2,}$/;

if (!regex.test(value)) {
event.preventDefault();
alert('Invalid Submission!');

} else {

document.form["caspioform"].submit();

}

});
</script>

Make sure to replace "NameofField" with the actual name of the field that you want to validate before submitting.