We Forms

The WeForms Widget in the Topper Pack plugin allows you to design and display dynamic, powerful contact or custom forms on your Elementor pages. Using this widget, you can create professional forms using the native WeForms plugin and embed them anywhere via Elementor with full style control.

🔹 Step 1: Create a New WeForm

Description:
To use the WeForms widget, you must first create a form in the WeForms plugin dashboard.

How to:

1. Navigate to WeForms > All Forms from the WordPress dashboard.
2. Click the Add Form button at the top.
3. You will be redirected to the form template selection page.

🔹 Step 2: Select a Template

Description:
Choose from a wide range of pre-designed templates or build a custom form from scratch.

Available Templates:

• Blank Form: Start from scratch.
• Contact Form: Standard contact fields (Name, Email, Message).
• Support Form: Fields for department, subject, and email.
• Vendor Contact Form: For vendor-specific inquiries.
• Data Request Forms: Useful for GDPR or data export requests.

Click on a template to load it into the drag-and-drop form builder.

🔹 Step 3: Customize Form Fields

Description:
You can fully customize your form fields using the intuitive drag-and-drop builder. Add any field you need from the right-hand panel.

Standard Field Options:

• Name
• Text
• Textarea
• Email
• Dropdown
• Radio/Checkbox
• Website URL
• Date/Time
• File Upload
• Image Upload

Advanced Fields:

• Hidden Field
• Google Map
• Terms & Conditions
• HTML Blocks
• Repeat Field
• Country List

👉 Simply drag a field from the right panel to your form canvas. Click on the field to edit its label, placeholder, requirement, and settings.

🔹 Step 4: Save Your Form

Description:
Once your form setup is complete, save it by clicking the Save Form button at the top right.

This generates a unique shortcode for the form, e.g., [weforms id="4872"]. But you won’t need to use this shortcode directly when working with the Elementor widget.

🚀 How to Enable the WeForms Widget

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

Description:
Now that your form is ready, you can embed it into any Elementor-designed page using the WeForms widget.

How to:

1. Open the page with Elementor where you want to display the form.
2. Search for “WeForms” in the Elementor widget panel.
3. Drag and drop the WeForms widget into your layout.

1. Under the Content → Form settings, choose the form you created from the dropdown list.

🔹 Step 6: Style Your Form in Elementor

Description:
Customize the look of your form without writing any CSS. The Style Tab in the WeForms widget allows you to edit form appearance visually.

Available Style Options:

• Form Heading:
  • Typography, font size, font weight
  • Text color
  • Margin & padding
• Fields:
  • Input background and border color
  • Text alignment, spacing
  • Padding around fields
• Labels:
  • Label font settings
  • Label spacing and color
• Submit Button:
  • Background color
  • Border radius
  • Hover effects
  • Typography and padding

🔹 Step 7: Publish the Page

Once everything looks good:

1. Click Update or Publish in Elementor.
2. Your fully functional and styled WeForms form will be live on the page.