WordPress Forms

GrandWP Forms Is Your Best WordPress Solution

Lite/Free version Installation

Forms plugin includes 2 versions Free/Lite and PRO/Paid. Both versions have their own way for installation, deactivation and update.
In order to install Lite/Free version, follow the instruction below:

  1. 1

    Go to Dashboard of your WordPress website > select Plugins and click ‘Add New’

  2. 2

    Search for “GrandWP Forms”

  3. 3

    After detecting the desired plugin, click “Install Now”

  4. 4

    After the installation is completed click “Activate Plugin”

  5. 5

    The plugin appears in the “Dashboard” sidebar menu. Now the plugin is ready to be used

Please, note that in the case of possible updates you will get a notification in your WordPress website Dashboard (Plugins section)

Use this method of installation in the case, if you wish to install PRO/Paid version.
If you already have been using Free/Lite version of plugin, you will need to deactivate and delete it and then install zip file with Pro version. (By deactivation, you are not going to lose any data. If you are willing to erase whole data, then uninstall the plugin)

PRO/Paid version Installation

If you already have been using plugin Free/Lite version, deactivate and delete it and then install zip file with Pro version.
(By deactivation, you are not going to lose any data. If you are willing to erase whole data, then uninstall the plugin).

  1. 1

    Go to Dashboard> Plugins and click “Deactivate” on the plugin you wish to update.

  2. 2

    After plugin is deactivated, click “Delete.” No data will be lost.
    After your plugin is deleted, go to Plugins>Add New.

  3. 3

    “Upload” file from the top of the page.

  4. 4

    Click “Choose File” and choose “zip” file you have downloaded from your Grandwp.com account Click “Install Now”

  5. 5

    After installation is finished,“Activate” the plugin. The plugin is ready to be used.
    Use this method for any extension you want to update (or install for the first time).

Note that the same actions need to be done to UPGRADE existing PRO/Paid version to latest available.

Plugin install/update via FTP

If the standard upload methods of the plugin installation are not working for you, try to install via FTP.

  1. 1

    Find a FTP client

  2. 2

    Download the ZIP file from WordPress.org

  3. 3

    Extract ZIP file directory to your PC

  4. 4

    Upload the newly extracted directory to /wp-content/plugins/

  5. 5

    The plugin is ready to be activated from the website dashboard.
    After the activation is completed, plugin appears in the “Dashboard” sidebar menu.

Creating Forms

After the plugin is successfully activated, go to website Dashboard and detect the GrandWP Form plugin.
Click on GrandWP Forms submenu to have an access to available forms list.

  1. 1

    To create your first form, click on “New Form”

  2. 2

    You will be redirected to a newly created Form page where you can add fields, edit fields and adjust current form settings

  3. 3

    To start, click on “Add New Field”. A block with available field types appears on the right side of the page

Plugin offers ready-made common fields.

After choosing one of them, a new block appears on the left section of the page.
Block allows duplicating, deleting and adjusting settings of the particular field.

Text

Use this field to create text fields, where various information can be filled in depending on your website type.
Click on gear icon to access to the whole setting list which are:

  1. 1

    Label
    This field can be used as a title of text box

  2. 2

    Label Position
    Label position can be easily adjusted. You can choose the following values:
    If position is set to DEFAULT, it takes the value from the “Form settings> Form Display Settings”.
    Set position to LEFT/RIGHT/ABOVE to display the label on the left/right/ sides or above the box
    No label is displayed if position is set to HIDDEN

  3. 3

    Default Value
    Is the value set to the field by defaul

  4. 4

    Mask on
    Use this option, if you have a character pattern to be followed by users (e.g.license key)

  5. 5

    Placeholder
    Use placeholder to give a hint to users what value to type in the field

  6. 6

    Element ClassUse the pre-made Element Class for custom CSS and JavaScript

  7. 7

    Container Class
    Set a certain class to field container

  8. 8

    Help Text
    This field can be used to give an info about what the field contend will be used for

  9. 9

    Limit Input to
    Use this option to set a count limit to characters used in the field.
    If values is set to 0, no limitations are applied.

  10. 10

    Text While Typing
    This field shows how many characters/letters left to type (default value can be customized)

  11. 11

    Required
    Turn this field on to give the user no option to skip the field

  12. 12

    Readonly
    Option allows only viewing the filed, no changes can be done by user

