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.


<style>

 body {

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

   background-repeat: no-repeat;

   background-size: cover;

 }

</style>

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.


<style>

.form-group h2 {

   font-family: cursive;

   font-weight: bold;

   color: red;

 }

.form-group label {

   font-family: cursive;

   font-weight: bold;

   color: red;

 }

</style>


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


If you have any questions, please let us know by sending an email to support@formyoula.com


Feedback and Knowledge Base