You might need to upgrade your club website package to access Contact Forms. To learn more about the different packages we offer, CLICK HERE
Contact Forms
Most people will need some type of contact form for their website. If you have one already, great! Most likely you can easily embed it to your page. If you do not have a contact form, no worries.
Creating contact forms doesn’t need to be complicated. Simply drag a form widget to your page from the widget panel and use the controls to create a beautiful and responsive form on your website. You’ll be able to view your form submissions right from your admin dashboard and you can also set up custom email notifications and confirmation messages if needed.
By default, the form has the basics set up for you. The default actions areas follows: A visitor will submit the form > The form and its answers will be stored in your dashboard > the club admin will also get an email with all of the form’s answers. However, the form widget is extremely powerful and can be customized however you like. We will be going over the very basics in this article:
Locate / Add a’Form’ Widget
If you are creating a page and want to add a section with a Contact Form, then you will first have to locate the Form Widget, which is found when you are editing your page through Elementor.
- If you have not yet opened the page you would like to add your Form to, go ahead and Edit the page by clicking on “Edit with Elementor”
2. On the next page, scroll down the widget panel until you see the category ‘PRO‘ – click the arrow to expand
3. Drag the ‘Forms’ widget into the section and release. By default, the basic three fields will be added; Name, Email, Message/Send.
Customize the Form
Click on the widget handle to pull up the edit screen in the left panel.
When you first edit your form, the left panel will have seven sections. There may be more or less section based on the actions you select after a visitor submits a form. Each of these sections will be the way you customize your Form. For now, we are going to discuss the default settings sections. Feel free to click on one of the bullet points below to jump to the section:
- Form Fields
- Submit Button
- Actions After Submit
- Collect Submissions
- Multi-Step Forms
- Additional Options
Don’t forget. When finish editing, select Update/Publish at the bottom bar in the Left Panel to save. 
Setting Up Your Contact Form Fields
There are tons of fields your can add to your form. Here we will go over the basics. If you want to learn more about an individual field, Elementor has some great articles on each step. CLICK HERE to be directed to Elementor’s How-To-Guide.
Click on the widget handle to pull up the edit screen in the left panel.
Form Name
Name your form. If you have multiple forms on your website, this is helpful to distinguish which form a visitor is submitting from.
Fields
Here is where you will see all the fields that will be on your form. To find out more about Form Fields, CLICK HERE
Input Size
Use the drop down to change the size of the field for your visitors. By default, its set on small
Label
The name of the field, displayed on the form and on the email you receive from the user
Required Mark
Toggle on or off if you want to show or hide the red asterisk for required fields
Adding Fields to the Contact Form
The form widget allows you you add and manage each of the form fields that will be included in the form.
- First you want to hover and click on the widget handle to pull up the edit screen in the left panel.
- From the left panel click the triangle next to ‘Form Fields‘ to expand.
- To add a field to your form, click ‘Add Item’. This will create a new item and by default it will be a text field.
As for the field options, fields will have different editing options depending on the type. For instance for the File Upload type field, you will give the option to allow different file sizes, etc. Below is generally what you will see.
Content Tab
- Type – Choose the type of field you want. CLICK HERE to see all the different types.
- Label – The name of the field, displayed on the form and on the email you receive from the user.
- Placeholder – This is what shows in the form field when a user hasn’t entered any data. It’s helpful to set the placeholder text as an example of what information you want them to enter.
- Required – Toggle on and off to set the field as a Required or not.
- Column Width – Lets you set the width of the field. If you want a form with two fields in one row – set each field to 50%.
Advanced Tab
This is for advanced users. Most people will not need to touch these options in this tab. But, here are the things you will see:
- Default Value — This is the default value of the field and is different from the placeholder. This is an optional setting used when some kind of value is set by default if the user doesn’t add their own. For example, a minimum value or order in a form.
- ID — The field ID is used to save that field’s data. You usually don’t need to modify this but it has to be unique.
- Shortcode — The shortcode can be used to retrieve the field anywhere on your page. Generally, you don’t need to use this.
There are multiple different field types. Below is a short description of each type.
- Text – A simple text field. i.e. Name
- Email – An email type. Includes validation for email
- Text Area – A text area type. You can set the number of rows
- URL – A website URL field
- Tel – A telephone number type
- Radio – A radio type. Single choice. You can slide the Inline List for a horizontal style.
- Select – A select type. Dropdown list of options. Can set to multiple selection.
- Checkbox – A checkbox type. Check one or more options. You can slide the Inline List for a horizontal style.
- Acceptance – Add a terms checkbox for the user to accept
- Number – A number type
- Date – Add a date picker field
- Time – Add a time picker field
- File Upload – Allow your users to upload files
- Password – Add a password field
- HTML – Add an HTML field
- Hidden – Add a hidden field. Hidden to the user, but visible to the Admin
- reCAPTCHA – Add a reCAPTCHA. reCAPTCHA verifies the user is not a robot
- Honeypot – Adds a Honeypot to your form. A honeypot is a hidden field designed as a decoy for spambots that are filling out forms. Humans won’t see the field, so they won’t fill it out. Because a bot cannot tell that the field is hidden, it will fill it out. If a honeypot field is not empty upon submission, the form is obviously a bot-filled spam submission and will be automatically rejected.
Customizing your Submit Button
This section outlines the Form ‘Button’ options. There are two types of buttons:
- Step Button – includes next/previous buttons. This is used if your form has multi-steps.
- Submit Button – used when a visitor has completed the form
- First you want to hover and click on the widget handle to pull up the edit screen in the left panel.
- From the left panel click the triangle next to ‘Buttons‘ to expand.
Buttons (layout)
- Size – Set the size of the Submit Button
- Column Width – Set the width for the button
- Alignment – Set the alignment
Step Buttons
Your form will need to have multi-steps to access this button.
- Next: Enter the text you wish to be displayed
- Previous: Enter the text you wish to be displayed
Submit Button
- Submit: Choose the text displayed on the Submit Button
- Icon – Add an icon from the Font Awesome icon list or upload a custom SVG
Button ID
- Button ID: Assign an ID for your button by entering a value in the field
Actions After Submit
A common question from first-time form designers is, “ I’ve set up my Elementor form, but nothing happens when it gets submitted. Why?”
The answer is usually, “ You haven’t yet set up the “After Submit” Actions.”
Once a form is submitted, you’ll want one or more actions to take place, and each of those actions requires a small amount of setup. In this article, we will go over how to add some common actions that will be performed after a visitor submits the form.
If you are not familiar with actions, our recommendation is to leave the default actions as is. By default, the form will collect the submissions and Email a designated person the submission.
Please note: Some actions are not available with GotSport Club Websites
- First you want to hover and click on the widget handle to pull up the edit screen in the left panel.
- From the left panel click the triangle next to ‘Actions After Submit‘ to expand.
- Add new actions by clicking inside the Add Action field. This will bring up a list of available actions to choose from.
The list of available Form Actions currently includes: Email, Email2, Mailchimp, Redirect, Webhook, Drip, ActiveCampaign, GetResponse, and Convertkit, MailerLite, Slack, Discord, and Popup*.
*Currently not available with the GotSport’s Club Websites.
Collect Your Submissions
Once a form is submitted, you will want to know where it goes. If one of your ‘Actions After Submit’ is ‘Collect Submissions’, you will see a dropdown that will take you where all your form submissions will go.
There are two ways of getting to the Submissions area on your club website:
Get to all submissions via Widget Edit Screen
From the widget’s edit screen > Click on ‘Collect Submissions‘ to expand the options > Click on Submissions
Get to all submissions via Admin Dashboard
On the left panel of your dashboard > Select Elementor > Click on Submissions
Please note, depending on the type of form you setup for visitors, it could take-up a lot of storage on your site. It might be a good idea to respond to the submissions and either delete or move them to a 3rd party storage so it does not slow down your club website.
Setting Up The Email For Your Form Submissions
Once a form is submitted, you will want to know where it is emailed. In this section, we will go over some available options:
- First you want to hover and click on the widget handle to pull up the edit screen in the left panel.
- From the left panel click the triangle next to ‘Email‘ to expand.
To
The email address to who you want the form submissions to be sent to. The form can be sent to multiple email addresses. Enter email addresses separated by commas. Ensure you whitelist the email address so you receive all your submissions!
Subject
The subject of the sent email with the submission
Message
Here, you can set what fields that are sent from your contact form. By default, it will send an email with all fields and their answers. If you only want some fields displayed in the email you receive, then you can use the field’s short-codes
From Email
The source email address that sends the email. This must match your domain name. (Example noreply@yourdomain.com).
From Name
The name of the person sending the form.
Reply-to
This field is the email address the reply goes to when you click “reply” in your email client. By default, this is the website’s admin email, but you might want to change this. Click in the dropdown box and set it to the “Email field.”
CC
Want anyone in the CC of the email? Enter their email address here, send to multiple email addresses (separated by commas).
BCC
Need to send to a BCC? Enter their email address here, send to multiple email addresses (separated by commas).
Next, you’ll see there’s a meta box field that contains metadata, which you can set to be sent with the form submission. You don’t usually need to modify or edit this.
Finally, there’s the “Send as” option. The send option allows you to select whether to send the submitted entry as plain text or HTML (defaults to HTML). Again you don’t usually need to change this.
Multi-Step Forms
Multi-Step Forms allow you to create forms that have multiple steps, such that the user fills out a few fields, clicks Next, fills out a few more, clicks Next or Previous, etc. until the last step is completed, at which time the form can be submitted.
- First you want to hover and click on the widget handle to pull up the edit screen in the left panel.
- You want to make sure you have Steps in your form by inserting step fields in your form. From the left panel click the triangle next to ‘Form Fields‘ to expand.
- Insert a field with the type ‘Step’
- You can drag your step field between the other fields you want to separate.
- Click Update/Publish on the bottom when you are done
Example of what visitors will see on the 2nd step of the form
You can also do some basic styling for your steps by clicking the triangle next to ‘Steps Settings‘ to expand. 
If you want to change colors and the look of your steps / form, click on the ‘Style‘ Tab and scroll down to ‘Steps‘ 
Setting Contact Form Messaging
Modifying form messages allows for a more personalized feedback process to the end-user rather than sounding like a boring robot.
- First you want to hover and click on the widget handle to pull up the edit screen in the left panel.
- From the left panel click the triangle next to ‘Additional Options‘ to expand.
- Toggle Custom Messages On.
There are four different messages you can edit:
Success Message
Displays to an end-user once they have submitted the form and filled in correctly (e.g. Your email was successfully sent and one of reps will get back to as soon as possible).
Error Message
Display to an end-user when an unknown error has occurred with submitting the form.
Required Message
Displays when a required form field hasn’t been filled in when the form is submitted.
Invalid Message
Displays to an end-user when something within the form submission is incorrect and can’t be sent.
By being able to edit the messages, you can make your website sound like you or if you run a corporate site, you can be more business-like.
The best thing is as they are entirely editable, you can do what you want!