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.

To start adding custom navigation buttons 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 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.

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

Copy and paste the 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>
  <button type="button" class="finish btn btn-lg btn-default pull-right">Submit</button>
  <button type="button" class="draft btn btn-lg btn-default pull-right">Save Draft</button>
 <button data-go_to_page="2" type="button" class="next btn btn-lg btn-default pull-right">Page 2</button>
</div>

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

For any questions, please contact us - support@formyoula.com or the Formyoula in-app chat 🙂