Elementor

Real Estate Quote Form with Elementor WordPress

If you are a real estate agent, looking forward to collecting information from potential buyers, so you can send them offers to properties which is perfect for them then what’s the best way to do it? Obviously you cannot go to each person with a paper form and ask them to fill it up. 

Nowadays, the best way to collect information from potential buyers or sellers is by having a website with an online form. You can collect some important information such as their contact information, name, email, phone number, property requirements etc. Then either call them to discuss about the property you have to offer or send them emails containing offers to various properties which are perfect for their needs.

Elementor is an awesome WordPress page builder, if you are using WordPress for a while then you probably have downloaded and used it for writing your blogs or making your pages. If you didn’t then I would suggest you install and use it. In this blog post, I am already assuming that you are familiar to Elementor and the pro version of Elementor. One of the most important element of elementor pro is it’s form element. 

Using the form element of Elementor Pro you can make a completely custom form without using any extra plugins, directly using the superior Elementor form builder. Plus not only you can make the form to send the information directly to your email address, but you can also integrate it with mailing services like MailChimp, ActiveCampaign etc. So you can store all the information and send bulk emails when you need to send any valuable information to your prospects. But this blog is mainly about making the form and sending the information directly to your email address. Also integrating captchaa so you do not get spammed by bots. 

Main Goals

The main goal in this blog post would be to make a custom Real Estate Quote form similar to the one in the right hand side. I have made the site in the right using Elementor in WordPress. In this blog we will be making the form a custom quote for buying an apartment.

  • Special fields: no. of bedrooms, no. of bathrooms, area and total budget for buying the property.
  • Send the information to a particular e-mail address
  • Recaptca V3 to protect from spams
  • Designing the form with good looking layout, boxes, colors etc.
  • Custom message after form submission.

STEP 1: Create a New Page

Let’s break down the process into several steps so it is easier for you to follow. The first step is really simple, we just need to create a new page, edit it with Elementor and then simply choose the “Elementor Canvas” page template, so that will remove your theme header, footer, sidebar or any other distractions. If you have any issues, then please scroll up and watch the video.

STEP 2: Insert the Form Element

The next step for you would be to insert the form Element in Elementor. This is the the most powerful form Element I have seen in a page builder with full drag and drop flexibility. And the most important part of all, IT WORKS! Unlike some other form plugins like WPForms, Contact Form 7, it actually works and sends the winformation to your email address! No BS!

Not only that, you are also get the FULL freedom to design the form and make it look like exactly the want you want and attractive you want! 

You also can customize that to which email address the information will be sent while staying on the same page in the front-end, you don’t have to go back and forth between the WordPress backend and front-end.

STEP 3: Insert Relevant Fields

As we discussed earlier, apart from the Name, Email, Phone and Message, we are also going to insert some specific fields which are going to help you better understand the needs of the prospect and provide them with better offer and chances of you selling a real state property might be higher. Here is a screenshot below of the types of fields which are available in the form element of Elementor. Also below, I have listed out the type of field you have to choose for each. Note: you might know the “select” field as dropdowns.

  • Name: Text field
  • Email: Email field
  • Phone: Tel field
  • Message: Textarea field
  • Number of bathrooms: Select field
  • Number of bedrooms: Select field
  • Area: Select field
  • Total Budget: Select field
  • Features & Benefits: Checkboxes
  • reCaptcha: reCAPTCHA V3

STEP 4: Design the Form

You would need to design the form and the page in which the form is in, so your website and the form looks and feels professional. The web visitors will be more inclined to fill up the form and submit their information. It is difficult to show each design steps by writing it down, so please simply scroll up and view the video to see how I design the form and the page step by step.

STEP 5: Set up the reCAPTCHA V3

If you are setting up a form without any SPAM protection, then get ready to receive tons and tons of spam messages. I remember setting my contact form in my websites using contact form 7. All I got for 2 years was spam messages. I remember asking a real person whether he was a robot or human, LOL. But the thing is, you will need to setup reCAPTCHA V3 to prevent spams on your website. In Elementor it is absolutely easy to setup.

Just make sure that you are logged into your gmail account in your browser. Because the reCAPTCHA V3 support is provided by Google. Please follow the steps shown in the screenshots below.

STEP 6: Setting up the email address

After doing all of these, here comes the main part. We would now need to configure that to which email address we want to receive the information to. It works perfectly! So here are the screenshots below.

Make sure the action is set to “Email”

Set your email address to receive the information in that email address

Conclusion

So in this blog we have learned how to make a simple,beautiful and an effective form using Elementor Pro page builder. This form will help a real state agent to collect information about future prospects. Collecting specific information from the prospects such as number of bedrooms, total area of the apartment, features needed etc. helps the agent to prepare a better offer for the prospect which they cannot miss out from.

My Elementor Pro Services

  • Desiging Websites & Landing pages with Elementor
  • Making full websites, or rebuilding existing websites with Elementor
  • Making custom header, footer, blog page & custom blog posts with Elementor
  • Making existing Elementor landing pages mobile responsive


YES! I need help with Elementor

Tasvir Mahmood

Recent Posts

Generate a custom weight loss diet for free using ChatGPT

In our pursuit of a healthier lifestyle, many of us grapple with weight issues. The…

1 year ago

Install WordPress in domain, subdomain or directory using NameCheap Hosting cPanel

If you're seeking an effortless way to set up a WordPress website, look no further.…

1 year ago

How to add subdomain using Namecheap hosting cPanel

In this blog post, we will explore the process of adding a subdomain using Namecheap…

1 year ago

Convert webp format images to png or jpg using GIMP photo editor

Step 1: Introduction A few days ago, I stumbled upon a Facebook post filled with…

1 year ago

Make Elementor inherit theme fonts, colors and settings

In this blog post, we will explore how to ensure consistency in fonts, font sizes,…

1 year ago

WooCommerce Price and Category Product Filter for Elementor Shop Page

In this blog post, we'll delve into the process of adding a product filter in…

1 year ago