Mluvii webLoginAPIDEMO

Feedback form with stars

You must complete several steps to create this output form, similar to the creation of the basic of the feedback form:

Create an HTML document, add CSS styles, and use “JavaScript methods” to ensure functionality of ratings and send data from the form. Then you must upload the form to any hosting that supports the HTTPS protocol and add a link to the form into the administration interface of the Mluvii application.

We recommend creating an output form using the codepen.io web application for simplicity and clarity. Start by clicking on this link, where there is already preset the ui framework preset Bootstrap with a small simplebar library, due to the difficulties with iframe scrolling on iOS. At the end of this manual, you can find the complete code for the output form.

How the form looks

Direct link to insert the form into the Mluvii administration application: https://mluvii.github.io/customization/feedback_stars.html

HTML

The first two div tags (and css and javascript linked to them) serve to display your own scrollbars for better user experience on mobile devices.

In addition to form inputs, the HTML code contains images of star ratings. It is relatively easy to replace them with other shapes, but it is necessary to observe the naming of the classes and possibly to make a javascript code that works with the patterns.

CSS Styling

We have modified the style of the form into the Mluvii application colors.

JavaScript code

The Javascript code of the form takes care of the functionality of star ratings and of sending data from the form to the Mluvii application. Ratings are sent through property “stars” in a “FEEDBACK_ACTION” message.

Editing the form

You can freely edit the form Easily, for example, colors. In CSS, edit the corresponding variables in the “:root” element or javascript code in the first two variables to change the color of the stars, and in the html code in the polygons of elements, the “fill” attribute to change the basic color of the stars.

All options for API forms can be found in the general instructions to create a feedback form.

Upload a form to any hosting

If you created the form using codepen.io, first click the Save button, then export to .zip format (see instructions below).

We have a form ready for you. Now you need to upload the form to the Internet so we can refer to it from the administration interface. In our case, we will use the GitHub site. You can find more information here.

If you use a tool other than codepen.io, the form code will look like this:

Inserting a link to the Mluvii application administration

You created an entry form using codepen.io. You have exported it to your computer. You have uploaded exported folders to the GitHub repository and then switched on the GitHub website. So you have a link to our form, which you put into the administration interface.

PreviousFeedback forms with emojisNextOffline forms

Last updated

Was this helpful?