Textarea

Use this field to give users an option to add additional information to the submitted form.
In case, if you are using plugin to create a reservation form,
this field could be created to give additional remarks about the reservation preferences or special needs or comments
(e.g “If, available, would like to have a table near the window”)

  1. 1

    Label
    This field can be used as a title of text box

  2. 2

    Label Position
    Label position can be easily adjusted. You can choose the following values:
    If position is set to DEFAULT, it takes the value from the “Form settings> Form Display Settings”.
    Set position to LEFT/RIGHT/ABOVE to display the label on the left/right/ sides or above the box
    No label is displayed if position is set to HIDDEN

  3. 3

    Default Value
    Is the value set to the field by default

  4. 4

    Placeholder
    Use placeholder to give a hint to users what value to type in the field

  5. 5

    Element Class
    Use the pre-made Element Class for custom CSS and JavaScript

  6. 6

    Container Class
    Set a certain class to field container

  7. 7

    Height in px
    Set text aria height in pixels (100px is set by default)

  8. 8

    Help Text
    This field can be used to give an info about what the field content will be used for

  9. 9

    Required
    Turn this field on to give the user no option to skip the field

  10. 10

    Readonly
    Option allows only viewing the filed, no changes can be done by user

  11. 11

    Resizable
    If option is on, textarea field can be resized

  12. 12

    Limit Input to
    Use this option to set a count limit to characters used in the field. If values is set to 0, no limitations are applied

  13. 13

    Text While Typing
    This field shows how many characters/letters left to type (default value can be customized)

Selectbox

Use Selectbox to give users an option to choose among offered services.
Note that both single and multiple selection is available for this field type.

  1. 1

    Label
    This field can be used as a title of text box

  2. 2

    Label Position
    Label position can be easily adjusted. You can choose the following values:
    If position is set to DEFAULT, it takes the value from the “Form settings> Form Display Settings”.
    Set position to LEFT/RIGHT/ABOVE to display the label on the left/right/ sides or above the box
    No label is displayed if position is set to HIDDEN

  3. 3

    Element Class
    Use the pre-made Element Class for custom CSS and JavaScript

  4. 4

    Container Class
    Set a certain class to field container

  5. 5

    Help Text
    This field can be used to give an info about what the field content will be used for

  6. 6

    Dropdown Type
    Single Selection
    Allows selecting only one option among offered ones
    Multiselection
    Allows multi selection among offered options

  7. 7

    Import Options
    Click on the “Import Options” and follow the given pattern to add many options at once. The values set can be different

  8. 8

    Add Option
    Single option can be added using this button

  9. 9

    Search On
    Turn this option of to allow the users to search from the dropdown options.
    The search box will appear in the dropdown above the options in the Front-End

  10. 10

    Required
    Turn this field on to give the user no option to skip the field

Map

Use Map option to display the exact location of your business. This helps users easily find location.

  1. 1

    Label
    This field can be used as a title of text box

  2. 2

    Label Position
    Label position can be easily adjusted. You can choose the following values:
    If position is set to DEFAULT, it takes the value from the “Form settings> Form Display Settings”.
    Set position to LEFT/RIGHT/ABOVE to display the label on the left/right/ sides or above the box
    No label is displayed if position is set to HIDDEN

  3. 3

    Map Center LatLng
    Set the Map center using the given pattern by adding the location Latitude and Longitude

  4. 4

    Map Draggable
    Use this option to make the Map draggable

  5. 5

    Element Class
    Use the pre-made Element Class for custom CSS and JavaScript

  6. 6

    Container Class
    Set a certain class to field container

  7. 7

    Help Text
    This field can be used to give an info about what the field content will be used for

