Droip provides a dedicated WordPress dashboard to manage form data efficiently. You can easily access and view all the forms you have created using the Form Block element in Droip. Additionally, you can export and analyze the data collected through these forms.

Accessing Form Data

Form data

To access your form data, follow these steps:

  1. Go to your WordPress Dashboard.
  2. Find the Droip menu.
  3. Select Form Data.

Form List

In the Form Data section, you can view all the forms you have created using the Form Block element in Droip.

For each form, click on the three-dot menu to access the following options:

  1. Open Form Data: View the collected data for the selected form in a separate dashboard. Filter, sort, and perform various actions on the data.
  2. Export as .CSV: Download the form data for the selected form as a CSV (Comma-Separated Values) file for sharing or further analysis.

Filter Form Entries

Droip provides advanced filtering options for form entries in the WordPress dashboard. It allows users to create custom filters based on specific form fields such as Name, Phone, Email, message, etc., and then further refine their search results by applying specific conditions to find the exact information they are looking for.

Create New Filter

To create a new custom filter, click on the Filter > Add New Filter button.

Add new filter in Droip form

Now, you can select specific form fields and refine your search results by applying specific conditions. You can create custom search filters on the following fields:

Add new form field

Here are the following conditions that you apply to the form fields in Filter: 

Edit or Delete a Filter

Edit or delete a form filter

To delete a custom filter, click on the horizontal 3 dots menu beside the filter. Here, you will get the option to edit or delete the specific filter.

Sort Form Entries

Sort form entries

You can also apply custom sorting conditions to form fields to filter and sort your form entries effectively. Here are the available sorting conditions:

Perform Bulk Actions

Perform bulk actions

Droip allows you to select multiple form entries and perform bulk actions like deleting or exporting them. This feature is beneficial for managing large amounts of data.

Droip form elements

A web form is an HTML form that lets users enter their information. There’s no “one size fits all” when it comes to web forms. Depending on your business needs and the type of user data you want to collect, you can craft any web forms that fit your needs with Droip. 

How to Add a Form 

How to add a form

To add a Form to your page, follow these simple steps:

  1. Open the Elements Panel from the right sidebar.
  2. Navigate to Elements > Form Element.
  3. Drag and drop the Form Block element onto your canvas.

Form Block  

The Form Block comes with a set of default form elements, including:

Elements of a Web Form 

Web forms can include various form elements to capture different types of data. For example, a web form might have input boxes for a username and password, along with a submit button labeled “Login.”

Droip provides an array of form elements to create functional Web Forms:

Label

The Label element is used to describe the purpose of a form field, providing clear guidance to users.

Input

The Input field is perfect for collecting single-line data, such as name, email, phone, etc.

Textarea

With the Text Area field, visitors can input multi-line data, like paragraphs or comments.

Selector

The Selector offers users a list of different options to choose from, providing a dropdown-like experience.

Checkbox

The Checkbox field allows users to select one or multiple options from a list.

Radio Button

Use the Radio Button field when users need to choose only one option from multiple choices.

Form Button

No web form is complete without a Form Button! This special button triggers the form submission.

reCAPTCHA

To prevent spam through forms, reCAPTCHA, a Google service, can be added for enhanced security.

File Upload

The File Upload field allows site visitors to attach files to their form submissions.

📝 Note: The Form Block provides options for adding and deleting various form elements such as text inputs, checkboxes, radio buttons, dropdown menus, etc. within the block itself.

Form Settings 

Once you have added the necessary form elements, it’s time to configure your form to suit your specific requirements.

Form Settings – General

General form settings

Name: Give your form a name to identify it easily. 

Type: Select either None or Custom to handle form submissions.

Method: Choose between the Get and Post methods for sending form data to the server.

After Submit: Select the action to take after users submit the form.

Form Settings – Advanced

Advanced form settings

Email Notification: Enable to receive Email Notifications on form responses. 

Action URL: The Action URL is where the data gets sent. If this Action URL isn’t provided, the data will be sent to the URL of the page containing the form — the current page.

