Replace MyListing’s Contact Form 7 With Elementor Pro

Get the knowledge your online business needs to succeed.


The Replace MyListing’s Contact Form 7 with Elementor Pro guide will show you how to replace the theme’s “bundled” contact form solution.

We created this guide for those who are interested in optimizing their website for best performance, reducing potential plugin conflicts, reducing plugins in general, and doing more with less.

Elementor Pro - The Better Option

Many website owners are unaware that Contact Form 7 loads CSS and JavaScript (JS) on every post/page, regardless of whether it contains a form or not.

While you can use excellent optimization plugins like Perfmatters, to combat the overuse of CSS/JS and external HTTP requests, again, we’re trying to reduce the plugins and/or replace them with better solutions.

Enter Elementor Pro, which only loads CSS/JS where it’s needed.

Aside from the performance gains, Elementor Pro’s form widget is easier to use and more feature-rich compared to Contact Form 7 (CF7).

If you’re already using Elementor Pro or have been considering it to enhance your website’s design/functionality, there really is no reason to keep CF7 around.

Integrate Elementor Pro Forms with MyListing

The instructions in this section result in having all listing email correspondence going to the listing owner. We have another section that covers how to have listing emails sent to an alternate email address.
  1. Install and activate Elementor Pro.
  2. Templates > Add New.
  3. Template Type > Page.
  4. Name your template and click Create Template.
  1. Close the Elementor Library window, as we’ll be creating our own template from scratch.
  2. Drag the Elementor Pro Form widget onto the page.
  3. Name your form (Note: This is optional, as you’ve already named your template for easy identification.).
  4. Click Add Item.
  5. For the Type drop-down, choose Hidden.
  6. For the Label field, enter “Listing Owner Email”.
  7. Click Advanced.
  1. Click the Dynamic link/icon.
  2. Choose Author Info.
  1. Click on “Author Info (Bio)“.
  2. Switch Bio to Email.
  1. Copy the Shortcode value (e.g. [field id=”field_1″]).
  2. Scroll down to and expand the Email section.
  3. Paste the shortcode into the To field.
  4. Optionally, enter a custom Subject.
  5. For the Message field, replace the default value, entering your desired information, and optionally use our information below as a starting point.
[field id="name"] is interested in your listing. You can reach out the them at [field id="email"].


[field id="message"]
  1. For the From Email value, be sure to enter an email that can successfully send from your domain.
  2. For the Reply-To value, choose Email Field.
  3. Optionally, enter values for the Cc and Bcc fields.
  4. For Meta Data, strip out the data values that you don’t need. (Note: We only use the Page URL value.).
  5. Click Publish.
  1. Templates > Saved Templates.
  2. Locate your new template and copy the Shortcode.
  3. Listing Types > Edit a Listing Type that you wish to add your new Listing Contact Form to.
  4. Single Page > Content & Tabs.
  5. Edit your desired Tab. (Note: If you don’t edit the default Tab (e.g. “Profile”), whatever tab you use will be appended to the listing URL that is output. For example, if you have a “Contact” tab, the listing URL will be communicated as yoursite[dot].com/listing-url/#contact“). Placing the form in the first Tab looks cleaner.).
  6. Add a new block > Shortcode.
  7. Name it “Contact Form” or whatever you’d like.
  8. Paste in the Shortcode from step #24.
  9. Optionally, specify your desired icon.
  10. Save the changes to your Listing Type.
  1. If desired, use Loco Translate to translate “Page URL” to “Listing URL”. (Note: Whatever text you choose is how it will read within the emails that come from your new Listing Contact Form. If you proceed with the translation, you will choose Elementor Pro within Loco Translate, as that’s where this particular text is coming from. Please refer to our How To Use Loco Translate With MyListing guide, if you need more info.).
  2. Browse to a listing that falls under the Listing Type that you just updated with your Listing Contact Form.
  3. Fill out your new form and Send.
  4. Verify receipt.
  5. Verify the format.
  6. Once everything checks out, add your Listing Contact Form to your other Listing Types, as desired.

Send Listing Emails to the Contact Email Address

Instead of sending emails to the Listing Owners, you can have listing email correspondence go to the address specified in the Contact Email field. 

This is extremely useful for those that have already rolled out their website and have many listers that have filled in the Contact Form field.

Note: Sending to the Listing Owner or sending to the Contact Email, is not an all-or-nothing proposition, as you can create multiple forms in Elementor Pro that do different things and have different recipients.

  1. Add the code snippet at the end of this section, to your child theme’s functions.php file.
  2. Edit the Listing Owner Email field.
  3. Click Advanced.
  4. Click the Dynamic link/icon.
  5. Choose Shortcode.
  6. Click on “Shortcode“.
  7. Paste “[contact-form-email]” into the Shortcode field.
  1. Save and test.

Contact Email Address - Code Snippet

To make all of this magic happen, we add our Replace MyListing’s Contact Form 7 With Elementor Pro code snippet to the MyListing Child theme, using the Code Snippets plugin.

Note: The snippet also provides instructions for adding the code directly to your Child Theme, without using a plugin.

Hide the Contact Form for Unclaimed Listings

By default, the Contact Form will show for all listings, and this can be problematic for those that have a significant amount of listings that are yet to be claimed or associated with a customer.

Imagine having hundreds or thousands of listings where people fill out the contact form, thinking they will get a response.

This would not only create a ton of “noise” for a website admin/editor but could demonstrate a website’s inability to communicate properly should emails go ignored.

  1. Theme Tools > Theme Options > Custom Code > CSS: Add the CSS snippet shown below, optionally replacing “formblock” with a class name of your choice. (Note: If you do change “formblock”, make sure you choose a class name that is NOT currently in use on your website.).
  2. Listing Types > Edit Listing Type > Single Page > Content & Tabs > Contact Form Block > Custom Block Classes: Add “formblock” to the Custom Block Class
  3. Save changes.
body:not(.c27-verified) .formblock {
display: none;

Remove Contact Form 7 from MyListing

  1. Deactivate and delete the Contact Form 7 plugin.
  2. Edit all Listing Types where you’ve used the Contact Email field for use with Contact Form 7.
  3. Set the Contact Email field to optional, so the listing owner is not forced to add an additional recipient.
  4. Optionally, consider adding a description to the Contact Email field, educating your users as to when/why this field should be used.
  5. Single Page > Content & Tabs > Remove the old Contact Form block.

Note: If you know for sure that you’ll only ever want to have the listing emails go to the listing owner, you can completely remove the Contact Email field. We recommend just leaving this in place, to give your users more options.​​

MyListing Theme Video Tutorial

Play Video

Find a bug or typo? Please let us know.