Imageselect

Use this field to allow users choosing from the services provided. This option is represented by images.


  1. 1

    Label
    This field can be used as a title of text box

  2. 2

    Label Position
    Label position can be easily adjusted. You can choose the following values:
    If position is set to DEFAULT, it takes the value from the “Form settings> Form Display Settings”.
    Set position to LEFT/RIGHT/ABOVE to display the label on the left/right/ sides or above the box
    No label is displayed if position is set to HIDDEN

  3. 3

    Add Option
    Add the images by clicking on “Add Option”. WordPress Media Library will be opened to choose the images from

  4. 4

    Checkbox Alignment
    Choose Inline option to display the images in one line
    Choose New Line to display the images from the new line

  5. 5

    Element Class
    Use the pre-made Element Class for custom CSS and JavaScript

  6. 6

    Container Class
    Set a certain class to field container

  7. 7

    Help Text
    This field can be used to give an info about what the field content will be used for

  8. 8

    Required
    Turn this field on to give the user no option to skip the field

  9. 9

    Limit selected options number to
    Set the limit to the options that can be selected

Phone

Use Phone field to request phone number from user, who submits the form.


  1. 1

    Label
    This field can be used as a title of text box

  2. 2

    Label Position
    Label position can be easily adjusted. You can choose the following values:
    If position is set to DEFAULT, it takes the value from the “Form settings> Form Display Settings”.
    Set position to LEFT/RIGHT/ABOVE to display the label on the left/right/ sides or above the box
    No label is displayed if position is set to HIDDEN

  3. 3

    Placeholder
    Use placeholder to give a hint to users what value to type in the field

  4. 4

    Mask on
    Use this option, if you have a character pattern to be followed by users

  5. 5

    Element Class
    Use the pre-made Element Class for custom CSS and JavaScript

  6. 6

    Container Class
    Set a certain class to field container

  7. 7

    Help Text
    This field can be used to give an info about what the field content will be used for

  8. 8

    Required
    Turn this field on to give the user no option to skip the field

  9. 9

    Readonly
    Option allows only viewing the filed, no changes can be done by user

Email

Use Email field to collect email addresses from user, who submit the form.


  1. 1

    Label
    This field can be used as a title of text box

  2. 2

    Label Position
    Label position can be easily adjusted. You can choose the following values:
    If position is set to DEFAULT, it takes the value from the “Form settings> Form Display Settings”.
    Set position to LEFT/RIGHT/ABOVE to display the label on the left/right/ sides or above the box
    No label is displayed if position is set to HIDDEN

  3. 3

    Default Value
    Is the value set to the field by defaul

  4. 4

    Placeholder
    Use placeholder to give a hint to users what value to type in the field

  5. 5

    Element Class
    Use the pre-made Element Class for custom CSS and JavaScript

  6. 6

    Container Class
    Set a certain class to field container

  7. 7

    Help Text
    This field can be used to give an info about what the field content will be used for

  8. 8

    Required
    Turn this field on to give the user no option to skip the field

  9. 9

    Readonly
    Option allows only viewing the filed, no changes can be done by user

Radio

Use Radio field to give an option to choose one service among offered variants.
Offered options are displayed as a Radio buttons.
Radio displays only one service selected from offered ones.


  1. 1

    Label
    This field can be used as a title of text box

  2. 2

    Label Position
    Label position can be easily adjusted. You can choose the following values:
    If position is set to DEFAULT, it takes the value from the “Form settings> Form Display Settings”.
    Set position to LEFT/RIGHT/ABOVE to display the label on the left/right/ sides or above the box
    No label is displayed if position is set to HIDDEN

  3. 3

    Element Class
    Use the pre-made Element Class for custom CSS and JavaScript

  4. 4

    Container Class
    Set a certain class to field container

  5. 5

    Help Text
    This field can be used to give an info about what the field content will be used for

  6. 6

    Radio Alignment
    Choose Inline option to display services in one line
    Choose New Line to display services from the new line

  7. 7

    Import Options
    Click on the Import Options and follow the given pattern to add many options at once.
    The values set can be different

  8. 8

    Add Option
    Single option can be added using this button

