This article contains references to our Classic interface that will become obsolete on July 1st. The most up-to-date article can be found on How do I customize the design of my feedback form?

Creating your custom design

Within your feedback form it is possible to create your own design by using the custom features in the feedback form builder.

Step 1

Go to 'Data collection' and click on 'Feedback forms'.

Step 2

Select the feedback form you want to edit, or click on 'Start from scratch' to start with the standard design of a new feedback form.

Step 3

You will see a navigation bar with four different options (build, design, configure, deploy).

For now we will focus on the 'Design' option so please click on this. For more information about building feedback forms please refer to the article "How do I build a feedback form?" and How do form logics (question routings) work for skipping and hiding questions? to implement question routing. 

Step 4 

After clicking on the option 'Design' you are presented with a selection of different themes that you can use for your design template. Once you select a theme, your chosen theme will be marked with a check. See example below with the font 'Open Sans' (the first theme). 

Step 5

To apply Custom CSS rules, click on the small, beaker icon. Fill in your Custom CSS rules and click on 'Done'.

Step 6

On the same page it is also possible to attach your own logo which will be shown when your feedback form is opened. To attach your logo, click on the box 'Drag and drop your logo here or click to upload'. Your browser, with your desk files, will automatically open so that you can choose and upload an image. 

Step 7

In the first five steps, we focused on the 'General' components of the feedback form. On the left side (see screenshot in step 4), you'll see a bar with different categories: 'General', 'Body', 'Buttons', 'Inputs', 'Ratings'. Now that the general components have been set up, we will help you design the 'Body' of the feedback form. Just click on 'Body' to start.

Once you've clicked on 'body', you will be redirected to this page. On this page, there are many customization options to create your own design. Here you can customize the 'Header', the 'Base Font', the 'Titles', the 'Dividers' and the 'Errors' (if you want an error message to be shown when the visitor failed to fill in an answer. 

Move your mouse to one of the options you want to design and the 'Form preview' will place a box around the section you're going to customize (see image above). 

The steps you take to customize the 'Body' settings also apply to the categories: 

- Buttons

- Inputs

- Ratings

Choose your text style, font size and color of the text. Customise your checkboxes, categories, dropdown lists, radio buttons and your ratings and your finished with creating your own design!

Step 8

If you're not satisfied with the position of the feedback button you can also change the position by clicking on 'Configure' and choosing another position using the 'Button Settings'.

Here you can also change the text and icon of your feedback button. Click on the Button icon line to open a panel to select a new icon. Click on the Button text line to type a new button text.

If you want to take a quick look, just click on the 'Blue eye' button and preview your changes.

To implement the feedback form on your own website we recommend that you read the following articles.

Oh, and make sure you don't forget to save your feedback form!

If you like to use your custom design template as a basis for another design, you can duplicate the template. Just click the duplicate icon and new custom theme is created.