Use code to create form questions and fields without having to set up the form in Fliplet Studio
Typically you’d create a form using Fliplet’s form component in Fliplet Studio. However it’s also possible to create a form with code dynamically (and prefill data into the form fields if you wanted) without setting up the component in Fliplet Studio. You may want to do this if a form shown to different users will be substantially different (if you only wanted one or two fields to change per user it is possible to hide them or pre-set them. This may be easier than dynamically creating an entire form. See this example).
To dynamically create a form with code you will need to have an unset form component in your screen and use code to set each of the fields (ie, questions). To set each of the form fields with the relevant options. As a minimum, each form field needs to have a type, name and label.
-
type: The type of field (ie, the question is expecting a response that is text, number, email, multi-option). The different types are shown in the example code below -
name: This is the name of the field. It will be used as the column title in the data source as well as a way to reference the field (so it needs to be unique) -
label: This is the text that appears just above the form entry options
Additional options for certain field types include:
-
options: A list of options to show users if the type of question has a multi-choice response -
value: The default value of the field -
required: (TRUE or FALSE) Determines if a field should be required to fill in or not -
placeholder: Set the text that sits in the form field (normally in gray) before a user starts typing.
The example below sets form fields for all the different field types (eg: a plain text input, an email input or multi-choice questions).
Fliplet.FormBuilder.get()
.then(function (form) {
form.fields.set([
{
_type: 'flInput',
name: 'fullName',
label: 'Enter your full name',
value: 'John Smith',
required: true
},
{
_type: 'flEmail',
name: 'email',
label: 'Enter your email address',
required: true,
placeholder: 'Enter your email address here...'
},
{
_type: 'flNumber',
name: 'number',
label: 'Enter a number',
},
{
_type: 'flTelephone',
name: 'phone',
label: 'Enter a phone number',
},
{
_type: 'flUrl',
name: 'url',
label: 'Enter a URL',
},
{
_type: 'flPassword',
name: 'password',
label: 'Enter a password',
},
{
_type: 'flTextarea',
name: 'message',
label: 'How can we help you today?',
placeholder: 'Enter your answer here...'
},
{
_type: 'flWysiwyg',
name: 'wysiwyg',
label: 'Enter your rich text here'
},
{
_type: 'flDate',
name: 'date',
label: 'Select a date'
},
{
_type: 'flTime',
name: 'time',
label: 'Select a time'
},
{
_type: 'flSelect',
name: 'enquiryPurpose',
label: 'What is your enquiry about?',
options: [{
id: 'Support'
}, {
id: 'Feedback'
}]
},
{
_type: 'flRadio',
name: 'radioButtons',
label: 'Choose one of the following?',
options: [{
id: 'Support'
}, {
id: 'Feedback'
}]
},
{
_type: 'flCheckbox',
name: 'checkboxButtons',
label: 'Choose any that apply',
options: [{
id: 'Support'
}, {
id: 'Feedback'
}]
},
{
_type: 'flImage',
name: 'image',
label: 'Select an image'
},
{
_type: 'flFile',
name: 'file',
label: 'Select a file'
},
{
_type: 'flTitle',
name: 'title',
value: 'This is a title'
},
{
_type: 'flParagraph',
name: 'paragraph',
value: 'This is a paragraph'
},
{
_type: 'flHorizontalLine',
name: 'horizontalLine'
},
{
_type: 'flStarRating',
name: 'starRating',
label: 'Rate this form'
},
{
_type: 'flSignature',
name: 'signature',
label: 'Please sign below'
},
{
_type: 'flButtons',
name: 'buttons'
}
]);
});