Date

Use this field if you need a Date-related information to be collected from user, who submits the form.


  1. 1

    Label
    This field can be used as a title of text box

  2. 2

    Label Position
    Label position can be easily adjusted. You can choose the following values:
    If position is set to DEFAULT, it takes the value from the “Form settings> Form Display Settings”.
    Set position to LEFT/RIGHT/ABOVE to display the label on the left/right/ sides or above the box
    No label is displayed if position is set to HIDDEN

  3. 3

    Default Value
    Is the value set to the field by default

  4. 4

    Placeholder
    Use placeholder to give a hint to users what value to type in the field

  5. 5

    Min and Max
    After clicking on min date or max date a date-picker appears to set range of the dates the user can choose from

  6. 6

    Date Format
    Choose the date format you want to display in the Front-End

  7. 7

    Element Class
    Use the pre-made Element Class for custom CSS and JavaScript

  8. 8

    Container Class
    Set a certain class to field container

  9. 9

    Help Text
    This field can be used to give an info about what the field content will be used for

  10. 10

    Required
    Turn this field on to give the user no option to skip the field

Captcha

Use Captcha to verify user with a randomly generated six-character code before form is submitted.


  1. 1

    Label
    This field can be used as a title of text box

  2. 2

    Label Position
    Label position can be easily adjusted. You can choose the following values:
    If position is set to DEFAULT, it takes the value from the “Form settings> Form Display Settings”.
    Set position to LEFT/RIGHT/ABOVE to display the label on the left/right/ sides or above the box
    No label is displayed if position is set to HIDDEN

  3. 3

    Placeholder
    Use placeholder to give a hint to users what value to type in the field

  4. 4

    Help Text
    This field can be used to give an info about what the field content will be used for

  5. 5

    Element Class
    Use the pre-made Element Class for custom CSS and JavaScript

  6. 6

    Container Class
    Set a certain class to field container

HTML

With the help of this field, custom text, image or HTML code can be implemented.

  1. 1

    Label
    This field can be used as a title of text box

  2. 2

    Label Position
    Label position can be easily adjusted. You can choose the following values:
    If position is set to DEFAULT, it takes the value from the “Form settings> Form Display Settings”.
    Set position to LEFT/RIGHT/ABOVE to display the label on the left/right/ sides or above the box
    No label is displayed if position is set to HIDDEN

  3. 4

    Element Class
    Use the pre-made Element Class for custom CSS and JavaScript

  4. 5

    Container Class
    Set a certain class to field container

Address

Add Address field to collect user’s address-related info.


  1. 1

    Label
    This field can be used as a title of text box

  2. 2

    Label Position
    Label position can be easily adjusted. You can choose the following values:
    If position is set to DEFAULT, it takes the value from the “Form settings> Form Display Settings”.
    Set position to LEFT/RIGHT/ABOVE to display the label on the left/right/ sides or above the box
    No label is displayed if position is set to HIDDEN

  3. 3

    Search on
    Turn this option of to allow the users to search from the dropdown options. The search box will appear in the dropdown above the options in the Front-End
    The following address details can be added to the form:
    Country,State,City,Zip,Address Lines

  4. 4

    Countries List
    With this option you can filter the countries the user can select from

  5. 5

    Element Class
    Use the pre-made Element Class for custom CSS and JavaScript

  6. 6

    Container Class
    Set a certain class to field container

Number

