How to make a sticky contact form on your WordPress website


A sticky contact form can be a great way to get your website visitors to contact you quickly. It’s proven that sticky widgets like this can increase leads to your business. So in this article I will show you how to add a sticky contact form to your WordPress website. WordPress has a wide range of third party plugins that can help you create your sticky contact form.

Step 1. Choose a WordPress Contact Form Plugin.

The first step in creating your sticky contact form is by choosing a contact form plugin. For this example I’m using Gravity forms as my WordPress form builder.

how to make a sticky contact form

Step 2. Create Your Form

For this form, I will create a basic contact form to collect their name, email and message.

Step 3. Get WP CTA Pro

To create the sticky effect for our form, we will use WP CTA Pro. WP CTA Pro is a cta builder where you can place your sticky contact form on really any side of your website without any code.

Step 4. Get the Form shortcode

For gravity forms there is a shortcode that you can use to insert directly into WP CTA PRO.

[gravityform id="1" title="false" description="false" ajax="true"]

Replace the “id” with the id of the contact form you created. You can find the id from the gravity forms dashboard

Step 5. Create a HTML CTA

Once WP CTA(free version) and WP CTA PRO (both versions required) is installed you can start creating your CTA. For this tutorial I won’t get into the full details on how to create a CTA but I will include some of the important points.

Add a new CTA
how to create a sticky contact form in wordpress with wp cta pro

choose a html cta when creating a sitcky contact form in wordpress

Insert your form shortcode that was copied in the last step.
how to create a sticky contact form in wordpress with gravity forms

My form didn’t look that great right out of the box so I added some custom css to style it.
you might need to add some custom css when creating a sticky contact form in wordpress

Once you are done click save and then go to the page where you created the CTA

Step 6. Test your cta and make edits

Go to the page where you created your CTA (this option is within WP CTA PRO) and click refresh to see the updated CTA aka your new sticky contact form! If it’s not exactly how you wanted then go back to WP CTA Pro settings and make some edits. If your CTA is not being updated then try clearing your cache and this can be a common issue with WordPress.

The Finished Product

Example 1 – CTA on the right side of the page

Before clicking the toggle button.

After clicking the toggle button.

Example 2 – CTA on the bottom of the page to make it look like a chatbox

Before clicking the toggle button.

After clicking the toggle button.

I hope you enjoyed this article and it helps you easily create a sticky contact form. If you have any questions, please leave a comment on this page.

Related Articles


Leave a Reply

Your email address will not be published. Required fields are marked *

Free SEO Audit

Have your website reviewed by Ryan and find out how your site is ranking and what's holding it back from ranking in the first position.