Multi-step form

Get Help
1

Hi

What is the best way to create a multi-step/page form, while still using the form component (e.g. not an external library)?

Best,
Nathan

2

Hi Nathan,

I have a few solutions in mind but before I suggest I would like to understand what kind of data this is? For e.g. is this data belonging to the logged in user data and they are updating data related to their profile data or is this something like users submitting bookings to a data source separate from the data source containing user profile data?

Also, do you have experience with JS as this might require code to complete specifically the form JS API?

Thanks,
Deb

3

Hi Deb

The app requires the user to be logged in but the form in question is to collect information (in a separate data source). It is quite a long form but has clear sections. It will require users to input information at a few different stages, so the ability to come back and navigate through sections will be helpful.

Maybe something like the ‘Quiz’ screen from the Marketing app template.

Happy to run with additional JS - I thought it might be the case!

Best,
Nathan

4

Hi Nathan,

I have a solution which will hopefully help you.

Overall steps:

  1. Create form components on separate screens and link them together so submitting one form goes to the next one. The DS config will be mentioned below.
  2. Add the code below to the Global JS.

Form config

The form needs a few things set up:

  1. The first form needs to be named “Start”. For e.g.
    image

  2. Add a hidden field also called “Start”
    image

  3. This process needs to be repeated for any forms that are linked to this i.e. any subsequent form needs to be called “Continue” and have a hidden field called “Continue”

  4. The last form in the series needs to be called “End” and also have a hidden field called “End”

  5. The first form needs to be set up to save to the required DS like so:
    image

  6. Every subsequent form. (the Continue and End ones) should not have a DS associated with it as it will be handled via code. For e.g.
    image

NB: you should only have 1 form called Start and 1 called End. You can have as many Continue forms as you like.

Then the following code needs to be added to Global JS:

Fliplet.Hooks.on('afterFormSubmit', function(response) {
  //if submitting the first form then store data in storage. 
  if (response.result && response.result.data.Start === '') {
    var obj = {
      entryId: response.result.id,
      dataSourceId: response.result.dataSourceId
    };
    return Fliplet.App.Storage.set('entryData', obj);
  }
  //if final form End is submitted the storage is cleared. 
  if (response.result && response.result.data.End === '') {
    return Fliplet.App.Storage.remove('entryData');
  }
});

Fliplet.App.Storage.get('entryData').then(function(value) {
  if (value.entryId && value.dataSourceId) {
    return Fliplet.FormBuilder.get().then(function(form) {
      //only applies to forms names 'Continue' or 'End'
      if (form.name === 'Continue' || form.name === 'End') {
        return Fliplet.DataSources.connect(value.dataSourceId).then(function(connection) {
          form.load(function() {
            return connection.findById(value.entryId);
          });
          //Update the entries if continue or end form
          return Fliplet.Hooks.on('beforeFormSubmit', function(data) {
            return connection.update(value.entryId, data);
          });
        });
      }
    });
  }
});

That should be it! Let me know if it works for you.

Thanks,
Deb

5

Hi Deb - thanks your solution. It works great!

1 Like