Two-column forms can significantly improve the layout and usability of your website forms, particularly on desktop and tablet devices. This guide will walk you through creating a two-column form using the robust Piotnet Forms plugin in conjunction with Elementor.
The Tools You’ll Need
- WordPress (self-hosted): The foundation of your website (wordpress.org, not wordpress.com).
- Page Builder Framework (Optional): A lightweight theme; any Elementor-compatible theme will work.
- Elementor (Free or Pro): Either version works; we won’t be using Pro-specific features.
- Piotnet Forms (Standalone): The *standalone* Piotnet Forms plugin (paid) is essential for this method.
The Form We’re Building
We’ll create a contact form with these fields, arranged in a two-column layout for the first four fields:
- Name (text)
- Last Name (honeypot)
- Email (email)
- Phone (tel)
- Product Choice (select)
- Message (textarea)
Installing and Activating Piotnet Forms
If you haven’t already, purchase, download, and install the *standalone* Piotnet Forms plugin. Go to Plugins > Add New > Upload Plugin, choose the .zip file, install, and activate. Ensure you activate your license key according to Piotnet Forms documentation.
Creating the Form in Elementor
Open the page where you want to add the form in the Elementor editor.
Add a New Section (Optional)
For visual separation, add a new section with a single column. You can customize the section’s background, padding, etc., as desired.
Add the First Field (Name)
Click the nine-dot icon (Widgets) and scroll to the “Piotnet Forms” section. Drag a “Field” widget into your section.
*Important: All fields in your form MUST share the same “Form ID.”* Choose a descriptive ID (e.g., “contact_form”) and enter it in the “Form ID” field.
- Field ID: `name` (Unique for each field)
- Type: Text
- Label: Name
- Placeholder: Name (optional)
- Required: On (if you want this field to be mandatory)
Add the Second Field (Email) – Creating the Two-Column Layout
Duplicate the *column* containing the “Name” field (hover over the column icon and click “Duplicate”). This creates a second “Name” field beside the first, establishing your two-column layout.
Edit the *second* field: Change the “Field ID” to `email`, the “Type” to “Email,” and update the label and placeholder to “Email.” Set “Required” to On.
Add the Third and Fourth Fields (Phone and Product Choice)
Duplicate the *entire section* containing the Name and Email fields. This creates a second row with two more fields.
In the *first* field of the *new* section, change:
- Field ID: `phone`
- Type: Tel
- Label: Phone
- Placeholder: Phone (optional)
- Required: On (or Off, as desired)
In the *second* field of the *new* section, change:
- Field ID: `product`
- Type: Select
- Label: Choose a Product
- Options: Enter your product options, one per line (e.g., “Product A”, “Product B”, “Product C”).
- Required: On (or Off)
Add the Message Field
Duplicate the *entire section* again. *Delete the second column* in this new section (right-click on the column icon and select “Delete”).
Edit the remaining field: Change “Field ID” to `message`, “Type” to “Textarea,” and update label/placeholder to “Message.” Set “Required” as desired.
Add a Submit Button
From the “Piotnet Forms” section, drag the “Submit” widget below the “Message” field.
Set the “Form ID” to the *same ID* you used for all other fields (e.g., “contact_form”). Customize the “Button Text” (e.g., “Send”).
Add a Honeypot Field (Spam Prevention)
Duplicate the “Message” field. Edit this duplicate:
- Field ID: `honeypot` (or similar)
- Type: Honeypot
- Label: Clear the label (leave it blank)
- Placeholder: Clear the placeholder.
- Required: Off
This hidden field helps filter out spam submissions.
Configuring Actions After Submit (Optional)
Select the “Submit” button. In the sidebar, click “Actions After Submit.” You can add actions like:
- Email: Send an email notification to yourself and/or the user. Use field shortcodes (e.g., `[field id=”email”]`) to include form data in the email.
- Submit Post: Create a new post or custom post type entry from the form submission.
- Redirect: Redirect the user to a thank-you page after submission.
- Webhook: Integrate with other services using webhooks.
Mobile Responsiveness
Piotnet Forms automatically handles mobile responsiveness. On smaller screens, the two-column layout will collapse into a single column, ensuring the form remains user-friendly.
Styling the Form (Optional)
You can use Elementor’s styling options to customize the appearance of your form fields and submit button. Select each field or the button and use the “Style” tab to adjust colors, fonts, spacing, etc.
Conclusion
Using Piotnet Forms with Elementor provides a flexible and powerful way to create two-column (and multi-column) forms on your WordPress website. This method offers greater control over layout and functionality compared to Elementor Pro’s built-in form widget, and unlocks a host of advanced features for more complex form scenarios.