Saving incomplete form responses to LocalStorage and Pre-populating form

[yuvi100]

Hi there,

Just wondering if anyone could help me out in saving incomplete form data to local storage and pre-populating the form based on those local storage values (if they exist - otherwise populate answers as 'blank').

Any help would be appreciated!

Thanks

[spinn]

Hi,

you could use the onAnswer or onStep events to catch when the user answers a question and then save your whole questions array to localStorage (or only the answers so as to not use too much storage space), and then when constructing the array, set the answer of the QuestionModel to your saved answer. This field is currently undocumented but I've opened issue #165 to make sure we document this in the future.

If you're setting the questions as components, simply set their v-model to whatever value you have saved in localStorage.

Example:

<template>
  <flow-form
    ref="flowform"
    v-on:step="onStep"
    v-bind:questions="questions"
  />
</template>

<script>
  export default {
    name: 'example',

    components: {
      FlowForm
    },

    data() {
      questions: [
        new QuestionModel({
          id: 'first_name',
          tagline: 'Hi! Welcome to our demo survey 😊',
          title: 'What is your first name?',
          type: QuestionType.Text,
          required: true,
          placeholder: 'Start typing here...',
          answer: localStorage.getItem('first_name')
        }),
        ...
    },

    onStep() {
      localStorage.setItem('first_name', this.questions[0].answer)
    },

    ...
  }
</script>

[spinn]

The issues you're having were actually in Vue Flow Form and not in your implementation. I've now fixed these issues, it should work if you pull the new version from master, but we're also planning to push a new version to npm within a few days.

[yuvi100]

Thanks for the update!

Everything is being saved to localStorage and not populating up as 'null' anymore, which is great.

There's still a slight problem:
If someone selects multiple answers e.g. serialised array = ["18 - 24","25 - 34"] then refreshes the form (the values populate correctly) and then clicks enter again to proceed to the next step, the array gets added to the initial serialised array, the localStorage value ends up looking like this: ["18 - 24","25 - 34","18 - 24","25 - 34"] (basically a repeat).

This also means that if someone was to go back over their answers, deselect one of the multiple selected answers, it would still populate.

[spinn]

No problem at all! The issue you reported has also been fixed with the latest commit.

[yuvi100]

Everything works! thank you!

[spinn]

Just a quick update - there was another issue where the other option wouldn't get pre-populated, this has now also been fixed. The onAnswer event now also sends QuestionModel as its argument (before it sent the Question component). This means that you'll need to update your onAnswer listener so it accesses QuestionModel directly, eg.:

onAnswer(question) {
  localStorage.setItem('question_' + question.id, JSON.stringify(question.answer))
}