It's time to talk about the customization of your forms by using our brand new feature, our Form Builder. In order to make your forms unique and lure your users to fill them out, LearnWorlds gives you the ability to fully customize them.
To change the design aspects of the form, you can navigate to each of the following options:
1. Theme Explorer
On the Theme Explorer, you can choose among the Colors, Vertical spacing, and Question Layout.
1. Open the form page by clicking on the Edit form option in the created Form learning activity.
If you would like to open a marketing form, then you need to go from the admin's dashboard to Marketing → Form Builder → Marketing Forms → click on Edit (the pencil icon).
2. Click on Design (the paintbrush icon).
3. Choose the Theme Explorer option.
Note: You can customize the form’s theme but the default colors are fetched from the colors selected in the school’s Color scheme. You can find out more, in the respective article.
Ιn case you do not wish your school’s colors to be depicted in the form, you can go to the Background tab. On the Background tab, you can customize each and every background color from all aspects of the form. These include:
a. Form background.
b. Questions wrapper background.
c. Questions Description background.
d. Question Answer background.
e. Top/bottom page shape.
You can detect the specific area being modified from the dashed lines so that you can change the color and add an image or SVG.
On the Typography tab, you do have the ability to select the type, the size of each option. However, those options are related to the attributes which have been already inherited from your school's typography settings, e.g. heading 1. Also, you can amend the colors of the input fields and error messages, as well as the file upload button.
On the Navigation tab, you can pick the way a user navigates in the form. First, you are able to select the Navigation mode and Layout, Previous and Submit buttons, and bar.
The Navigation mode is related to the way the questions are displayed. This section includes the following options:
a. Classic form: All the questions are displayed in the same place and the user accesses them by scrolling.
b. Card-based: Only one question/content block is shown at a time. Only the questions that belong to the same section are shown. If the user wants to see the questions of the next section, they need to click on the next button at the bottom of the screen. If they want to go back to the previous section, they can click on the previous button. This navigation setting also allows the auto progression of it to the next one (Auto navigate to the next question option).
c. Section-based: Only the questions that belong to the same section are shown.
On the Navigation Layout, you can configure the relative position of the navigation buttons and bar to the questions.
Last but not least, on the Navigation buttons and bar, you have the ability to choose the type, size, and format of the buttons and bar as well.
On the Effects tab, you are able to add some interactive effects to your form.
The options included are the following:
a. Question Transition: You can choose the way that questions appear such as fade, slide vertical, etc.
b. Multiple-choice effect: Τhe way in which the multiple-choice box is displayed in Multiple Choice Multiple answers question type.
c. Radio button effect: The way that the radio button is shown.
- Once you have completed the customization of your form, you can either click on Save (the tab will remain open) or Save&close (the tab will close after saving).
- You can always choose between saving as custom or global styles. Custom styles concern only one form while global styles will affect all existing and future forms.