Custom Navigation Buttons Using The HTML Element

In this guide, we will explain how you can add custom HTML navigation buttons to your Formyoula mobile forms. Using the HTML field element and CSS styles you can add custom form navigation and style the buttons.

Please see below example form with custom HTML navigation buttons.

Screen Shot 2016-04-12 at 151512png

To start adding custom navigation buttons 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 navigation HTML code. The HTML element only applies to the current form page. If you have multiple form pages, you will need to include the custom HTML in all pages.

Screen Shot 2016-03-25 at 102845png

Please use the following HTML code snippet to add custom navigation buttons on your form.

Copy and paste below HTML into your Formyoula HTML element.

<div class="btn-toolbar">

 <button type="button" class="back btn btn-lg btn-default pull-left">Previous</button>

 <button type="button" class="next btn btn-lg btn-default pull-left">Next</button>

 <button type="button" class="cancel btn btn-lg btn-default pull-right">Cancel</button>


You can add other 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