How to Use the Form Widget with Contact Form 7 (Themeasy)

This guide shows you how to import, select, and customize your form step-by-step.

✅ Step 1: Import Demo Forms

Before using the widget, make sure you have forms available in Contact Form 7. You can import ready-to-use form templates by following these steps:

1. Go to Appearance > Import Demo Data
2. Click Import and wait for the content to be added
3. The forms will now appear under the Contact > Contact Forms menu

✅ Step 2: Add the Form Widget in Elementor

1. Edit your page with Elementor
2. Drag the widget called Form (Themeasy) to the desired section
3. In the left panel, find the Contact Form setting
4. Choose a form from the dropdown list (forms created via Contact Form 7)

📌 Only forms created with the Contact Form 7 plugin will appear here.

🎨 Step 3: Choose a Form Design & Layout

You can control the visual appearance and structure of the form using two options in the widget panel:

➤ Form Design:

• Basic – Includes floating labels above fields
• Compact – Minimal style, removes labels for a cleaner look

➤ Form Layout:

• Stacked (Default) – Button appears below the form fields
• Inline – Button appears beside the input (for forms with only one field)

✍️ Step 4: Edit the Form Fields (Optional)

If you want to modify or understand the structure of your Contact Form 7 form, go to:

Contact > Contact Forms
Edit the selected form, and paste or adjust the shortcode layout as needed.

Here’s an example of a modern, styled form:

<div class="form-area">
  <div class="form-row row">
    <div class="form-col form-floating col-6">
      [text* your-name placeholder "Name"]
      <label class="form-label">Name</label>
      <div class="invalid-feedback">Please enter your name.</div>
      <div class="valid-feedback">Looks good.</div>
    </div>
    <div class="form-col form-floating col-6">
      [email* your-email placeholder "Email"]
      <label class="form-label">Email</label>
      <div class="invalid-feedback">Please enter a valid email address.</div>
      <div class="valid-feedback">Looks good.</div>
    </div>
  </div>
  <div class="form-row row">
    <div class="form-col form-floating col-12">
      [textarea your-message x5 placeholder "Message"]
      <label class="form-label">Message</label>
      <div class="valid-feedback">It's optional, but we'd like to know about it :)</div>
    </div>
  </div>
  <div class="form-row row">
    <div class="form-col col-12">
      [acceptance acceptance]
      I agree to the <a href="#your-link">terms of use</a>
      [/acceptance]
    </div>
  </div>
</div>

📌 Paste this code into the form editor inside Contact Form 7. The Themeasy widget will handle the styles automatically.

🚀 Final Result

Your form will look clean, modern, and match your theme — with no custom code needed. You can customize the submit button text, icon, spacing, and layout entirely within Elementor.

❗ Important Notes

• Make sure the Contact Form 7 plugin is installed and activated
• You don’t need to add any extra CSS or JavaScript — Themeasy handles it all
• Use Inline Layout only when the form has a single input field (e.g. newsletter or search forms)

Need more help? Feel free to contact our support team — we’re here to make form creation easier and more beautiful 💛