SA Forms User’s Guide SA Forms is a plugin that adds a new module to Divi so you can create and edit forms with the Divi

Builder.

In this guide we will cover:

1. Installation

2. Settings

3. Form Elements

4. Creating a New Form

5. Database

6. More Information

1. Installation

To install, navigate to Plugins > Add New in your WordPress dashboard. Click Upload Plugin. Next click

Choose File, navigate to the folder of your downloaded plugin, select the plugin, and click Open. Click

Install Now.

Once the plugin installs you can then activate it. Click Activate Plugin and wait for activation to

complete.

2. Settings

Settings are found in the dashboard menu. Go to SAForms > Settings. Here you can enter your Google

reCAPTCHA keys and enable STMP. More on this later.

3. Form Elements The elements used to build the form appear on the right of the form creation screen. Here’s a closer

look at each of the form elements.

Autocomplete - guesses the words for the user,

completing the words as the user types.

Button – adds a button to the form.

Checkbox Group – adds a group of checkboxes.

Date Field – adds a date-picker so users can choose

a date from a calendar.

File Upload – adds a field so users can upload files.

Header – adds header text to the form.

Hidden Input – adds a field to store data. It can be

used to perform a calculation, send information

such as the current post, use it against bots that add

info to hidden input, and lots more.

Paragraph – adds a field where users can enter text.

Number – adds a field where users can enter a

number.

Radio Group – creates a group of radio buttons.

Select – provides a dropdown where the user can

select choices.

Text Feld – adds a field where users can enter text.

Text Area – adds a larger field where users can

enter text.

Ratings – adds a star ratings system to the form

where users can choose a ratings value from 1 to 5

in increments of 1.

Slider – adds a slider that allows users to choose a

value based on the minimum, maximum, and the

increments that you choose.

Field Settings Here is a look at the types of settings the fields contain. Most of these settings are found in most of the

fields. Some are only found in a few.

Required – makes the field required.

Label – provide the text the field will use as its label.

Type – determines the kind of data the field can contain or the type of header the header field will have.

Value – enter a default value for the field to contain.

Max Length – the maximum number of digits the user can enter.

Min, Max, Step – enter the minimum and maximum values, and the step value. Use a step value of 1 if

you want users to be able to enter whole numbers: 1, 2, 3, etc.

Content – users can add their content here.

Help Text – creates a tool-tip that pops up when the user clicks.

Placeholder – enter placeholder text that will display until the user types. This works great to provide

the user an example.

Toggle – adds toggles to the option fields so you can select which options are checked by default.

Inline – displays radio button inline.

Class – shows the CSS class for the field.

Name – shows the name of the field.

Access – choose which user-roles have access to the form.

Multiple Files – allows users to upload more than one file.

Enable Other Options – allows users to add their own options.

Allow Multiple Selections – allow the user to select more than one choice at the same time.

Options – adds choices that the user can make. Select the options in order to make them checked by

default.

Group – allows you to group the options together.

Rows – determine the number of rows that will display by default. The user can drag the corner to

increase the size of the box manually.

Field Icon – choose the icon the field will display.

Width – choose if the field will take full or half the width of the form.

Logic – add conditional logic to the field.

4. Creating a New Form

A new module is added to the Divi Builder called SA Forms. Place this module within your Divi layout.

To create your form, first click the three lines on the left of the module. This will open the form creation

screen.

Form Creation

Click START NEW.

The available fields are on the right. Click on or drag the fields you want on your form to the empty area.

Some of the fields will allow you to place them as full or half width. You can place two half-width fields

on the same line.

Editing Fields

Highlighting the fields reveals options to the right of the field to edit, copy, or delete the field.

Drag and drop the fields if you want to move them from one location to another on the form.

Select the Edit icon to open the field’s options. In the Header field above you can change the name of

the field, the type of field, add a class, choose who has access, the width, and add logic.

Adding Logic

Each field has an option to add logic. Logic can determine when a field is displayed or add conditions to

a field. The logic options include Field, Logic (includes 6 choices) and value.

Click Add to add more logic. The new logic includes Boolean values of AND and OR.

Adding a Step

