Skip to content

Branding Your Forms With Background Images, Custom Fonts and Text Colours

In this guide, we will explain how you can add custom styling to your Formyoula mobile forms. Using the HTML field element and CSS styles you can add custom form backgrounds, fonts, colors and more.

Here are two form examples with custom CSS styles.

Custom Form Guidepng

In this video, we will demonstrate a kiosk form with a custom background image and updated navigation.

Adding the HTML element

To start adding custom styles to your forms, please open the form builder and click on the “Media” element tab.

Screen Shot 2016-03-25 at 102347png

Please drag and drop the HTML field onto your form page.

Screen Shot 2016-03-25 at 102523png

Click the pencil icon to edit the HTML field element.

Screen Shot 2016-03-25 at 102801png

Now you will see a text area input for “HTML Code”. This is where we will be adding our custom styles to update the look of the form. The HTML element styles apply only to the current form page. If you have multiple form pages, you will need to include the custom HTML and CSS code in all pages.

Screen Shot 2016-03-25 at 102845png

Please use the following HTML code snippets to style your forms.

Adding a Background Image

Copy and paste below HTML and CSS into your Formyoula HTML element. Please replace the “HTTPS://URL_TO_MY_IMAGE.COM” with a link to an image you would like to use as your background.


 body {

   background-image: url("HTTPS://URL_TO_MY_IMAGE.COM");

   background-repeat: no-repeat;

   background-size: cover;



Screen Shot 2016-03-25 at 103446png

Updating Header and Label Fonts

Copy and paste below HTML and CSS into your Formyoula HTML element. Please use header h1, h2, h3, h4 or h5 to style your Formyoula headers. To control field labels, please use the “label” as the CSS selector.


.form-group h2 {

   font-family: cursive;

   font-weight: bold;

   color: red;


.form-group label {

   font-family: cursive;

   font-weight: bold;

   color: red;



Please see resulting example on the mobile form.

Screen Shot 2016-03-25 at 114343png

Adding Custom Bootstrap Components

You can add custom HTML components using the Bootstrap CSS library. Please see below examples.

Screen Shot 2016-03-25 at 114720png

Screen Shot 2016-03-25 at 114746png

For any questions, please contact us - or the Formyoula in-app chat 🙂 

Feedback and Knowledge Base