Our Knowledge Base Center articles are being updated for our new platform design. Need assistance? Reach out to support@learnworlds.comIt's time to talk about the customization of your forms by using our brand new feature, our Form Builder. To make your forms unique and lure your users into filling them out, LearnWorlds allows you to customize them fully.
To change the design aspects of the form, you can navigate to each of the following options:
1. Theme Explorer
2. Background
3. Typography
4. Navigation
5. Effects
Theme Explorer
On Theme Explorer, you can choose among the Colors, Vertical spacing, and Question Layout.
1. Open the form page by clicking on the Edit questions option in the created Form learning activity.
If you want to open a marketing form, you must go from the admin's dashboard to Marketing → 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.
Background
You can go to the Background tab if you do not wish your school’s colors to be depicted in the form. 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.
Typography
On the Typography tab, you do have the ability to select the type and 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, error messages, and the file upload button.
Navigation
On the Navigation tab, you can pick the way a user navigates in the form. First, you can 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 in the next section, they need to click on the next button at the bottom of the screen. They can click on the previous button if they want to return to the previous section.
However, you can allow users to move backward in an Assessment. 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.
Effects
On the Effects tab, you can add some interactive effects to your form.
The options included are the following:
a. Question Transition: You can choose how questions appear, such as fade, slide vertical, etc.
b. Multiple-choice effect: Τhe way in which the multiple-choice box is displayed in the Multiple Choice Multiple answers question type.
c. Radio button effect: The way that the radio button is shown.
Notes:
- 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.
- If you click on Save and Choose the Save as School Default option, the Navigation settings will not be saved apart from the Previous, Next, and Submit buttons and Navigation bar settings.