- Edit or Create a New Form.
-
Click on the Success Message item from the left hand menu.
- This will open the Success Message Builder GUI (Graphical User Interface) which works the same way as Form Builder GUI.
NEX-Forms Documentation
Documentation & Tutorials for NEX-Forms version 8.0 and above
Setup & Styling the On-Screen Success Message
The NEX-Forms on-screen success message is a feature that provides immediate feedback to users after they have successfully submitted a form. This message is displayed directly on the form page, ensuring users know their submission has been received without needing to navigate away from the current page.
This article will guide you on building and styling your on-screens success message.
How to Edit the On-Screen Success Message
You can customize the content of the success message to include specific text, images, or even HTML elements. This allows you to personalize the message to suit your needs or to convey additional instructions or information.
How to Add Elements to a Success Message
You can add elements into a success in 2 different ways: Clicking or dragging. Find step by step guides below on how to do each.
Clicking an Element into the Success Message
- Edit or Create a New Form.
- Click on the Success Message view in the Editor.
- Click on any of the elements from the draggable item toolbar to add to the success message.
-
The element will automatically be appended to the message.
Dragging an Element into the Success Message
- Edit or Create a New Form.
- Click on the Success Message view in the Editor.
- Click on any of the elements from the draggable item toolbar and Hold the mouse button.
-
While holding the mouse button down Drag the field over the message container into the position where the element needs to be inserted into the message.
-
When the element placeholder is in position release the mouse button to Drop it into the message.
Success Message Styling & Settings
- Edit an existing form or create a new form.
- Click on the Success Message view in the Editor.
- Click on the "More Styling Options" button (last button on the width bar)
- Overall styling options and settings will slide in from the right hand side of the builder.
- Click on the "SUCCESS MESSAGE" tab in the Overall Styling Panel.
Form Submission Options
| Form Submission Setting Definitions | |
| Setting | Definition |
| Hide Form | |
| Yes (default) | Hides the form after its been submitted and only shows the success message. |
| No | Keeps the form visible after its been submitted and shows the success messsage above or below the form. |
| Show | |
| Above Form | Shows the success message above the form if set to be visible after form submission. |
| Below Form | Shows the success message below the form if set to be visible after form submission. |
| Placement | |
| Inside Form | Shows the success message inside the form wrapper. Only applicable if the form is set to be visible after a form submission. |
| Outside Form | Shows the success message outside the form wrapper. Only applicable if the form is set to be visible after a form submission. |
Success Message Wrapper Styling Options
This section provides a comprehensive guide to understanding and effectively utilizing all the overall styling settings that can be applied to the Success Message Wrapper.
| Wrapper Styling Setting Definitions | |
| Setting | Definition |
| Overall Font | Includes a selection of over 1500 google and regular fonts and sets the font family for all elements inside the success message. Use this setting to instantly change the overall font of your entire success message as to doing so for each element individually. |
| Form Background | Sets the background color of the success message. |
| Border Color | Sets the border color of the success message. |
| Border Width | Sets the width (thickness) of the success message border. |
| Border Radius | Sets the border radius (roundedness) of the success message border. |
Success Message Wrapper Margins & Padding
Margins control the space around the Success Message Wrapper, affecting its positioning relative to other page elements, while padding controls the space within the Success Message Wrapper, affecting the spacing between the success message elements and the border of the Success Message Wrapper itself.
Success Message Margins
Margins are the space outside of the border of an element. They control the amount of space between the element and its neighboring elements. Margins contribute to the layout of the page by creating space between elements. You can set margins for each side of the success message independently (top, right, bottom, left)
Thank you John Doe.
We will be contacting you soon via Skype regarding your new website.
| Success Message Margin settings list: | |
|
|
| Setting | Function |
| Margin Top | Sets the total space above the Success Message Wrapper, measured in pixels. |
| Margin Right | Sets the total space to the right of the Success Message Wrapper, measured in pixels. |
| Margin Bottom | Sets the total space below the Success Message Wrapper, measured in pixels. |
| Margin Left | Sets the total space to the left of the Success Message Wrapper, measured in pixels. |
Success Message Padding
Padding is the space between the content of an element and its border. Padding is used to create space inside the element, effectively increasing the distance between the content and the border. Padding does not affect the layout of neighboring elements; it only affects the internal spacing of the success message itself. Like margins, padding can be set for each side of an element individually
Thank you John Doe.
We will be contacting you soon via Skype regarding your new website.
| Success Message Padding settings list: | |
|
|
|
| Setting | Function |
| Padding Top | Sets the amount of space between the top of the success message's inner elements and the top border of its wrapper, measured in pixels. |
| Padding Right | Sets the amount of space between the right side of the success message's inner elements and the right hand border of its wrapper, measured in pixels. |
| Padding Bottom | Sets the amount of space between the bottom of the success message's inner elements and the bottom border of its wrapper, measured in pixels. |
| Padding Left | Sets the amount of space between the left side of the success message's inner elements and the left hand border of its wrapper, measured in pixels. |
Success Message Wrapper Background Image Settings
Learn how to add a background image to your success message.
| Success Message Background Image Setting Definitions | |
| Setting | Definition |
| Image | Opens your file browser from where you can browse to the image you need to use for your success messagebackground. Open the image to add it to your form background. Click on the X to remove the background image. |
| Size | |
| Auto | Renders the background image in its original size inside the Success Message Wrapper. |
| Contain | Resizes the background image to make sure the image is fully visible within the Success Message Wrapper. |
| Cover | Resizes the background image to cover the entire Success Message Wrapper, even if it has to stretch the image or cut a little bit off one of the edges. |
| Repeat | |
| Repeat X & Y | The background image is repeated both vertically and horizontally. The last image will be clipped if it does not fit. This is the default. |
| Repeat Y | The background image is repeated only vertically |
| Repeat X | The background image is repeated only horizontally |
| No repeat | The background-image is not repeated in the Success Message Wrapper and the image will only be shown once in its given position. |
| Position | |
| Align Left | Aligns the background image to the left of the Success Message Wrapper. |
| Align Center | Aligns the background image to the center of the Success Message Wrapper. |
| Align Right | Aligns the background image to the right of the Success Message Wrapper. |
Example of a success message with a background image
Below is an actual success message example with a background image sized to be auto, with no-repeating and positioned to be aligned to the center of the success message wrapper.
Success Message Wrapper Drop Shadow
Learn how to add a light or dark drop shadow to the success message wrapper and how to completely remove the drop shadow.
Drop a light Success Message Wrapper shadow
- Edit an existing form or create a new form.
- Click on the Success Message view in the Editor.
- Click on the "Drop Light Shadow" button under the background settings in the width bar.
Drop a dark Success Message Wrapper shadow
- Edit an existing form or create a new form.
- Click on the Success Message view in the Editor.
- Click on the "Drop Dark Shadow" button under the background settings in the width bar.
Removing a drop shadow from a form
- Edit an existing form or create a new form.
- Click on the Success Message view in the Editor.
- Click on any active shadow by turning it off.
Removing the Success Message Wrapper
Learn how to create an open plan form by removing the wrapper background.
- Edit an existing form or create a new form.
- Remove the form drop shadow by clicking on any active drop shadow.
- Open the form Background color setting.
- Click on the "Clear Color Selection" button.
- Set the overall form padding to your needs.
Was this article helpful?
Still having trouble? How can we help you?
This article was last updated on 19 November 2024
Popular Articles
Stay in Touch
Get the latest NEX-Forms news and info by following us on:
In this article