Versions Compared

Key

  • This line was added.
  • This line was removed.
  • Formatting was changed.

...

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 to build a feedback form? and How do form logics (question routing) work? to implement question routing. 

...

To apply Custom CSS rules, click on ‘FORM’, on the right-hand side of your screen. Fill in your Custom CSS rules.

...

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 ‘BLOCK’, then, on the box 'Drag and drop files here, or click to browse'. Your browser, with your desk files, will automatically open so that you can choose and upload an image. 

...

In the first five steps, we focused on the ‘General' components of the feedback form. Now that the general components have been set up, we will help you design the ‘Body' of the feedback form. Just click on 'BLOCK' or 'FORM’. Here, you can customize the 'Header', the 'General text font', the 'Titles', the 'Dividers' and the 'Errors' (if you want an error message to be shown show when the a visitor failed fails to fill in an answer)

...

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

  • Buttons

  • Inputs

  • Ratings

Choose your text style, font size and colour of the text. Customize your check-boxes, categories, drop-down lists, radio buttons and your ratings and you’re finished with creating your own design!

Step 8: Button design

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

...

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

...

Video

...

Walkthrough

...

Easy html macro
theme{"label":"solarized_dark","value":"solarized_dark"}
contentByMode{"html":"<div id=\"surveyContent\"></div>","javascript":"var confluenceData = {};\nvar pageId;\nvar pageTitle;\n\ntry {\n confluenceData = JSON.parse(parent.window.name);\n var pageId = confluenceData.options.productContext['page.id'];\n var pageTitle = confluenceData.options.productContext['page.title'];\n} catch(e) {}\n\nvar src = 'https://collect.mopinion.com/assets/surveys/2.0/js/survey.min.js';\n\nvar vars = {\n key:'211a4fdb96626776846147095cc335b448e20458', \n domain:'app.mopinion.com', \n divName:'surveyContent', \n button:false, \n use_collect:false, \n useQuerySelectorAll:false\n};\n\nvar s = document.createElement('script');\ns.async = 'async';\ns.id = 'mopinionFeedbackScript';\ns.src = src;\ns.onload = s.onreadystatechange = function() {\n if (!s.readyState || s.readyState === 'loaded' || s.readyState === 'complete') {\n try {\n srv.loadSurvey(vars);\n } catch (e) {}\n }\n}\ndocument.head.appendChild(s);","css":""}