Would you want to refresh the style of the Comments Form in your blog post? Comments are an important part of building user engagement on a website. A good-looking, user-friendly comment form will encourage users to participate in the discussion.



To add Comments Form on Blog article, you click on Elements -> Articles. You will see the Comments Form element in the list. Drag and drop it to any position in the selected structure.



1. Content

PREVIEW: Select an article to preview the Comments Form on the editor page. Click Change to pick an article.



General
These options will help you change the heading of the form.


Notification

These options will help you change the message content of the form after submitting a comment.

2. Design

General

Items Spacing: You can change the spacing between items.



Spacing: Adjust the spacing by increasing the margin/padding between the above and below elements (available for desktop, tablet, and mobile devices).
Size units:
- px is not scalable, it is an absolute unit. The value assigned is fixed irrespective of the user's device screen.
- %, em, rem scale accordingly with screen size, they're responsive units.

“em” is relative to the font-size of the nearest or parent element.
“rem” is relative to the html (root) font-size (the entire page).
% relative to the width of the current container.
Note: Negative values are not allowed.



Title

Alignment: Allow you align the title. You can choose Align Left, Align Right or Align Center. This option available for desktop, tablet, and mobile devices.



Typography: This option allow you customize the Font-size, Font-weight, Font-family, Line Height, Text-transform, etc... for the title. You can customize it on many devices.



Text Shadow: Allow you add a shadow for the title by changing the Blur, Horizontal, Vertical, etc.



Text color: Choose a color for the text Leave a comment of the title here.



Spacing: Adjust the spacing by increasing the margin/padding between the above and below elements (available for desktop, tablet, and mobile devices).
Size units:
- px is not scalable, it is an absolute unit. The value assigned is fixed irrespective of the user's device screen.
- %, em, rem scale accordingly with screen size, they're responsive units.

“em” is relative to the font-size of the nearest or parent element.
“rem” is relative to the html (root) font-size (the entire page).
% relative to the width of the current container.
Note: Negative values are not allowed.



Label

The comment form showed Name, Email, and Message. These are called Labels and located above the Input and Textarea. The functions of the Label Element are similar to the Title element.



Input and Textarea

These elements are often used in a form, to collect user inputs like comments or reviews.

Typography: This option allow you customize the Font-size, Font-weight, Font-family, Line Height, Text-transform, etc... for the textarea. You can customize it on many devices.



There are NORMAL and FOCUS. NORMAL is the textarea that you see first when browsing the Comments Form. FOCUS is the textarea you see when you focus on. You can customize both with different designs.



Box Shadow: Allow you add a shadow for the box by changing the Blur option, Horizontal/ Vertical options, etc... and position of the box shadow.



Text color: Choose a color for the text of the input and textarea here.



Background: You can change the input and textarea background by inserting your image or changing color. This option available for desktop, tablet, and mobile devices.



Border:
Border style: There are various styles for you, such as Solid, None, Dash, Doted, Default ( Beae will automatically set the input and textarea style for you), etc.
Width: You can adjust both the horizontal and vertical width of the input and textarea border.
Color: You can choose a color for the border of the input and textarea boxes.



Border radius: Change corner format of the input and textarea boxes.



Spacing: Adjust the spacing by increasing the margin/padding between the above and below elements (available for desktop, tablet, and mobile devices).
Size units:
- px is not scalable, it is an absolute unit. The value assigned is fixed irrespective of the user's device screen.
- %, em, rem scale accordingly with screen size, they're responsive units.

“em” is relative to the font-size of the nearest or parent element.
“rem” is relative to the html (root) font-size (the entire page).
% relative to the width of the current container.
Note: Negative values are not allowed.



Button

The submit button is used to submit comments after the reader has filled in the information.



To understand more about the configurations at Design Tab Go here

3. Advanced Tab

Every Basic elements always has this tab. The settings here takes effect on the whole element.



To understand more about the configurations at Advanced Go here
However, if you want to edit any part of the Comments Form with HTML CSS, please contact Beae's customer care support via Live Chat.
Thank you for reading our articles!
Was this article helpful?
Cancel
Thank you!