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

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 single post/page, regardless of whether it contains a form or not.

While you can use excellent optimization plugins like Perfmatters, that combat this overuse of CSS/JS, 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 trust 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

**Take special note that these instructions result in having all listing email correspondence going to the listing owner.** We have another section that covers how to do this differently.
  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. Choose 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 Email 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.

<strong>[field id=”name”]</strong> is interested in your listing. You can reach out the them at [field id=”email”].
<br><br>
<strong>Message</strong>:
<br>
[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 the your other Listing Types, as desired.

Send Listing Emails to the Contact Email Address

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

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.

Please note that sending to 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 following to your child theme’s functions.php file.

function contact_form_email_func( $atts ){
$job_email = get_post_meta(get_the_ID(), ‘_job_email’)[0];
if(!$job_email){
$custom_css = “
#custom-contact-form{
display: none;
}”;
wp_register_style( ‘dummy-handle’, false );
wp_enqueue_style( ‘dummy-handle’ );
wp_add_inline_style(‘dummy-handle’, $custom_css);
}
return $job_email;
}
add_shortcode( ‘contact-form-email’, ‘contact_form_email_func’ );

  1. Edit your new Listing Contact Form.
  2. Click Advanced.
  3. Click the Dynamic link/icon.
  4. Choose Shortcode.
  5. Click on Shortcode.
  6. Paste “[contact-form-email]” into the Shortcode field.
  7. Listing Types > Edit a Listing Type where you have added your new Listing Contact Form to.
  8. Single Page > Content & Tabs.
  9. Edit the Shortcode block (Contact Email).
  10. Paste “custom-contact-form” in the Custom Block ID field. (Note: This setting hides the Contact Form block if the listing owner didn’t add an email address to the Contact Form field.).
  11. Save and test.

Remove Contact Form 7 from MyListing

  1. Deactivate and delete the Contact Form 7 plugin.
  2. Edit any Listing Type where you’ve add the Contact Email field.
  3. Remove the Contact Email field.
  4. Within the same Listing Type, browse to Single Page > Content & Tabs.
  5. Remove the Contact Form block.
  6. Repeat these steps for the other Listing Types where these fields and blocks are present.

Watch the Video Version

Play Video

Let's empower others. Share the knowledge.

Share on twitter
Share on facebook
Share on linkedin