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.
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.
Please drag and drop the HTML field onto your form page.
Click the pencil icon to edit the HTML field element.
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 on all pages.
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>
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 the resulting example on the mobile form.
Adding Custom Bootstrap Components
You can add custom HTML components using the Bootstrap CSS library. Please see the below examples.
For any questions, please contact us - [email protected] or the Formyoula in-app chat 🙂