MyListing Club

Replace MyListing’s Contact Form 7 With Elementor Pro

Building better MyListing websites. One guide at a time.

Guide Contents

Overview

Our 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, automating processes, and doing more with less.

Elementor Pro - The Better Option

Many MyListing 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 reduce HTTP requests, again, we are trying to reduce the plugins and/or replace them with better solutions.

Elementor Pro only loads CSS/JS on posts/pages where their Forms widget is used.

In addition to the performance gains, Elementor Pro forms are not only easier to use compared to Contact Form 7, but they are also more feature-rich.

If you are 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

Send Email to the Listing Owner Account Address

The instructions in this section result in having emails automatically sent to the email address the Listing Owner used when signing up for your MyListing website.

  1. Install and activate Elementor Pro.
  2. Templates > Add New.
  3. Template Type > Page.
  4. Name your template and click ‘Create Template’.
  1. Drag the Elementor Pro Form widget onto the page.
  2. Name your form (Note: This is optional, as you’ve already named your template for easy identification.).

In the following steps, we will configure the form to automatically input the logged-in user’s email address, saving them some time.

  1. Expand the Email field and click on ‘Advanced’.
  2. Click on the ‘Dynamic’ icon.
  3. Site > User Info.
  1. Click on ‘User Info’.
  2. Choose ‘Email’.

In the following steps, we will configure the form to automatically send Single Listing email correspondence to the Listing owner’s email they used when signing up for your MyListing website.

  1. Back at the main screen for your form, click ‘Add Item’.
  2. For the Type drop-down, choose ‘Hidden’.
  3. For the Label, enter ‘Listing Owner Email’.
  4. Click ‘Advanced’.
  1. Click on the ‘Dynamic’ icon.
  2. Author > Author Info.
  1. Click on ‘Author Info (Bio)’.
  2. Choose ‘Email’.
  1. For the ID field, enter ‘field_1’.
  2. Copy the Shortcode value (e.g. [field id=”field_1″] .
  1. Scroll down to and expand the Email section.
  2. Paste the shortcode into the To field.
  3. Optionally, enter a custom Subject.
  4. 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 to them at [field id="email"].

Message:
[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.).
  1. Click ‘Publish’.
  2. WordPress Dashboard > Templates.
  3. Locate your newly-created template and copy the Shortcode.
  4. Edit a Listing Type that you wish to add your new form to.
  5. Single Page > Content & Tabs.
  6. Edit an existing tab or create a new one. (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.).
  7. Insert a new ‘Shortcode’ block.
  8. Name it “Contact Form” or whatever you’d like.
  9. Paste in the Shortcode from step #32.
  10. Optionally, specify your desired icon.
  11. 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 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 any Listing that falls under the Listing Type that you just added your new form to.
  3. Send a test email using the form, so you can verify receipt, verify the format, etc.
  4. Once everything looks good, add your new form to your other Listing Types, as desired.

Send Email to the Listing's Contact Form Field Address

Instead of sending emails to the email address the Listing Owners used when signing up for your MyListing website, you can have emails 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 Listings with the Contact Form field filled in.

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 with 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 on the ‘Dynamic’ icon.
  5. Choose ‘Shortcode’.
  6. Click on ‘Shortcode’.
  7. Paste [contact-form-email] into the Shortcode field.
  1. Click on ‘Shortcode’.
  2. Paste [contact-form-email] into the Shortcode field.
  1. Save your template and test.

To make the sending of emails to the Listing’s contact form field address happen, we add our Replace MyListing’s Contact Form 7 With Elementor Pro code snippet to the MyListing Child theme.

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

SPAM Prevention

Regardless of the form solution you choose, it’s just a matter of time before you and your customers receive SPAM emails, whether it comes from bots (most likely) or humans.

In this section, we cover our recommendations for combating SPAM that may come from Single Listing contact forms.

Honeypot Field

This is a super easy and solution to drop in place and has no impact on the user experience or website performance.

Regardless of other tactics, you take to combat SPAM that may come from forms, the honeypot option should always be present as an added layer of protection.

  1. At the main screen for your form, click ‘Add Item’.
  2. For the Type drop-down, choose ‘Honeypot’.
  1. For the Label, enter ‘Honeypot’.

At this point, you could stop and see if adding the honeypot is enough to do the job, but some may not want to take any chances, and instead elect to layer on the SPAM protection.

CleanTalk Plugin

Implementing CleanTalk, alone, is typically enough to keep all SPAM at bay, and the only reason we don’t list it first is due to it requiring a purchase and because it adds another plugin to your website.

The above said, CleanTalk does not slow down your website, and it has a very small price tag.

In short, if the purchase and plugin aren’t an issue for you, definitely add CleanTalk to your website, to go along with the honeypot.

reCAPTCHA V3

If you decide to skip CleanTalk, then our next recommendation to layer up with honeypot is Google’s reCAPTCHA V3.

While you can choose from either reCAPTCHA v3 or reCAPTCHA v2, we recommend v3 as it is the more secure and less intrusive method of the two.

We list this solution last because it is the only one of the three listed here that does place a bit of a performance hit on your website.

While it’s not a major hit, as website performance specialists, it’s just something we feel that must be mentioned, as every little ding here and there adds up.

  1. At the main screen for your form, click ‘Add Item’.
  2. For the Type drop-down, choose ‘reCAPTCHA V3’.
  1. For the Label, enter ‘reCAPTCHA V3’.
  2. For the Badge, choose whether to place it on the bottom right of the page, bottom left, or inline.

At this point, the form is ready to use reCAPTCHA, but you need to also configure Elementor to use it.

  1. Elementor > Settings > Integrations.
  2. Click on the reCAPTCHA V3 link and follow the instructions.
  3. Input your Site Key, Secret Key, and optionally adjust the Score Threshold.
  4. Save changes.
  5. Test your Single Listing contact form to ensure reCAPTCHA is working properly.

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;
}
				
			

Collect Form Submissions

As of Elementor Pro 3.2, all Elementor forms will automatically be set to collect form submissions. 

Until now, a separate plugin was required to collect submissions, so this is amazing news for MyListing website owners.

If you follow this guide (or if use Elementor Forms in general), you can view the form submissions sent from the Single Listings, by going to Elementor > Submissions.

From there, you can view and do a number of things.

  • Identify the sender’s email.
  • Identify the exact form that was used. (Note: If you click on the form link, it will take you right to the edit screen for your form template.).
  • Identify the Single Listing where the form was filled out. (Note: If you click on the ‘Page’ link, it will take you straight to the Single Listing.).
  • Identify the date of submission.
  • Export all submissions to a spreadsheet. (Note: This would be great for generating a report for your customers, so they can see the number of potential leads coming through their contact form.).

Regulations

One thing of important note here is depending on your website, where your business operates from, etc., collecting this information may either be frowed upon and/or require you to update your privacy polices.

Word From Elementor: “Form Submissions is GDPR compliant and uses the WordPress native Export and Erase user information tools so you’ll be able to access all of your data right from your WordPress admin.”

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’s account email, you can completely remove the Contact Email field, but you may just want to leave it in place, to give your users more options.​​

MyListing Theme Video Tutorial

Play Video