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
To add a Form to your page, follow these simple steps:
- Open the Elements Panel from the right sidebar.
- Navigate to Elements > Form Element.
- Drag and drop the Form Block element onto your canvas.
Form Block
The Form Block comes with a set of default form elements, including:
- Heading
- 3 input fields labeled as Name, Phone, and Email Address
- Text Area
- Submit Button
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
- Input
- Textarea
- Selector
- Checkbox
- Radio
- Form Button
- reCAPTCHA
- File Upload
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
Name: Give your form a name to identify it easily.
Type: Select either None or Custom to handle form submissions.
- None: Choose this option if you don’t want to store form submissions or send them externally. No data is stored, and no email notifications are sent. Ideal for interactive forms without data retention.
- Custom: This option integrates your form with external services like databases, CRMs, or email marketing tools. Configure the form to send data to your chosen service after submissions.
Method: Choose between the Get and Post methods for sending form data to the server.
- Get: Suitable for forms without sensitive information, such as search queries or contact forms. Data is part of the URL, visible to users, and limited to around 2 KB.
- Post: Recommended for forms with sensitive data like login credentials or payment information. Data is hidden from users and not accessible through the browser’s history, with a larger limit of around 64 MB.
After Submit: Select the action to take after users submit the form.
- None: No specific action after form submission.
- Show Notification: Display a notification upon form submission.
- Success: Show success notification for successful submissions.
- Fail: Show notification for failed submissions.
- Open Pop-up: Display a pop-up after form submission.
- Success: Select the pop-up to display after successful submission.
- Fail: Select the pop-up to display after an unsuccessful submission.
- Go to Page: Redirect users to another page of your site after form submission.
- Success: Select the page to redirect users after successful submission.
- Fail: Select the page to redirect users after an unsuccessful submission.
- External URL: Redirect users to a webpage of a different site upon form submission.
- Success: Enter the URL for successful submission redirection.
- Fail: Enter the URL for unsuccessful submission redirection.
Form Settings – Advanced
Email Notification: Enable to receive Email Notifications on form responses.
- Add email: Add the email address where you want to receive the email notification.
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
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.
- Enter Required: Define the required message, e.g., “The name field cannot be empty.”
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
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.
- Enter Required: Define the required message, e.g., “The name field cannot be empty.”
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:
- Set as Default: Click on this to set this option as your default value.
- Duplicate: Use this to make a copy of this option.
- Rename: Rename your option.
- Delete: Remove your option.
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.
- Enter Required: Define the required message, e.g., “The name field cannot be empty.”
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.
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.
- Enter Required: Define the required message, e.g., “The name field cannot be empty.”
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:
- Set as Default: Click on this to set this choice as the default value.
- Duplicate: Select this option to make a copy of this choice.
- Edit: Edit your choice using this option. Clicking on this will open the Option Settings.
- Delete: Remove your choice.
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
Name: Give your form element a name for identification.
Field: Set the Radio Button as required to fill in by checking the Required? box.
- Enter Required: Define the required message, e.g., “The name field cannot be empty.”
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
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
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.
- Success Message: Define the success message, e.g., “File was successfully uploaded.”
Error: Enable this option to display an error message if the file upload fails.
- Error Message: Define the error message, e.g., “File could not be uploaded.”
Select File Types: From this dropdown, select which file types the user will be allowed to upload.
- Default: Supports all
- Document: .doc, .pdf, .txt
- Image: .jpg, .png, .gif
- Video: .mp4, .mov
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:
- Select the input field.
- Go to the Style Panel on the right sidebar.
- Expand the Class & Sub-class field.
- 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.
