How to add a FORM in GreatPages

How to add a form to a page in GreatPages.

1. Open the page editor;

2. Click the "form" icon located in the left side menu of the screen.

3. The form element will then open on your page. To edit it, click the form once and click "Edit".

4. The editing options will open on the right side of the screen. In the "Styles" menu you will edit the visual side of the form, such as:

Titles and fields

• Title position: In this setting, you define whether you want to position the form title further inward or outward;
• Text style: Select the text style option you wish to use. The settings for each text style are located in the Style Guide settings, under the "Fonts" section.

Field Styles

• Field height: The height of the fields varies between 36px and 76px. The higher the pixel count, the greater the distance between the fields;
• Background Color: Background color of the form field;
• Between the items: Space between fields;
• Internal: Internal space between field names;
• Border: In the border settings, you can choose to make them rounded. The higher the pixel count, the more rounded the border will be;
• Shadow: Shadow effect around the field.

Button styles

• Button text: Action text used on the form's conversion button;
• Button color: Here you can configure the button's background color and text color;
• Hover color: Color applied when hovering the cursor over the button. By default, the color used automatically contrasts with the button color;
• Text style: The text style determines the font size relative to the page's Design System settings;
• Border: Here, you fine-tune the button's borders, making them more or less rounded based on the number of pixels.
• Shadow: Shadow effect around the button.

Animation

• Effect: Select the desired effect style for the element. By switching between the effects, you can see how each one works..
• Direction: Here you can configure the direction of the animation—for example: up, down, right, or left..
• Speed: Here you define the speed of your animation. The closer it is to 250ms, the faster the speed; the closer it is to 2000ms, the slower the animation speed..
• Delay: This setting allows you to define the delay time for your animation. This time ranges from 0ms to 2000ms..
• Repeat: In this function, you can choose whether the animation appears only once or continuously..

5. In the "Configure" menu, you can make more advanced settings.:

• Form fields: This is the option where you edit or add new form fields. To add new fields, click the "Add field" button.;
• Redirect to: This is the field where you enter a redirect link; upon clicking to submit the form, the visitor will be redirected to the configured link.;
• Success message: Use this field to configure the message that will appear to the user after the form is submitted.;
• Integrations: Use this field to integrate with email marketing platforms.;
• Visibility: The field where you define whether or not the form will appear on the desktop and mobile versions..

6. And finally, we have the external code configuration, which can be accessed by clicking "Configure.";

• Element CSS selector: Field for copying the block ID;
• Edit HTML: Use this field only if you wish to edit the appearance of the form's action button using code..
• Button JavaScript: Use this field only if you want to add code that executes only when this button is clicked..

We hope we've helped! For any questions.

Updated on: 08/08/2026