Replace Contact Form 7 With Elementor Pro

Elementor Pro Forms for Single Listings

Contact Form 7 – The Bad Option

MyListing bundles Contact Form 7 with the theme because it’s a free plugin from the WordPress Repository. However, just because something is free and bundled with a theme doesn’t necessarily make it the best option.

I would avoid Contact Form 7 because it’s challenging to use, lacks functionality, and slows down websites. Many MyListing website owners are unaware that Contact Form 7 loads CSS and JavaScript (JS) on every website page, regardless of whether it contains a form.

Instead of using Contact Form 7, I recommend the Elementor Pro plugin for adding forms to your MyListing website. This guide assumes you already have Elementor Pro on your website.

Elementor Pro – The Better Option

Compared to Contact Form 7, Elementor Pro forms are easier to use, feature-rich, and performant. If you already use Elementor Pro or want to enhance your website’s overall design/functionality, there is no reason to keep Contact Form 7 around.

Build the Single Listing Contact Form Template

Note: Save time by downloading and importing one of the Club’s Single Listing Contact Form templates.

1. WordPress Dashboard > Templates > Add New.
2. Select the type of template you want to work on > Page.
3. Name your template > Enter the desired name (e.g., Single Listing Contact Form)
4. Click the ‘Create Template’ button.
5. Drag the Elementor Pro Form widget onto the page and build/design as desired, adding your fields, styling, etc.

Dynamically Input the Logged-in Users Email Address

It’s nice to dynamically input the logged-in user’s email address, which can save them a little time when filling out forms.

1. Expand the Email field and click on ‘Advanced.’
2. Default Value > Click the ‘Dynamic Tags’ icon.
3. Site > User Info.
4. Click ‘User Info.’
5. Field > ‘Email’

Dynamically Send Email to the Listing Owner

While you can still use MyListing’s default ‘Contact Email’ Listing Type field to provide an alternate email address to send to, that field is not required.

Instead, you can set up your Elementor-based contact forms to dynamically send emails to the Listing Owner’s (i.e., the Listing author) email address they used when registering on your MyListing website.

1. Form Fields > Click the ‘Add Item’ button.
2. Type > Hidden
3. Label > ‘Listing Owner Email’
4. Click the ‘Advanced’ tab.
5. Default Value > Click the ‘Dynamic Tags’ icon.
6. Author > Author Info
7. Click ‘Author Info.’
8. Field > Email
9. ID > Paste the ID shown below.

listing_owner

listing_owner

10. Copy the Shortcode value shown below.

[field id="listing_owner"]

[field id="listing_owner"]

11. Scroll down and expand the ‘Email’ section of the form.
12. To > Paste the shortcode from step 10.

Send Email Using the Contact Email Field (Optional)

Instead of only sending emails to the Listing Owners’ email address, you can also give the option of sending emails to an address specified in the Contact Email field.

In short, if someone chooses to fill out the ‘Contact Email’ field, that value (i.e., email address) will be used instead of the Listing Owner’s account email.

1. Add the Recipient Management for Elementor Pro Single Listing Contact Forms code snippet to your website.
2. Edit the ‘Listing Owner’ field.
3. Click the ‘Advanced’ tab.
4. Click the ‘x’ icon to clear the current value.
5. Default Value > Click the ‘Dynamic Tags’ icon.
6. Site > Choose ‘Shortcode.’
7. Click ‘Shortcode.’
8. Shortcode > Paste the shortcode below into the Shortcode field and save changes.

[contact-form-email]

[contact-form-email]

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

Email Tab

Single Listing Contact Template > Form > Email

Miscellaneous Email Settings

1. Subject > Enter as desired.
2. Message > Enter as desired.
3. From Email > Specify a valid and desired sender address.
4. From Name > Enter as desired.
5. Reply-To > Email Field
6. Cc > Optionally, send yourself a copy of all emails. (Note: If Elementor’s ‘Collect Submissions’ feature is turned ON, you may not want/need to Cc yourself.).
7. Meta Data > Choose the desired options. (Note: I disable everything but ‘Page URL’ because the rest of the options are unnecessary “noise” and potential privacy risks.).
8. Save changes.

