Create a Client Form for Your WordPress Agency - Using Elementor and a Contact Form Plugin
Tags: wordpress
Published: 2020-11-09 02:28:53

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 <strong>create a client form for your WordPress agency using Elementor and a contact form plugin</strong>.

<!--more-->

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.

<h2>Your General Contact Form vs. Your Specialized Contact Form</h2>

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

<img class="aligncenter" src="https://i.imgur.com/IwgCgo2.png" alt="The client contact form on a WordPress website." width="683" height="402" />

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:

<img class="aligncenter" src="https://i.imgur.com/CB1MYnA.png" alt="The specialized client form for a WordPress agency" width="1280" height="1345" />

For the full image of the client form, please visit <a href="https://imgur.com/92vIvIO">here</a>.

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

<ul>

   <li>The client needed to book an appointment with you using your Calendly app</li>

   <li>The client needed to fill out the above client form</li>

</ul>

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

<h2>Step 1: Install the Plugins</h2>

A great (and free) contact form plugin that I would recommend is WPForms. You can <a href="https://gretathemes.com/install-wordpress-plugin/">install and activate the plugin</a> by going to your <strong>Dashboard</strong> &gt; <strong>Plugin</strong> &gt; <strong>Add New</strong>.

<img class="aligncenter" src="https://i.imgur.com/HyGLmvy.png" alt="Install WPForms plugin on the WordPress website" width="1350" height="657" />

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

<img class="aligncenter" src="https://i.imgur.com/6yF0Gil.png" alt="Install ELementor page builder plugin on the WordPress website" width="1349" height="657" />

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

<h2>Step 2: Create a Page for your Client Form in Elementor</h2>

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.

<strong>Note</strong>: The contact form is going to be done later in Step 3.

<h3>Create a Canvas Page</h3>

The first thing you'll notice about the data-gathering client form is that there is <strong>no header or even footer</strong>. 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 <strong>create the page in Elementor</strong> and ensure that the page type is <strong>Canvas</strong>.

<img class="aligncenter" src="https://i.imgur.com/YbIuaqc.png" alt="Create an Elementor page with Canvas type" width="975" height="633" />

<h3>Create a Header for the Page</h3>

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 <strong>Client Reviews</strong> section.

<img class="aligncenter" src="https://i.imgur.com/VeWWDVR.png" alt="Include a small header on the client form of the WordPress agency" width="1280" height="663" />

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!

<h3>Create a Header for the Client Contact Form</h3>

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

<img class="aligncenter" src="https://i.imgur.com/rjmOnpH.png" alt="Create the WordPress agency's client form header " width="970" height="616" />

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.

<img class="aligncenter" src="https://i.imgur.com/MNFtzr8.png" alt="Make subheaders of the WordPress agency 's client form have a lower than average weight" width="959" height="458" />

<h3>Create a Footer for the Page</h3>

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.

<img class="aligncenter" src="https://i.imgur.com/C29H5Zr.png" alt="Link to the review and the About page on the client form footer" width="1279" height="627" />

<h2>Step 3: Create the Contact Form using WPForms Plugin</h2>

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 <a href="https://gretathemes.com/add-contact-form-p2-wpforms/">here</a>.

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

<img class="aligncenter" src="https://i.imgur.com/JGuA94A.png" alt="Add a new contact form in WPForms" width="1278" height="577" />

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

<a href="https://github.com/wpmetabox/tutorials/blob/master/client-form/wpforms-form-export-09-23-2020.json">Here</a> is the link to the <strong>JSON</strong> file.

In order to import it just upload it here:

<img class="aligncenter" src="https://i.imgur.com/ksj6795.png" alt="Upload the json file to add the contact form" width="1278" height="625" />

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 <strong>Embed</strong> and then on the <strong>Use a shortcode</strong> option.

<img class="aligncenter" src="https://i.imgur.com/fTDpgsI.png" alt="Get the shortcode of the client form in WPForms" width="1278" height="631" />

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

<h2>Step 4: Create the Right Column Quote and Put Your Image on It</h2>

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

<img class="aligncenter" src="https://i.imgur.com/Cfc5JRM.png" alt="Create the Right Column Quote for your client form using Elementor" width="1280" height="673" />

<h3>Create the Blockquote</h3>

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 <strong>Edit Blockquote</strong> to <strong>Quote</strong> 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.

<h3>Create the Photo and Signature</h3>

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 <a href="https://www.docsketch.com/online-signature/">DocSketch online signature generator</a> to make this signature.

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

<h2>Conclusion</h2>

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](https://gretathemes.com/create-client-form-wordpress-agency-elementor-contactform/).

[](https://medium.com/gretathemes?source=post_sidebar--------------------------post_sidebar-----------)