Home / Widgets

Submit Button Widget

Unknown Author

Last updated on Nov 28, 2024

The Submit Button widget enables you to organize and categorize your Sign Up, Offline, and Password Protected pages. It is a clickable component that allows customers to complete the signup process, access your website, or log into their account by submitting the password entered in the Password field. 

Adding a Submit Button Widget

To add a Submit Button widget:

  1. Go to Visual Editor by selecting Advanced mode from the mode switcher on the Dashboard top panel, or navigate to Dashboard > Channels > Advanced.
  2. Open Page on the top panel and navigate to the Sign Up, Offline, or Password Protected system page.
  3. Go to the Widgets list on the Visual Editor Left Panel.
  4. Type the widget name in the search bar, or expand the User Account, Offline Page Widgets, or Password Protected Widgets grouping and select the Submit Button widget.
  5. Drag the widget from the list and drop it onto the Layout crafting area.

Configuring the Submit Button Widget

To design the appearance and behavior of the Submit Button widget, activate the Property Panel of the widget by clicking to access the widget Styles, Content, and Settings. To customize the widget:

  1. Go to Styles to modify the widget styling features:
  • Select the current condition of the widget from the State dropdown:
    • Normal: The default state of Button when it is not being interacted with.
    • Hover: The state of Button when the user hovers over it with the mouse cursor.
    • Focus: The state of Button when it is currently in focus or active.
    • Active: The state of Button when the user performs an action like clicking, tapping, or pressing.
    • Disabled: The state of Button when it is inactive or unavailable for interaction.
    • Selected: Active or currently selected state of Button, indicating that the user has specifically chosen or targeted it for a particular purpose.
  • Select how it behaves based on certain conditions or user interactions from the Mode dropdown:
    • Normal: The default state of Button when it is not being interacted with.
    • Loading: The state of Button once it is clicked.
  • Expand General and choose how the item is displayed on your website (only the label, only the icon, label with left or right icon).
  • Make the necessary configuration of principal styling features (see Global Styles).

2. Go to Content to modify the widget content.

  • Click Change Icon to add or change the icon of Submit Button.
  • Go to General Icons and select the corresponding icon from the list.
  • Go to My Icons and select the corresponding icon from the list uploaded in Media> Vectors.
  • Enter the label text.

3. Go to Settings, expand Visibility, and modify the widget visibility on your website. Select who can view the widget according to the customer’s location, session status, type of used device, browser, language preference, etc. (see Visibility Settings).

Tip:

  • You can add a new object style or select from the list. To do so:
  1. Click the bookmark icon in the top right corner of the Property Panel.
  2. Select the corresponding button type or click the plus icon in the top right corner of the Property Panel.
  3. Indicate the element name and select the size from the drop-down list.
  4. Click Save.
  • You can also access the UI Elements in the Design System from the upper-right corner of the Property Panel. Select one as a base for Submit Button, or create a new UI Element and style it according to your preferences. To do so:
  1. Click the Dotted Menu on the Property Panel.
  2. Select Reset Styles to discard the changes made to Submit Button and restore its default style.
  3. Select Override Styles to update the default style of the base element (font, size, alignment, etc.) and the elements derived from the base one.

Modifying the Submit Button Widget Elements

Once you have configured the Submit Button widget, you can modify the corresponding elements inside it according to your preference. This allows you to define the appearance and functionality of the widget on your website. The following elements are available:

Label

Allows you to modify the name of Submit Button. The label provides a brief description or name for the action or feature associated with the item. For example, you can name the button "Join Now" or "Sign Up" on the Sign Up page. For the Offline and Password Protected pages, options like "Log In" or "Submit Password" work well. To modify the Label element:

  1. Go to Styles to modify its styling features (see Global Styles).
  2. Go to Content and enter the label text.

Icon

Allows you to add or change the icon next to Submit Button that best suits your website design. To do so:

  1. Go to Styles to modify the element styling features (see Global Styles).
  2. Go to Content.
  • Click Change Icon.
  • Go to General Icons and select the corresponding icon from the list.
  • Go to My Icons and select the corresponding icon from the list uploaded in Media> Vectors.

 

💡 If you have questions or concerns, contact us directly via the Live Chat box in the lower right corner. Our Support Team will provide you with top-notch quality support 24/7.