Add the Form to Single Listings

1. WordPress Dashboard > Templates
2. Locate your newly created template and copy the Shortcode from the ‘Shortcode’ column.
3. Edit a Listing Type to which you wish to add the contact form.
4. Single Page > Content & Tabs
5. 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.

6. Insert a new ‘Shortcode’ block.
7. Label > Enter as desired or clear it out completely.
8. Content > Paste in the Shortcode from step #2.
9. Icon > Select as desired or clear it out completely.
10. Save changes.

Contact Form Testing

1. From the front end of your website, pull up a Listing that corresponds to the Listing Type you just added to your contact form.
2. Send a test email using the form to verify receipt, the format, the content, etc.
3. Once everything looks good, add your new form to your other Listing Types, as desired.

Hide the Contact Form for Unclaimed Listings

Note: These instructions are the easiest way to hide the entire ‘Contact Form’ block from Listings to prevent “contactless” (i.e., nobody on the other end to respond) forms from being displayed.

By default, the Contact Form will show for all Listings, which can be problematic for those with a significant number of Listings yet to be claimed and/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 from the Listing Owner.

This would not only create a lot of “noise” for a website admin/editor but could also demonstrate a website’s inability to communicate effectively should emails be ignored.

1. Listing Types > Edit Listing Type > Single Page > Content & Tabs
2. Edit an existing tab or create a new one.
3. Edit an existing ‘Contact Form’ block or add a new one.
4. Custom Block Classes > Add the text shown below.
5. Save changes.

formblock

formblock

6. Add the code snippet below to your website.

body:not(.c27-verified) .formblock {
    display: none;
}

body:not(.c27-verified) .formblock {
    display: none;
}

SPAM Protection

Note: I recommend starting with Cloudflare Turnstile (Free) or one of the Club’s Partner Deals for anti-SPAM solutions.

reCAPTCHA

Another option is Google reCAPTCHA, but I do not recommend it. reCAPTCHA is notorious for having random issues and slowing down websites, so I would only use this as a last resort.

Another caveat is that vendors provide little support regarding which reCAPTCHA technology to use for each area. They tend to take a “trial and error” approach rather than provide solid answers.

Add reCAPTCHA to Your Contact Form

1. Click the ‘Add Item’ button from your form’s main screen.
2. Type > reCAPTCHA V3
3. Label > ‘reCAPTCHA V3’
4. Badge > Choose the desired location.
5. Save changes.

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

Enable reCAPTCHA Within Elementor

1. Elementor > Settings > Integrations.
2. Click on the ‘reCAPTCHA V3’ link and follow the instructions.
3. Input your reCAPTCHA keys and optionally adjust the ‘Score Threshold.’
4. Save changes.
5. Test your contact form to ensure reCAPTCHA is functioning.

Form Submissions

Elementor > Settings > Features > Form Submissions

Elementor forms are set to collect submissions by default so that you can view the form submissions sent from the Single Listings. From there, you can view and do several things.

• Identify the sender’s email.
• Identify the exact form that was used. (Note: If you click the form link, it will take you to the edit screen for your form template.).
• Identify the Single Listing where the form was filled out. (Note: If you click 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 that they can see the number of potential leads coming through their contact form.).

Regulations

One important note is that depending on your website, where your business operates, etc., collecting this information may be frowned upon and require you to update your privacy policies.

Elementor’s Note Regarding GDPR:

“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

1. Uninstall the Contact Form 7 plugin.
2. Edit each Listing Type where you’ve used the Contact Email field with Contact Form 7.
3. Set the Contact Email field to optional so the Listing owner is not forced to add a different recipient.
4. Add a description to the Contact Email field, educating your users regarding when this field should be used.
5. Single Page > Content & Tabs > Remove the old Contact Form block.

Note: If you know that you’ll only ever want the Listing emails to go to the Listing owner’s account email, you can completely remove the Contact Email field, but you may leave it in place to give your users more options.

Video Tutorial