weForm
You love weForms for its power, but in an Elementor-built website, it can feel like a stranger – stuck in its default look, refusing to blend in. No more compromising. Master Addons weForms Element hands you the keys to the design studio. Pull any existing weForm directly into the Elementor editor and style every single piece of it. Apply one-click professional layouts, then tweak everything from the container shadow to the color of the placeholder text. Make your contact forms, surveys, and registration forms a seamless, beautiful extension of your brand. Stop letting your forms break the design magic.
Instant Design & Layout Presets
Why start from a blank slate? Hit the ground running with curated Design Layout presets (Style One through Eleven). Each preset applies a coordinated set of styles – for the container, fields, and button – giving you a professionally designed form instantly. Whether you need a minimalist light form, a bold dark card, or something with vibrant borders, there’s a starting point. It’s the fastest way to make a weForm look like it was always meant to be part of your Elementor page.
- 11+ Ready-Made Styles: Choose from a library of pre-designed layouts like “Style One”, “Style Two”, etc., for instant visual appeal.
- Coherent Design Systems: Each preset styles the entire form holistically – container, fields, button – ensuring a perfect match.
- Perfect Starting Point: Use a preset as your foundation, then customize further with granular controls to make it uniquely yours.
Complete Container & Field Architecture
Control the very frame and building blocks of your form. First, design the Form Container: set its width, alignment, background, padding, and add advanced effects like Box Shadow and Border Radius to make it pop or blend. Then, architect the Form Fields themselves. Adjust Input Width and Textarea Width independently, set the field background, internal padding, and borders. You can even design the Focus State – change the border color and shadow when a user clicks into a field – for a polished, interactive feel.
- Field Dimension Control: Set different widths for standard inputs and textarea (message) fields.
- Interactive Focus States: Define custom Border Color and Box Shadow for fields when users click into them, enhancing usability.
- Spacing & Corners: Fine-tune Fields Padding and Border Radius on all sides for each input box.
Color & Typography Control
Typography and color are the soul of your design. Here, you control them for every text element separately. Style the Label (like “Email Address *”) with its own color and typography. Define the Field Font Color for what users type. Crucially, style the often-forgotten Placeholder Font Color (“Your email…”). Use separate Typography controls for Labels and Input Fields to create clear visual hierarchy, ensuring your form is not just stylish but effortlessly readable.
- Triple-Layer Text Styling: Independently set colors for Labels, typed Field Font, and Placeholder text.
- Hierarchical Typography: Apply different font families, sizes, and weights to Label Typography and Input Fields Typography.
- Visual Clarity: Use contrasting colors for labels and placeholders to guide users intuitively through the form.
Submit Button Customization
The submit button is the final, most important step. Don’t leave it as a default grey rectangle. Take full command. Control its Width and Alignment. Style its Typography. Define the Text Color and Background Color for both Normal and Hover states. Adjust its Padding, Margin, Border, and Border Radius to get the perfect shape and size. Add a Box Shadow to make it lift off the page. This turns a mundane “Submit” into a compelling, click-worthy trigger for your conversions.
- Full Dimension Control: Adjust Button Width, Padding, Margin, and Border Radius for the perfect button geometry.
- Alignment Freedom: Position the button Left, Center, or Right within the form container.
- Advanced Effects: Apply Box Shadow and custom Border Types to make your button a standout visual element.
Frequently Asked Questions For weForm
How do I connect this element to my existing weForms?
It’s simple. In the Content tab, you’ll see a “Select weForm” dropdown. Click it, and you’ll see a list of all forms you’ve created in the weForms plugin dashboard. Just select the one you want to embed and design. The element pulls in your live form fields (Name, Email, etc.) automatically.
Will my form still work and send emails like before?
Absolutely, yes. This element only changes the visual design of the form within Elementor. All the core weForms functionality – field logic, notifications, email routing, confirmations, and data storage – remains 100% intact and works exactly as you configured it in the weForms plugin settings.
Can I use different styles for different forms on the same site?
Of course! Each Master Addons weForms element you place on a page is styled independently. You can have a minimalist contact form in your footer (using Style Two) and a bold, colorful registration form in your hero section (using Style Seven) without any conflict.
Is the designed form fully responsive on mobile?
Yes. The element is built with responsiveness in mind. The container width, field widths, padding, and font sizes will all adapt. For advanced control, you can use Elementor’s responsive mode to tweak settings specifically for tablet and mobile views (like stacking fields or adjusting button size).
What if I update my field settings in the main weForms plugin?
Your changes (like adding a new field or changing a field label) will automatically sync. You might just need to refresh the Elementor editor view (as the helper text suggests) to see the updated field structure. Your custom styles will then apply to the new or updated fields.
Can I still use Conditional Logic and other advanced weForms features?
Definitely. Since this element embeds your real, functioning weForm, all advanced features like conditional logic, multi-page forms, file uploads, and integrations that you set up in weForms will work perfectly. You’re just giving it a new, beautiful front-end skin.
Trending Elementor Widgets & Extensions
Build sophisticated websites in less time.
Caldera Forms