Step adds a new page to your form. To add one, simply click + Step. This opens a new canvas where you

can create the next page. Add your own name for each step, delete, or add as many steps as you want.

Form Settings

Click NEXT from the Form Creation screen to see the form settings. Here you can change the form’s

name, add a refresh button, choose your Captcha, choose where the form submissions save, choose the

form’s theme and color, enable pop up, change the button text and position, change the submit button

text, reset button text, and the success message.

Mail Settings

The Mail Settings tab is used to create a custom message with the data the user enters into the form.

This is accomplished by dragging the tags to the fields to where you want them. The available fields will

appear above the form. These are the fields you’ve created. It includes two tabs: Admin Mail and User

Mail.

Creating an Email When creating an email you can have it send a copy to your email account, the sender, and store them

on your server. If you store them they will appear in the database tab in the dashboard menu.

1. Create an Email Field

You will need to create an email field. In the Form Creation area add a Text field and select email as its

Type. It’s a good idea to label it Email so it will be understood by the user.

2. Enable Database Saving

In the Form Settings tab enable Store Submits under the section labeled SAVE.

3. Create the Admin Mail

Add the email address where you want to receive the message in the TO field. Add the email address

that you want it to display as being from your company in the FROM field. Add the subject and message.

You can use fields in the message if you want. It is best to label them so the user understands what they

are.

4. Create the User Mail

This tab will send a copy of the email back to the sender. This is optional. In order to use it, click ENABLE

USER MAIL. Drag the email field to the TO field. This is the email that the user entered as their email

when they complete the form. The FROM field is the email that you want to use to show that it’s from

your website. Drag any of the fields that you want to display into the message area.

The form displays the fields as they were labeled. In this example all three are required fields. Once they

are filled out and the user clicks Send, a message will be sent to the email you set up as the receiving

email, a copy will be sent to the user, and it will appear in the database.

CAPTCHA

CAPTCHA is a great way to reduce spam. In the FORM SETTINGS tab you’ll see a section called SAFETY.

Here you have options to disable CAPTCHA, use built-in CAPTCHA, or use Google reCAPTCHA. Simply

toggle the feature you want to use for your form and update. Disable CAPTCHA is selected by default.

The Captcha only appears on the form that the users see, so you won’t see it in the form creation

screen.

Built-In CAPTCHA

Selecting Built-In CAPTCHA adds a field to the bottom of the form. It provides the Captcha with a

message showing where to enter the code and clickable text if the user wants a new code.

Google reCAPTCHA

To use Google reCAPTCHA you’ll need to enable it in the settings in the dashboard menu. Go to SAForms

> Settings. Here you can enter your Google reCAPTCHA site and secret keys. Click the link to get your

reCAPTCHA keys.

You’ll need to register the reCAPTCHA and choose the type of reCAPTCHA you want. Your choices

include:

v2 – “I am not a robot” checkbox

invisible – validates in the background

Android – uses an Android app

Once you’ve registered the reCAPTCHA it will give you the keys to enter into the settings screen.

Your Google reCAPTCHA will then be added to the bottom of the form.

Popups

If you want the form to appear as a popup you’ll need to enable this feature in the FORM SETTINGS tab.

Toggle Enable Pop Up under the POP UP section. Here you can add the button text and choose the

button location (choose between Left, Right, and Center).

The form will now appear as a popup when the user clicks on the button. In this example the button is

labeled Subscribe. The form can be closed by clicking the x in the upper right corner above the form.

Complete

Once your form is complete, click COMPLETE. Click UPDATE & CLOSE.

Your form is now ready to use. You can now edit, clone, delete, or move the module anywhere you want

within your Divi layout.

5. Database When users submit an email, you can have that email stored in the database.

In the FORM SETTINGS tab, go to the section labeled SAVE and enable Store Submits.

In the dashboard menu, go to SAForms > Database. Here you’ll see all of the emails that have been

submitted to each of the forms. Select the form you want to see the emails for in the dropdown box at

the top of the screen. You’ll see each of the fields for that form with the results. It includes the IP and

the sender and the time the email was submitted.

6. More Information For more information visit sawebsolution.de