Redirect The User To The Custom Setup Form

This guide will explain how to redirect the user to the custom setup form by clicking the “Gear” icon on the app.

  1. Formyoula admin setup page on the builder site:
  • Click the “Setup” under the down arrow next to your name on the Dashboard.
  • It will open the admin setup page.
image
  • Paste the code in the “Mobile Footer (HTML)”.
image
  • Please use this code.
<script>
  // FormId to open on setup gear icon click
  var form_id = '64ca583e33390f0014931a99';
  // Listen to the setup:open event
  window.formyoula.event_on( 'setup:open', function( options ) {
    // Check if options are not defined
    if ( !options ) {
      // Open the custom form to update the defaults
      window.formyoula.event_trigger( 'form:open:new', {
        form_id: form_id
      } );
      // Listen to custom setup button click event
      $( '#advanced_setup' ).click( function() {
        // Trigger setup:open to open the default setup page passing the options
        window.formyoula.event_trigger( 'setup:open', {
          advanced_setup: true
        } );
      } );
    }
  } );
</script>
  • Make sure to update the Custom Setup form ID on the code.
image
  • Note: You can copy the form ID from the form edit page URL.
image
  • Save the changes by clicking the “Update Organisation” button.
image
  1. The "Advanced Setup" Button On The Custom Setup Form:
  • Drag and drop an “HTML” field onto your Custom Setup form.
  • Rename the field as needed.
image
  • Click the pencil icon of the “HTML” field.
  • Paste the code and save the changes.
image
  • Please use this code.
<button id="advanced_setup" class="btn btn-primary pull-right">Advanced Setup</button>
<span class="glyphicon glyphicon-cog setup_btn pull-right" style="display:none"></span>
  1. Form Setup:
  • Click the form Setup button.
image
  • Disable “Form Header” and “Standard Navigation”.
  • Save the changes by clicking the “Save Changes”.
image
  1. Test the functionality:
  • Try the Mobile app or Mobile Web app.
  • Clicking the “Gear” icon will launch the custom setup form.
image
  • Clicking the “Advanced Setup” button will take the user to the default setup page.
image

For any questions, please contact us - [email protected] or the Formyoula in-app chat. 🙂