MyListing Support – Replace Contact Form 7 with Elementor Pro

Guide Overview:

In this MyListing Support guide, we show you how to replace the theme’s “bundled” contact form solution (Contact Form 7) with Elementor Pro.

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.

If you get value from this type of content, help us keep it free.

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.

Note: Perfmatters is from the trusted folks at Kinsta, who is our preferred website hosting vendor for our MyListing websites, as well as our client’s websites. We offer FREE migration assistance to Kinsta when our affiliate link is used. Win! Win!

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 > Section.
  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"].

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.).
  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 guide for using Loco Translate with MyListing, 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. 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.
Mylisting Guide Elementor Pro Form Single Listing Send To Contact Email
  1. Save and test.

**Shout out to Dave Baird for his contributions and making this section a reality.

Contact Email Address - Code Snippet

// MYLISTING - REPLACE CONTACT FORM 7 WITH ELEMENTOR PRO FORM
// If Contact Email field IS NOT filled in by the listing owner, the form will send to the listing owner.
// If Contact Email field IS filled in, the form will send to the email addresses entered, rather than the listing owner.
function contact_form_email_func( $atts ){
	$postID = get_the_ID();
	$job_email = get_post_meta($postID, '_job_email')[0];
	if(!$job_email){
		$author_id = get_post_field ('post_author', $postID);
		$job_email = get_the_author_meta('user_email', $author_id);
	}
	return $job_email;
}
add_shortcode( 'contact-form-email', 'contact_form_email_func' );

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.​​

Watch the Video Version

Play Video

Let's empower others. Share the knowledge.

Share on twitter
Twitter
Share on facebook
Facebook
Share on linkedin
LinkedIn
Scroll to Top