Wp Form

The WPForms Widget allows you to easily integrate your WPForms (WordPress Forms) into Elementor pages. This widget offers a user-friendly drag-and-drop experience with full styling and layout controls—perfect for building custom-designed forms with ease.

🔧 How to Use the WPForms Widget

Step 1: Create a New WPForm

• Navigate to your WordPress Dashboard > WPForms > Add New.
• Click “Add New” to start a new form.

• Give your form a name (e.g., “Simple Contact Form”).
• Select a template that suits your needs:
  • Blank Form
  • Simple Contact Form
  • Newsletter Signup
  • RSVP Form
  • Automobile Information Form
  • Or use “Generate with AI” to auto-create forms with prompts.

Step 2: Add Form Fields

• Use drag-and-drop to add fields such as:
  • Name, Email, Phone, Message, Dropdown, Multiple Choice, Checkboxes, CAPTCHA, etc.
• Click on each field to customize labels, placeholders, and settings.

🚀 How to Enable the Wpform Widget

1. Navigate to your WordPress dashboard.
2. Go to Topper Pack → Widgets.
3. Locate the WPform widget from the list.
4. Toggle the switch to “On” to enable it.
5. The widget is now available in the Elementor editor.

Step 3: Insert WPForms Widget in Elementor

• Open your page with Elementor Editor.
• Search for “WP Forms” in the widget panel.
• Drag the WPForms Widget into your layout.
• Under Form Settings, select the form you created earlier from the dropdown.

🎨 Customize the Style

Navigate to the Style tab in Elementor and fine-tune the form appearance:

Form Container

• Set width, margins, padding, and background color.

Labels

• Control typography, spacing, and color of field labels.

Input & Textarea

• Adjust input field styling including font, padding, border radius, background, and border color.

Placeholder

• Style the placeholder text for fields.

Submit Button

• Customize the appearance of the submit button (font, color, hover state, etc.).

Error Messages

• Change how validation error messages appear when fields are left empty or have incorrect input.

💡 Tips

• Use shortcodes from WPForms if needed in non-Elementor locations.
• Enable AJAX submission for a faster user experience (in WPForms settings).
• Use spam protection like CAPTCHA for security.

✅ Benefits of WPForms Widget

• Seamless Elementor integration.
• Drag & drop form creation.
• Custom styles with live preview.
• Responsive and mobile-friendly.
• Use any form template you’ve built with WPForms.