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:
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.
Drag the Form Box element onto your page.
Add the form elements (text input, dropdown, checkbox, radio button) inside the Form Box.
Add other elements as desired (images, icons, etc.).
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.
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, 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). This will ensure that the email is also added as a reply-to email on the submission email.
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.
💡 Note: each Form Check Box and Form Radio Button must have a unique name, this includes when using screen settings to duplicate the element on mobile/desktop
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.
reCAPTCHA
reCAPCHA can be dropped into the form box in order to prevent spam submissions from making it through to your inbox.
This first needs to be set up as an integration with Google's reCaptcha, a process that is documented here.
Past webinar: Advanced Forms and Saved Styles
FAQs
Can I get my form submission emails to multiple email addresses?
At present our form element isn't able to do that. What we would recommend is if you have multiple email addresses that those submissions need to go to, you could add a forwarding rule in the destination inbox to send a copy to alternate email addresses on receipt.
My form submissions populate no-reply@getshogun.com instead of the user's email in my email service provider's 'reply to' field, why?
Shogun relies on editor-given importance for the 'email' field, and therefore in order for use to determine what property is expected to be in email format, one of the text input fields needs to be set to the email 'input type' in order for the setup to be valid for sending 'reply to' mail, and accurately populating that field for your email service provider.