Feedback

Description ​

Feedback component is the form for sending feedback or suggestions about the product. In most cases it opens from the "Send feedback" link or button.

Сomponent composition ​

Obligatory elements ​

• Textarea for feedback.
• Buttons for submitting and cancelling the entered message.
• Information on GDPR is obligatory only for European users. Show the following text before the submitting buttons: "We will only use this email to respond to you on your feedback". Don’t forget the link to the Privacy Policy at the end of this text.

Optional elements ​

• reply-to input. The input may be made obligatory for submitting.
• Checkbox "I need help, please contact me".
• Message about the alternative way to send feedback with the mailto link: "You can also send us an email at comand_name@semrush.com".

Appearance ​

• Dropdown has padding: var(--spacing-4x).
• All inputs in this form has one size – M.
• For bottom message use secondary colored text (--text-secondary) with 14px font size (--fs-200, --lh-200 tokens).

Placement ​

In most cases the feedback form opens from the "Send feedback" link at the upper right of the page or from the "Send feedback" buttons inside a notice for feedback collection.

In some cases it may open from the button "Send feedback", placed in the widgets.

Interaction ​

Input's behavior ​

• After opening the form set the focus on the textarea.
• There is a limitation for a minimum of 10 symbols and not less than 3 words in this textarea for submitting it. If the entered message doesn't match these rules, after submitting it user gets an error with the tooltip describing how many symbols/words are required for submitting feedback.
• User cannot expand this textarea manually (use noresize property). But if the user entered more than 4 lines, the textarea grows in height itself according to the number of the lines entered. After 8 lines scroll appears.

Label this textarea with the text: "Tell us your suggestion or report an issue".

Checkbox's behavior ​

If the user checked the checkbox "I need help...", the message should be automatically sent either to the product team, and to the Customer Success team, so they could help the user.

Placeholder for this textarea: "I need help, please contact me".

Button's behavior ​

• The form's trigger should get the active state if the form is opened.
• After validation of the inputs and submitting the message, show message: "Thank you for your feedback!". After 2500ms the form smoothly closes with a fade of 500ms.
• After clicking the Cancel button the form closes.

Message submitting ​

To show loading state after submitting the form, wrap the form into the SpinContainer with the XL size Spin.

Success submitting ​

In case of successful submitting the form, show success message. This status is shown during 3-5 seconds, and then it closes. Also user may close it themself, as any other dropdown (by clicking outside it).

Message text for this case: "Thank you for your feedback!".

Validation ​

Invalid textarea ​

Textarea gets invalid state when:

• The user entered nothing.
• The user entered less than 10 symbols / 3 words.

Message text for the tooltip: "Your feedback must contain at least 3 words (10 characters)".

Invalid email input ​

• If the email input is empty, show the tooltip with the following message: "Please enter valid email".

• If the user enters the invalid email, the tooltip should be shown with the request to specify the right one in order we could reply to: "Please provide us with a valid email address so we could reply to you".

Backend error ​

• If an error occurred after submitting the form, show the message instead of the message with mailto link under the submitting button.
• If mailto link already exists, change its color into red and replace the message text.

Message text for this case: "Your message hasn’t been sent. Please try again or contact us at at {mail address}".