Use this field if you need to collect number-related information (e.g. number of guests)

  1. 1

    Label
    This field can be used as a title of text box

  2. 2

    Label Position
    Label position can be easily adjusted. You can choose the following values:
    If position is set to DEFAULT, it takes the value from the “Form settings> Form Display Settings”.
    Set position to LEFT/RIGHT/ABOVE to display the label on the left/right/ sides or above the box
    No label is displayed if position is set to HIDDEN

  3. 3

    Default Value
    Is the value set to the field by default

  4. 4

    Min/Max Values
    Set a range of the min and max values the user can submit

  5. 5

    Number Type
    The plugin supports both Integer and Float number types

  6. 6

    Placeholder
    Use placeholder to give a hint to users what value to type in the field

  7. 7

    Element Class
    Use the pre-made Element Class for custom CSS and JavaScript

  8. 8

    Container Class
    Set a certain class to field container

  9. 9

    Help Text
    This field can be used to give an info about what the field content will be used for

  10. 10

    Required
    Turn this field on to give the user no option to skip the field

  11. 11

    Readonly
    Option allows only viewing the filed, no changes can be done by user

Checkbox

Use Checkbox field to offer an option to select multiple services from the offered.
This field is displayed as a checkbox in Back-End.

  1. 1

    Label
    This field can be used as a title of text box

  2. 2

    Label Position
    Label position can be easily adjusted. You can choose the following values:
    If position is set to DEFAULT, it takes the value from the “Form settings> Form Display Settings”.
    Set position to LEFT/RIGHT/ABOVE to display the label on the left/right/ sides or above the box
    No label is displayed if position is set to HIDDEN

  3. 3

    Element Class
    Use the pre-made Element Class for custom CSS and JavaScript

  4. 4

    Container Class
    Set a certain class to field container

  5. 5

    Help Text
    This field can be used to give an info about what the field content will be used for

  6. 6

    Required
    Turn this field on to give the user no option to skip the field

  7. 7

    Checkbox Alignment
    Choose Inline option to display services in one line
    Choose New Line to display services from the new line

  8. 8

    Import Options
    Click on the “Import Options” and follow the given pattern to add many options at once. The values set can be different

  9. 9

    Add Option
    Single option can be added using this button

  10. 10

    Limit selected options number to
    Set the limit to the options that can be selected

reCAPTCHA

Use reCAPTCHA to verify user with a randomly generated Google images before form is submitted.


  1. 1

    Label
    This field can be used as a title of text box

  2. 2

    Label Position
    Label position can be easily adjusted. You can choose the following values:
    If position is set to DEFAULT, it takes the value from the “Form settings> Form Display Settings”.
    Set position to LEFT/RIGHT/ABOVE to display the label on the left/right/ sides or above the box
    No label is displayed if position is set to HIDDEN

  3. 3

    reCAPTCHA Type
    Use placeholder to give a hint to users what value to type in the field

  4. 4

    ReCAPTCHA Style
    Choose the reCAPTCHA style that best suits to your website design from the two availableLight/Dark

  5. 5

    Help Text
    This field can be used to give an info about what the field content will be used for

  6. 6

    Element Class
    Use the pre-made Element Class for custom CSS and JavaScript

  7. 7

    Container Class
    Set a certain class to field container

Buttons

Without adding this button, form cannot be submitted.

  1. 1

    Label
    This field can be used as a title of text box

  2. 2

    Element Class
    Use the pre-made Element Class for custom CSS and JavaScript

  3. 3

    Container Class
    Set a certain class to field container

Password

  1. 1

    Label
    This field can be used as a title of text box

  2. 2

    Label Position
    Label position can be easily adjusted. You can choose the following values:
    If position is set to DEFAULT, it takes the value from the “Form settings> Form Display Settings”.
    Set position to LEFT/RIGHT/ABOVE to display the label on the left/right/ sides or above the box
    No label is displayed if position is set to HIDDEN

  3. 3

    Placeholder
    Use placeholder to give a hint to users what value to type in the field

  4. 4

    Limit Input to
    Use this option to set a count limit to characters used in the field. If values is set to 0, no limitations are applied

  5. 5

    Text While Typing
    This field shows how many characters/letters left to type (default value can be customized)

  6. 6

    Element Class
    Use the pre-made Element Class for custom CSS and JavaScript

  7. 7

    Container Class
    Set a certain class to field container

  8. 8

    Help Text
    This field can be used to give an info about what the field content will be used for

