Can i have an image with the section break model

[Swapnayg]

i want to show images within the question to represent the image for that question type, and also i want to add the url links within the question label will this form still support this?

let me know your feedback as soon as possible.

thanks.

basically html content within the label and the sectionbreak module

[spinn]

Hi @Swapnayg,

we do have an image question type, depending on your use case you might use that. You can also add links to questions using descriptionLink:

https://www.ditdot.hr/en/docs/vue-flow-form-guide#global-options

As for adding custom HTML, this is currently not supported.

[Swapnayg]

hello, thank you for your quick response, i have done according to my use case but one issue i am facing here is want to make dynamically active question model how can i do that
can you give me any example: lets say i want to activate question number 5, when the content is loading, want to initiate the active index for that questiontype i tried a lot but none works can you please help me ?

[Swapnayg]

for your reference , here is my code,

var app = Vue.createApp({
el: '#app',
template: '#app-template',
data: function() {
return {
language: new VueFlowForm.LanguageModel({
// Your language definitions here (optional).
// You can leave out this prop if you want to use the default definitions.
}),
active:'1',
questions: [
new VueFlowForm.QuestionModel({
id: 'ques1',
tagline: 'Hi!',
title: 'Awesome, thank you. 🙏',
content: 'https://upload.wikimedia.org/wikipedia/commons/c/cd/Facebook_logo_%28square%29.png',
description: 'Note: We will take a look at our multiple path feature next.',
type: VueFlowForm.QuestionType.SectionBreak
}),
new VueFlowForm.QuestionModel({
type: VueFlowForm.QuestionType.Date,
id: 'ques2',
min:'2022-01-10',
max:'2022-01-20',
tagline: 'Support page > Ticket status',
title: 'Please enter your 6-digit code.',
subtitle: 'You received this when you reported your problem.',
multiple: false,
required: true,
}),
new VueFlowForm.QuestionModel({
id: 'ques3',
class:'',
tagline: '',
title: 'Label Name',
type: VueFlowForm.QuestionType.Number,
alink:'',
alinkText:'',
required: false,
placeholder: '',
mask:'',
description: 'description',
descriptionLink: [
new VueFlowForm.LinkOption({
url: '',
text: '', // optional, default is link url
target: '_blank'
})
]
}),
new VueFlowForm.QuestionModel({
id: 'ques4',
alink:'',
alinkText:'',
tagline: "Nice to meet you 👀, let's continue",
title: 'Provide an example email.',
type: VueFlowForm.QuestionType.Email,
required: true,
placeholder: 'Start typing here...'
}),

  ]
}

},
mounted() {
this.$refs.flowform.goToQuestion('ques2')
// You can also jump by question ID:
// this.$refs.flowform.goToQuestion('question_id')
},
methods: {
/* eslint-disable-next-line no-unused-vars */

onComplete: function(completed, questionList) {
  // This method is called whenever the "completed" status is changed.
  this.completed = completed

  // Set `submitted` to true so the form knows not to allow back/forward
  // navigation anymore.
  this.$refs.flowform.submitted = true

  this.onSendData()
},


onSendData: function() {
  const self = this
  const data = this.getData()

  this.loading = true

  /* eslint-disable-next-line no-unused-vars */
  
  /*
    You can use Fetch API to send the data to your server, eg.:

    fetch(url, {
      method: 'POST',
      headers: {
        'Content-Type': 'application/json'
      },
      body: JSON.stringify(data)
    })
  */

  setTimeout(() => {
    self.loading = false
  }, 1500)
},

getData: function() {
  const data = {
    questions: [],
    answers: [],
  }
  this.questions.forEach(question => {
    if (question.title) {
      let answer = question.answer
      if (Array.isArray(answer)) {
        answer = answer.join(', ')
      }

      data.questions.push(question.title)
      data.answers.push(answer)
    }
  })
  console.log(data)
  return data
},

getTicket: function() {
  return Math.floor(Math.random() * (999999 - 100000) + 100000).toString()
}

}
}).component('FlowForm', VueFlowForm.FlowForm);

const vm = app.mount('#app');

please help me i want this..

[Swapnayg]

Hi, i would like to know the exact way of calling the mounted function currently it is calling but that step vie is not loading instead it shows blank? Should I include this mounted functionality within the template as well , seems documentation doesn't have that much information regarding this please suggest me.

Thanks in advance

[Swapnayg]

and also want the previous button with each question how can we do that.
i guess you have to give one small example with this previous button and the start question index how it works and all

hope you understand, thanks in advance.

[Swapnayg]

Public API functions, how we can use it , specify one example please.

[spinn]

Hi @Swapnayg,

the documentation can be found here:

https://www.ditdot.hr/en/docs/vue-flow-form-guide

It details how all public API methods are used and how questions and logic jumps are defined. You could even define your questions as components to make them appear after you finished loading:

https://www.ditdot.hr/en/docs/vue-flow-form-guide#question-components

To jump to a specific question, all questions before it need to either have to be not required or they all have to be answered.

[Swapnayg]

thanks