DEV Community

Cover image for Create a Client Form for Your WordPress Agency - Using Elementor and a Contact Form Plugin
GretaThemes
GretaThemes

Posted on • Updated on • Originally published at gretathemes.com

Create a Client Form for Your WordPress Agency - Using Elementor and a Contact Form Plugin

If you own a WordPress development business and are currently getting inbound internet inquiries, you can streamline your sales process and enhance your services by using an effective client form. So, why is it necessary to have a good client form from a psychological view? And How to implement this in your business to 3x the amount of revenue? I am going to share with you the technical knowledge of how to create a client form for your WordPress agency using Elementor and a contact form plugin.

There are a number of elements I'm going to point out. But first, I wanted to explain why to create a specialized client form, and why you need this kind of contact form, too.

Your General Contact Form vs. Your Specialized Contact Form

When people come to a website and scroll down, they will see a fairly standard contact form that has probably been seen a million times before on many websites (not just WordPress sites).

The client contact form on a WordPress website.

When someone makes an enquiry on your website, you have to think very carefully about what your next step will be. Depending on how you respond, you will either be seen as 'just the web guy' or you will be seen as someone who can bring the client's goals to fruiting using the power of the internet. As you can imagine, the specialized client form is going to help you earn a lot more.

And this is the specialized client form that we're going to create in this post:

The specialized client form for a WordPress agency

For the full image of the client form, please visit here.

When a client would email you using this client form, you would reply by stating the following

     
  • The client needed to book an appointment with you using your Calendly app
  •  
  • The client needed to fill out the above client form

Let's see how to create this form while we also discuss the elements that help make this form so effective.

Step 1: Install the Plugins

A great (and free) contact form plugin that I would recommend is WPForms. You can install and activate the plugin by going to your Dashboard > Plugin > Add New.

Install WPForms plugin on the WordPress website

Next, install and activate the free Elementor page builder with the same method.

Install ELementor page builder plugin on the WordPress website

After having all the needed tools, we will start right away!

Step 2: Create a Page for your Client Form in Elementor

We have to create a page template that includes your client contact form. This page has this structure from top to bottom: page header - contact form header - contact form - page footer.

Note: The contact form is going to be done later in Step 3.

Create a Canvas Page

The first thing you'll notice about the data-gathering client form is that there is no header or even footer. The entire purpose of the page, when I send the link to the client, is to get the information from the client that I would then use for my initial consultation.

Therefore, the first thing we need to do is to create the page in Elementor and ensure that the page type is Canvas.

Create an Elementor page with Canvas type

Create a Header for the Page

Though there is no traditional header and footer, I did want to include a small header that would tell them the website they were on. You will also note that the link at the top header actually goes to my Client Reviews section.

Include a small header on the client form of the WordPress agency

This way the client knows where they are. Should the client hesitate, clicking on the link will give them the confidence to proceed?

This is done through a simple section with a background for your brand color followed by a text field. Pretty straightforward stuff!

Create a Header for the Client Contact Form

The next step is the client form header. Here I've used the Lato font at 60px when editing.

Create the WordPress agency's client form header

The subheading was the same font only at 24px. Also, the weight on the subheader is 300. You can manually make subheaders have a lower than average weight so the top header stands out more.

Make subheaders of the WordPress agency 's client form have a lower than average weight

Create a Footer for the Page

Next, add a footer, which is just a section with the same background as the header. In this case, I have 2 columns. Not only do I link once again to the reviews to gain trust, but I also link to the About page where I talk more about myself.

Link to the review and the About page on the client form footer

Step 3: Create the Contact Form using WPForms Plugin

The next step is creating the contact form. I won't go too much into this as a contact form builder is fairly straightforward. For further details about how to use this contact form plugin, we already have a tutorial here.

There it's just a matter of dragging and dropping the contact form fields.

Add a new contact form in WPForms

Luckily, you don't have to create the contact form yourself - you can import the JSON file which I have uploaded in the link below, and import it by going to WPForms > Tools > Import and populating your forms.

Here is the link to the JSON file.

In order to import it just upload it here:

Upload the json file to add the contact form

One thing to note: once you have imported the contact form you'll need to get the shortcode. After you've finished editing the contact form, simply click on Embed and then on the Use a shortcode option.

Get the shortcode of the client form in WPForms

Then, simply copy/paste that shortcode into your page.

Step 4: Create the Right Column Quote and Put Your Image on It

One thing you want to do with the client form also is to maintain your positioning, add character and life to your client form.

Create the Right Column Quote for your client form using Elementor

Create the Blockquote

The first part is the blockquote. This is a standard Elementor element. However, there are a couple of points about this.

You'll notice that I made the quote itself red and big. You can set the Edit Blockquote to Quote section, and set the color to red and the size to 1.

As far as the text box itself, you want to remind the client why they are filling out the client form and how this will help them. You'll also notice that I thank the user for clicking through to the page from the link in the email.

Create the Photo and Signature

The next element is simply a photo of you and a signature in the client form. A signature adds a touch of class and makes the section sound more official. It may seem silly but it does look better than simply writing your brand name, and again you want to make your name brand as strong as possible at this stage.

I used the DocSketch online signature generator to make this signature.

And that's the last step of creating a client form. Remember to save and publish your client form.

Conclusion

Once this client form is complete you are ready to put it to work. Now all you have to do is wait for your next online enquiry. When this happens, you need to send an email to the client requesting them to fill out the client form.

Hope this client form works for you and helps you position yourself as the undisputed expert prior to your meeting! Good luck!


The publication at GretaThemes.

Top comments (0)