Max Entry From an IP: Limit the number of submission entries from an IP address. Set the maximum number of allowed entries in the input field.

Set a Response Limit: Place a limit on the number of responses the form receives. Set the maximum number of responses in the input field.

Input Field Settings

Input field settings

Customize the appearance and functionality of Input fields from the Input Field Settings which you can access by clicking on the ellipsis icon.

Type: Select the input field type.

Name: Give your Input element a name for identification.

Placeholder: Provide a hint for users to fill in the actual text in empty input fields.

Field: Set the input field as required to fill in by checking the Required? box.

Character Limit: Enable and set the maximum character limit for Text type inputs.

Date Format: Set the date format for Date type inputs.

Text Area Settings

Text area settings

Customize the appearance and functionality of Text Area fields from the Text Area Settings which you can access by clicking on the ellipsis icon.

Placeholder: Provide a hint for users on what to fill in the empty Text Area.

Field: Set the Text Area field as required to fill in by checking the Required? box.

Selector

Form selector

Add new options to your Selector from the Selector Options panel. You can access this by clicking on the settings icon on the inline editor.

Add New Options: Click on the plus icon to add a new option.

Then, if you click on any option’s ellipsis icon, you’ll find the following:

Selector Settings

Selector settings

Customize the appearance and functionality of the Selector from the Selector Settings which you can access by clicking on the ellipsis icon:

Name: Give your form element a name for identification.

Type: Check the Multiple select? box to allow multiple options to be selected.

Field: Set the Selector field as required to fill in by checking the Required? box.

Checkbox Input Settings

Inside the checkbox element, you’ll find the Checkbox Input element and the Text element.

You can customize this Checkbox Input element by selecting it and clicking on the ellipsis icon to open the Edit Checkbox panel.

Checkbox Input Settings

Name: Give your form element a name for identification.

State: Enable this to have the Checkbox option automatically selected by default.

Field: Set the Checkbox Input as required to fill in by checking the Required? box.

Radio Button

Radio button

Add new choices to your Radio element from the Radio Options panel. You can access this by clicking on the settings icon on the inline editor.

Add New Choices: Click on the plus icon to add a new choice.

Then, if you click on any choice’s ellipsis icon, you’ll find the following:

Option Settings

Option settings

As mentioned earlier, clicking on the Edit option will open the Option Settings where you’ll find the following fields:

Content: Set the content of your Choice from here.

Value: Define the value of your Choice.

Radio Button Settings

Radio button settings

Name: Give your form element a name for identification.

Field: Set the Radio Button as required to fill in by checking the Required? box.

Form Button Settings

Form Button Settings

After Submission: You can also select the action you want to take after users submit the form using the first dropdown under Submit Button Options.

reCAPTCHA Settings

reCAPTCHA Settings

Customize the appearance and functionality of the reCAPTCHA element from the reCAPTCHA Settings which you can access by clicking on the ellipsis icon:

Enable reCAPTCHA: Enable this option to use reCAPTCHA.

Version: Set your reCAPTCHA version from here.

reCAPTCHA Site Key: Enter the key for reCAPTCHA here to integrate it.

File Upload Settings

File Upload Settings of Droip form

Inside the File Upload element, you’ll find the File Input element, Button element, and Text element.

You can customize this File Input element by selecting it and clicking on the ellipsis icon to open the Custom Properties panel.

Name: Give your form element a name for identification. 

Success: Enable this option to display a success message if the file upload is successful.

Error: Enable this option to display an error message if the file upload fails.

Select File Types: From this dropdown, select which file types the user will be allowed to upload. 

Style Form Field Focus State

Style Form Field Focus State

Highlight the focused state of input fields when users click on them or use the keyboard to fill them in. To access the focused state:

  1. Select the input field.
  2. Go to the Style Panel on the right sidebar.
  3. Expand the Class & Sub-class field.
  4. Select Focus from the States.

Now, you can add a border, change the background color, and style as you wish. This styling will be visible when the input form field is in the focus state only.

Droip also provides a dedicated WordPress dashboard to manage your form data efficiently. To learn how to manage your form data in Droip, refer to Form Data documentation.