Forms are great for receiving messages and collecting emails from your customers and visitors. Shogun's Forms element gives you the ability to create customizable forms to add to your pages. The Forms element will use your theme's styling by default.

Shogun's Forms consists of 6 elements:

  1. Form Box
  2. Form Text Input
  3. Form Dropdown
  4. Form Check Box
  5. Form Radio Button
  6. Form Submit Button

How to Add a Form to Your Shogun Page

Adding a form to your Shogun page is easy. Below is an overview of the steps to add a form.

  1. Drag the Form Box element onto your page.
  2. Add the form elements (text input, dropdown, checkbox, radio button) inside the Form Box.
  3. Add other elements as desired (images, icons, etc.).
  4. Add the Form Submit Button inside the Form Box.

Setting Up the Form Box

The Form Box must be placed on the page first before the other form elements become available for use. The Form Box is where you can change the form name, where the submission is sent to, submission message, and a redirect URL. Additionally, you can change the styles for the error text, labels, and label padding.

Form Name: The Form Name serves two purposes. The text entered into this field is included in the subject line of the email notifications you receive when a visitor submits a form. It also appears in the exported form data. We highly recommend entering a name for this field as it is used as a unique identifier if you have multiple forms throughout your site.

Send submissions to: Submissions from the form will be emailed to the address entered in this field. Multiple emails can be added to this field, separated by commas. For example, "x@getshogun.com, support@getshogun.com".

Note When using a custom server or email domain, please ensure that no-reply@getshogun.com is whitelisted in order to receive emails. Please consult with your email service provider for guidance on whitelisting domains.

Success Message: The text entered here is the message that is displayed when a form is successfully submitted.

Redirect URL: If you would like your customers to be redirected to a different page after submitting the form, enter the URL of the page here.

Open in same tab: This determines whether the redirect page opens in the current tab or a new tab.

Form Box Styles

The Form Box controls the styling of the labels of the other form elements contained within it along with the success and error messages.

Form Text Input

The form text input allows you to capture text from your visitors and is useful for capturing names, email addresses, phone numbers, etc.

Input Type: There are three input types for the text field you can select from.

  • Text - Allows for a single line of text to be entered in the field. This is used for collecting names, subject, a phone number, etc.
  • Text Area - Allows for multiple lines of text. Use this input type if you would like to collect messages from your customers or visitors that are more than one sentence.
  • Email - Uses the email address format for the text for collecting emails. This field will expect an email input into the field (Ex. support@getshogun.com).

Label: Enter the label for the Form Text Input here (Ex. "Phone Number" or "Email"). The text entered here will be the column title of the field in the CSV export for the form.

Note The label style (font, color, etc.) can be customized using the Label Style settings in the Form Box element.

Placeholder: This is the text that is displayed while the text field is empty. It will disappear once a text is entered. The Form Text Input element allows for separate styling options for the input text and the placeholder text.

Required: This option determines if the user can submit the form without filling in the field or not. Toggle this on a field of important information to ensure that your user does not submit the form without it.

Form Dropdown

The Form Dropdown element allows your customer to choose an option from a list. This is useful when there are many options to choose from, such as a list of countries.

Label: Enter the label for the Form Dropdown here (Ex. "Country"). The text entered here will be the column title of the field in the CSV export for the form.​​​​​​​

Note The label style (font, color, etc.) can be customised using the Label Style settings in the Form Box element.​​​​​​​​​​​​​​

Placeholder: This is the text that is displayed when no option has been selected from the dropdown. It will disappear once a text is entered.

Dropdown Options

You can add as many options as you want for the dropdown list by clicking on the "+ Add Option" button; however, only one option can be selected for the list. You can also reorder the options to your liking by dragging them up or down the list. You can remove an option by click on the "X" icon.

Toggling the "Selected by default" for an option will make it the chosen option by default. This will be the option that is displayed for the list before toggling the drop-down menu regardless of its order placement in the list.

Required: This option determines if the user can submit the form without filling in the field or not. Toggle this on a field of important information to ensure that your user does not submit the form without it.

Form Check Box / Form Radio Button

The Form Checkbox and the Form Radio Button work similarly. They both allow you to give your customers options to select when submitting the form. Both elements allow for an unlimited number of options, and you can add as much as you want.

Similar to the Form Dropdown, you can rearrange the options by dragging them up and down and remove them by clicking on the "X" icon. You can also set an option to be the default selection by toggling "Selected by default."

Below are the differences between the two elements.

  • Form Check Box: Allows for multiple boxes to be checked at once and for multiple options to be selected as default.
  • Form Radio Button: Can only have one radio button selected and one option set as the default.

Label: Enter the label for the checkbox or radio button here. The text entered here will be the column title of the field in the CSV export for the form.​​​​​​​

Note The label style (font, color, etc.) can be customized using the Label Style settings in the Form Box element.​​​​​​​​​​​​​​

Required: This option determines if the user can submit the form without filling in the field or not. Toggle this on a field of important information to ensure that your user does not submit the form without it.

Checkbox and Radio Button Options

Similar to the Form Dropdown element, you can add as many options as you want for the dropdown list by clicking on the "+ Add Option" button You can also reorder the options to your liking by dragging them up or down the list. You can remove an option by click on the "X" icon.

Toggling the "Selected by default" for an option will make it the chosen option by default.

Customizing the Checkbox and Radio Button

Both elements can be customized to your liking. There are four styling options that you can configure.

  • Option text style: Customize the font, color, etc. of the text for the options.
  • Default style: This controls the appearance of the checkbox or radio button of the selected option. This also controls the appearance of the options that have been set as the default selection.
  • Hover style: This controls the appearance of the checkbox or radio button when the mouse cursor hovers over it.
  • Focus style: This controls the appearance of the checkbox or radio button when it is clicked on. Clicking away from the checkbox or radio button will change the color to the default style.


Form Submit Button

The Form Submit Button is the final part of the form, and it is necessary for your visitors to submit the information they entered into the form. This button triggers the submission of the data and the settings set in the Form Box (success message, redirect URL, etc.).

The button's label and colors can be changed to better suit your needs.

Past webinar: Advanced Forms and Saved Styles

Did this answer your question?