# Customize your ODK forms with fonts, colors, etc

**URL:** <https://forum.getodk.org/t/customize-your-odk-forms-with-fonts-colors-etc/5504>\
**Category:** Support\
**Tags:** odk-xlsform, form-design\
**Created:** [May 4, 2016, 12:52pm UTC](https://forum.getodk.org/t/customize-your-odk-forms-with-fonts-colors-etc/5504 "2016-05-04T12:52:44Z")\
**Posts on this page:** 13\
**Page:** 1

<div class="post-metadata">

**Author:** ![yanokwa](https://getodk.b-cdn.net/user_avatar/forum.getodk.org/yanokwa/32/1695_2.png) [@yanokwa](https://forum.getodk.org/u/yanokwa)\
**Post date:** [May 4, 2016, 12:52pm UTC](https://forum.getodk.org/t/customize-your-odk-forms-with-fonts-colors-etc/5504/1 "2016-05-04T12:52:44Z")

</div>

Hi all,

I just wrote up quick instructions on how to add fonts, colors, sizes,  
and tappable links to ODK forms.

You can find the post at  
[https://nafundi.com/blog/posts/customize-odk-forms-with-fonts-colors-sizes-and-links](https://nafundi.com/blog/posts/customize-odk-forms-with-fonts-colors-sizes-and-links).

This feature only works in ODK Collect 1.4.9 and later, so upgrade to  
the latest version of Collect and give the demo form a try!

Thanks,

Yaw

 ![image](https://getodk.b-cdn.net/uploads/default/original/1X/10058906e0288658eee6b9222fdf8f6e3356a0b2.png)

> **···**
>
> -- Need ODK consultants? Nafundi provides form design, server setup, in-field training, and software development for ODK. Go to https://nafundi.com to get started.

---

<div class="post-metadata">

**Author:** ![Curtis\_Broderick](https://getodk.b-cdn.net/user_avatar/forum.getodk.org/curtis_broderick/32/1622_2.png) [@Curtis\_Broderick](https://forum.getodk.org/u/Curtis_Broderick)\
**Post date:** [May 4, 2016, 1:14pm UTC](https://forum.getodk.org/t/customize-your-odk-forms-with-fonts-colors-etc/5504/2 "2016-05-04T13:14:34Z")

</div>

That is _GREAT!_ You guys at Nafundi are really doing an\* A+ job\*. Many  
many thanks from community.  
Curtis Broderick  
EpiConcept, Paris, France

> **···**
>
> 2016-05-04 14:52 GMT+02:00 Yaw Anokwa :
> 
> > Hi all,
> > 
> > I just wrote up quick instructions on how to add fonts, colors, sizes,  
> > and tappable links to ODK forms.
> > 
> > You can find the post at
> > 
> > [https://nafundi.com/blog/posts/customize-odk-forms-with-fonts-colors-sizes-and-links](https://nafundi.com/blog/posts/customize-odk-forms-with-fonts-colors-sizes-and-links)  
> > .
> > 
> > This feature only works in ODK Collect 1.4.9 and later, so upgrade to  
> > the latest version of Collect and give the demo form a try!
> > 
> > Thanks,
> > 
> > ## Yaw
> > 
> > Need ODK consultants? Nafundi provides form design, server setup,  
> > in-field training, and software development for ODK. Go to  
> > [https://nafundi.com](https://nafundi.com) to get started.
> > 
> > ## --
> > 
> > Post: [opendatakit@googlegroups.com](mailto:opendatakit@googlegroups.com)  
> > Unsubscribe: [opendatakit+unsubscribe@googlegroups.com](mailto:opendatakit+unsubscribe@googlegroups.com)  
> > Options: [http://groups.google.com/group/opendatakit?hl=en](http://groups.google.com/group/opendatakit?hl=en)
> > 
> > * * *
> > 
> > You received this message because you are subscribed to the Google Groups  
> > "ODK Community" group.  
> > To unsubscribe from this group and stop receiving emails from it, send an  
> > email to [opendatakit+unsubscribe@googlegroups.com](mailto:opendatakit+unsubscribe@googlegroups.com).  
> > For more options, visit [https://groups.google.com/d/optout](https://groups.google.com/d/optout).
> 
> --

---

<div class="post-metadata">

**Author:** ![maxramirez84](https://getodk.b-cdn.net/user_avatar/forum.getodk.org/maxramirez84/32/3384_2.png) [@maxramirez84](https://forum.getodk.org/u/maxramirez84)\
**Post date:** [February 12, 2018, 9:25am UTC](https://forum.getodk.org/t/customize-your-odk-forms-with-fonts-colors-etc/5504/3 "2018-02-12T09:25:10Z")

</div>

Hi! I'm trying to style with some markdown (headers) and font color: `<span style="color: red;"> **Note:** </span>`. But Collect is not parsing headers (# is displayed) and ignoring the span tag and \*\*. I have ODK Collect v1.12.2. Thanks!

---

<div class="post-metadata">

**Author:** ![maxramirez84](https://getodk.b-cdn.net/user_avatar/forum.getodk.org/maxramirez84/32/3384_2.png) [@maxramirez84](https://forum.getodk.org/u/maxramirez84)\
**Post date:** [February 12, 2018, 3:38pm UTC](https://forum.getodk.org/t/customize-your-odk-forms-with-fonts-colors-etc/5504/4 "2018-02-12T15:38:11Z")

</div>

Ok, I see that this is happening when you combine html and markdown in the same label. And, rather than using the span tag to change the font color, I used `<font color="red">`. Like this it worked.

---

<div class="post-metadata">

**Author:** ![Samuel\_Nyarko](https://getodk.b-cdn.net/user_avatar/forum.getodk.org/samuel_nyarko/32/14134_2.png) [@Samuel\_Nyarko](https://forum.getodk.org/u/Samuel_Nyarko)\
**Post date:** [December 29, 2020, 10:23am UTC](https://forum.getodk.org/t/customize-your-odk-forms-with-fonts-colors-etc/5504/5 "2020-12-29T10:23:35Z")

</div>

Hello sir.  
I have a text like this: Welcome to IGIAC soil horizon project  
How do I pass it to the syntax for the colour to be green?  
Thanks

---

<div class="post-metadata">

**Author:** ![Nitin\_Srivastava](https://getodk.b-cdn.net/user_avatar/forum.getodk.org/nitin_srivastava/32/9739_2.png) [@Nitin\_Srivastava](https://forum.getodk.org/u/Nitin_Srivastava)\
**Post date:** [December 30, 2020, 4:44am UTC](https://forum.getodk.org/t/customize-your-odk-forms-with-fonts-colors-etc/5504/6 "2020-12-30T04:44:05Z")

</div>

@Samuel_Nyarko You may use it like this in your XLSForm Label Column:

`<span style="color:#f58a1f"> Welcome to IGIAC soil horizon project </span>`

You will have to replace the #f58a1f with the appropriate color code. Color codes can be found here: [https://www.w3schools.com/colors/colors\_picker.asp](https://www.w3schools.com/colors/colors_picker.asp)

---

<div class="post-metadata">

**Author:** ![Samuel\_Nyarko](https://getodk.b-cdn.net/user_avatar/forum.getodk.org/samuel_nyarko/32/14134_2.png) [@Samuel\_Nyarko](https://forum.getodk.org/u/Samuel_Nyarko)\
**Post date:** [December 30, 2020, 7:23am UTC](https://forum.getodk.org/t/customize-your-odk-forms-with-fonts-colors-etc/5504/7 "2020-12-30T07:23:03Z")

</div>

Than k you for your reply.  
I tried your idea but the color does not change.  
Please see screen shorts.

 ![Screenshot_20201230-080140](https://getodk.b-cdn.net/uploads/default/original/2X/e/ead4c4517aa22f8c7ad4d3a0b8861aac183f8618.png) ![Screenshot_20201230-080315](https://getodk.b-cdn.net/uploads/default/original/2X/5/58c6e683e155b7036bf89b60e872a50d5d0602ad.jpeg)  
[Soil\_collect.xlsx](https://forum.getodk.org/uploads/short-url/2kCScHLmRacNtpZ1XHatBNgh8W5.xlsx) (15.0 KB)

---

<div class="post-metadata">

**Author:** ![azam\_iqbal](https://getodk.b-cdn.net/user_avatar/forum.getodk.org/azam_iqbal/32/18700_2.png) [@azam\_iqbal](https://forum.getodk.org/u/azam_iqbal)\
**Post date:** [December 30, 2020, 8:00am UTC](https://forum.getodk.org/t/customize-your-odk-forms-with-fonts-colors-etc/5504/8 "2020-12-30T08:00:54Z")

</div>

NOW CHECK YOUR FILE IS WORKING FINE[Soil\_collect.xlsx](https://forum.getodk.org/uploads/short-url/omRB2iYYXExD7pWuP4QPxojTbhE.xlsx) (14.9 KB)

---

<div class="post-metadata">

**Author:** ![Samuel\_Nyarko](https://getodk.b-cdn.net/user_avatar/forum.getodk.org/samuel_nyarko/32/14134_2.png) [@Samuel\_Nyarko](https://forum.getodk.org/u/Samuel_Nyarko)\
**Post date:** [December 30, 2020, 8:51am UTC](https://forum.getodk.org/t/customize-your-odk-forms-with-fonts-colors-etc/5504/9 "2020-12-30T08:51:52Z")

</div>

Thanks.  
But sorry it is still the same.

 ![Screenshot_20201230-094524](https://getodk.b-cdn.net/uploads/default/original/2X/c/cc894fb6fd891a679373d8f8d8364ecde5c580ea.jpeg) ![Screenshot_20201230-094758](https://getodk.b-cdn.net/uploads/default/original/2X/a/aff514e0501ef58f57a0acc5c08fbd3cc3d29fe5.png)  
Thanks.

---

<div class="post-metadata">

**Author:** ![Nitin\_Srivastava](https://getodk.b-cdn.net/user_avatar/forum.getodk.org/nitin_srivastava/32/9739_2.png) [@Nitin\_Srivastava](https://forum.getodk.org/u/Nitin_Srivastava)\
**Post date:** [January 3, 2021, 7:15am UTC](https://forum.getodk.org/t/customize-your-odk-forms-with-fonts-colors-etc/5504/10 "2021-01-03T07:15:20Z")

</div>

@Samuel_Nyarko Did you try it on another mobile ?

---

<div class="post-metadata">

**Author:** ![Grzesiek2010](https://getodk.b-cdn.net/user_avatar/forum.getodk.org/grzesiek2010/32/2881_2.png) [@Grzesiek2010](https://forum.getodk.org/u/Grzesiek2010)\
**Post date:** [January 4, 2021, 7:40am UTC](https://forum.getodk.org/t/customize-your-odk-forms-with-fonts-colors-etc/5504/11 "2021-01-04T07:40:25Z")

</div>

The problem is that we don't support styling group names: [https://github.com/getodk/collect/issues/3433](https://github.com/getodk/collect/issues/3433)

---

<div class="post-metadata">

**Author:** ![Romain\_TCHAKOUTE](https://getodk.b-cdn.net/letter_avatar_proxy/v4/letter/r/3ec8ea/32.png) [@Romain\_TCHAKOUTE](https://forum.getodk.org/u/Romain_TCHAKOUTE)\
**Post date:** [May 21, 2022, 2:51pm UTC](https://forum.getodk.org/t/customize-your-odk-forms-with-fonts-colors-etc/5504/12 "2022-05-21T14:51:22Z")

</div>

Hello  
I designed a form on xlform and I use kobotools as a deployment and collection server.  
I have a problem with displaying color. I am using odk collect version v2022.2.2  
How to fix it?

---

<div class="post-metadata">

**Author:** ![Grzesiek2010](https://getodk.b-cdn.net/user_avatar/forum.getodk.org/grzesiek2010/32/2881_2.png) [@Grzesiek2010](https://forum.getodk.org/u/Grzesiek2010)\
**Post date:** [May 27, 2022, 12:33pm UTC](https://forum.getodk.org/t/customize-your-odk-forms-with-fonts-colors-etc/5504/13 "2022-05-27T12:33:45Z")

</div>

Hi @Romain_TCHAKOUTE

Welcome to the ODK forum. We're glad you're here. When you get a chance, please [introduce yourself on this forum thread](https://forum.getodk.org/t/-/6671). I'd also encourage you to add a picture as your avatar because it helps build community!

Please attach your form (xls version) without it we can't tell what is wrong.
