Contents
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.
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
Select HTML CTA
Insert your form shortcode that was copied in the last step.
My form didn’t look that great right out of the box so I added some custom css to style it.
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.