Upload

Use this field to allow users to upload fixed-type files.


  1. 1

    Label
    This field can be used as a title of text box

  2. 2

    Label Position
    Label position can be easily adjusted. You can choose the following values:
    If position is set to DEFAULT, it takes the value from the “Form settings> Form Display Settings”.
    Set position to LEFT/RIGHT/ABOVE to display the label on the left/right/ sides or above the box
    No label is displayed if position is set to HIDDEN

  3. 3

    Allowed File Types
    Choose what type of files are allowed to be uploaded to the form
    The plugin supports the following file types:
    .jpeg,.png,.docx,.pdf,.txt,.csv,.ppt
    Please, note that no custom file type can be added to this field

  4. 4

    Max Upload Size(mb)
    Set the Max Upload size in MB to be Uploaded to the form
    (Make sure the Max Upload file corresponds to the file size in website settings. Change max file upload size from php.ini file as well)

  5. 5

    Multiple Upload
    Turn this option on to allow users uploading multiple files to the form

  6. 6

    Element Class
    Use the pre-made Element Class for custom CSS and JavaScript

  7. 7

    Container Class
    Set a certain class to field container

  8. 8

    Help Text
    This field can be used to give an info about what the field content will be used for

Form Settings

Use Form Settings to adjust everything to your needs.


  1. 1

    Save Submissions to database
    If option is turned on, all submitted forms will be saved to database

  2. 2

    Email Users
    If option is turned on, user receives an email after form is submitted

  3. 3

    Email Admin
    If option is turned on, admin receives an email after form is submitted

Email Users

  1. 1

    From Name
    Name from which email will be sent

  2. 2

    From Email
    Email address from which email will be sent

  3. 3

    Mail Subject
    Set email subject which will be displayed in the sent email

  4. 4

    Mail Message
    Type email message you want to be displayed in the message
    Use this code in Mail Message to receive submissions for the mentioned email {formData}

Email Admin

  1. 1

    Admin Email
    Set admin email to receive submitted forms to

  2. 2

    Mail Subject
    Set email subject which will be displayed in sent email

  3. 3

    Mail Message
    Type main message you want to send

  4. 4

    Mail Message
    Use this code in Mail Message to receive submissions for mentioned email {formData}

–>

Action on Form Submit

  1. 1

    Action on Submit
    Set type of message you want to be displayed after form is submitted
    Following actions can be implemented after form is submitted:
    Success message
    Type success message you want users to see after form is submitted
    Redirect
    Set website URL to which user will be redirected after form is submitted
    Reset form
    Website page form is published on will be refreshed if “Reset form” is selected

  2. 2

    Hide Form on Submit
    Hide form after it is submitted

Form Notice and Error Messages

  1. 1

    Wrong Email Format
    Type message you want to be displayed if wrong email format is typed in

  2. 2

    Required Field Is Empty
    Type message you want to be displayed if required field is left empty

  3. 3

    Uploaded Size Exceeded
    Type message you want to be displayed if uploaded file size is exceeded

  4. 4

    Wrong File Format
    Type message you want to be displayed if a wrong file format is uploaded

Plugin Settings

  1. 1

    Regular reCAPTCHA
    Fill in the required keys to display reCAPTCHA in Front-End

  2. 2

    Google Map
    Google API key must be entered to display map in Front-End

  1. 1

    Invisible reCAPTCHA
    Fill in the required keys to display reCAPTCHA in Front-End

  2. 2

    Submissions/Forms Per Page
    Quantity of Submissions/Forms Per Page
    (Is set to 25 by default)

  1. 1

    Uninstall
    Use this option to remove all data on plugin uninstall