Contact Forms with Contact Form 7

The Shock Core Form widget lets you take any form built with the free Contact Form 7 plugin and apply Shock’s custom styles, layout and button design — directly inside Elementor. You get a clean, modern, on-brand form without writing any CSS or JavaScript.

This guide walks you through importing a starter form, adding the widget, choosing a design, and (optionally) editing the fields.

Note

Two things must be in place first: the Contact Form 7 plugin installed and active, and the Shock Core plugin active (it provides the Form widget).

Step 1 — Get a form in Contact Form 7

Before using the widget you need at least one form available in Contact Form 7. The quickest start is to import the ready-made forms from the demo content — see Import Demo Data if you haven’t done this yet.

1. Go to Appearance » Import Demo Data.

2. Click Import and wait for the content to finish importing.

3. Your forms now appear under Contact » Contact Forms.

Prefer to start fresh? Go to Contact » Add New to create your own form instead.

Step 2 — Add the Form widget in Elementor

1. Edit your page with Elementor.

2. Drag the Form (Shock Core) widget into the section where you want the form.

3. In the left panel, find the Contact Form setting.

4. Choose a form from the dropdown — it lists the forms created with Contact Form 7.

Reference image — replace before publishing16:9

Elementor editor with the Form (Shock Core) widget selected, showing the left-hand panel with the Contact Form dropdown, Form Design, and Form Layout controls.

Note

Only forms created with the Contact Form 7 plugin appear in this dropdown. If your form isn’t listed, confirm it was saved under Contact » Contact Forms.

Step 3 — Choose a design and layout

Two options in the widget panel control the form’s appearance and structure:

Form Design

• Basic — floating labels that sit above each field.
• Compact — a minimal style that removes labels for a cleaner look.

Form Layout

• Stacked (default) — the submit button appears below the fields.
• Inline — the button sits beside the input, for single-field forms.

Caution

Use the Inline layout only when the form has a single input (such as a newsletter or search form). With multiple fields, Inline will look cramped — stick with Stacked.

Step 4 — Edit the form fields (optional)

To change the form’s structure, go to Contact » Contact Forms, edit the form, and adjust the markup. The Shock Core widget reads standard Contact Form 7 markup and applies the styling automatically, so you can use rows and columns to lay out fields.

Here’s an example of a modern, styled form you can paste into the Contact Form 7 editor:

<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 into the form editor inside Contact Form 7. The col-6 / col-12 classes control how many columns each field spans, and the Shock Core widget handles the styling.

The result

Your form ends up clean, modern and matched to your theme — with no custom code. You can still customize the submit button text, icon, spacing and layout entirely within Elementor. For the rest of the available building blocks, see Shock Core Widgets for Elementor.

Make sure emails actually arrive

Contact Form 7 sends notifications using WordPress’s default wp_mail(), which many hosts don’t deliver reliably — messages often land in spam or vanish silently. Install an SMTP plugin (such as WP Mail SMTP or FluentSMTP) and configure it with a real mailbox or a transactional email service. This dramatically improves deliverability so you never miss an enquiry. Send yourself a test message after setup to confirm it works.

Requires Contact Form 7 plugin · Shock Core plugin