If you’re looking for further tutorials to learn Elementor, feel free to browse the other lessons (from the top menu on this page) or get in touch with any questions and I’d be glad to help.
Password Protected Forms For Elementor
The video below walks through how to create a password protected form or downloaded PDF inside Elementor. By password protecting content, you have the ability to lock certain access to users who might want to proceed to the next step without entering their name and email (for example). This tutorial uses the following tools:
- Elementor Shortcode
- Gravity Forms Plugin
(opens to Gravity forms website for advanced code, not necessarily needed in this tutorial)
(you will need this snippet of code later, replace “1” with your form ID. Only replace the number, keep the quotation marks)
Oops! We could not locate your form.
Technical-Assumptions
The following information, and associated video above, assumes a few things. The first being that you already know how and what WordPress plugins are. If you do not yet know about WordPress 3rd party plugins (both free and paid versions) or how to navigate the dashboard area of WordPress, I highly recommend asking for help as it will save you a mountain of time.
Why Use Gravity Forms?
Personally, The one feature missing from Elementor forms is the ability to have conditional logic inside their form fields. If you’re not familiar with website or form conditional logic, it’s basically the capability to create a followup action or step based on the user’s response or input on the previous stage.
Gravity forms are capable of integrating into most WordPress websites, the best part is that they have their own form builder to make it fast and easy to build your own unique forms.
step 1.
Install Gravity Forms To Your Elementor Website
First step is to install Gravity forms to the backend of your website. If you are wondering where to learn more about and purchase Gravity forms, click the button below.
It’s important to note that I am in no way associated with Gravity forms, aside from being a fan of their software.
step 2.
Create a New Form
If you are watching the video above, please note that this is not a full tutorial on Gravity forms, yet a speedy tutorial on how to password protect your forms inside Elementor.
Once your Gravity Forms plugin is installed, it’s time to create a new form in the WordPress dashboard. The screenshot below shows where along the left-panel navigation you will find the new form button. (you can also click into the Gravity Forms tab and click the ‘add new button’)
Once you have created a new form, you will be brought to a form editing screen.
The new screen you will now see will ass you to Title and (optionally) add in a form description. For now, I have skipped the form description as this is really only helpful if you want the form description to display on the page.
Why might you skip the form description? Good question. Gravity forms does a great job with forms but it comes with their own styling and text format by default. Changing these can be as easy as going into the form settings but it’s easy enough to add in a text widget right above or below the form when editing your page with Elementor.
For now I have labeled my form Password Form.
step 3.
Set Form Password
Now that we have titled our new form, we need to set the password. Remember, this password is going to be required for any site visitor in order for them to proceed to the next page or download a piece of content (the action is up to you).
Navigate to the form settings, located in the top section of your new form builder.
After navigating to your form settings you’ll see a new screen reload. Scroll down the page until you see a section that says ‘Form Button.’
By default you will see no checkmark underneath the conditional logic. Go ahead and enable this by clicking inside the box and you will see a new dropdown list of settings appear.
This is where we will set our form password. In the screenshot below I’ve set the password to variations of ‘ABC.’ It’s important to account for user-generated variations. Remember, people may not know what the password should or should not be all caps, lowercase, etc.
I recommend setting multiple variations of your password to account for different user behavior. I’ve simply placed in name, email and code. The code field will be where the user inputs the ‘abc’ code in this example to proceed to the next step.
step 4.
Finding Gravity Forms Shortcode For Elementor
Now that we have our form titled, password enabled and the form field have been configured as you wish it’s time to embed the form to our page.
There’s a few different ways to do this within the WordPress environment (gravity forms and wordpress) but we want to specificaly place this within our elementor page builder. The best way to do this is through what is called shortcode. Shortcode is generally a placeholder for a larger file, think of it as a code-shortener for specific 3rd party tools. Shortcode is widely accepted by WordPress and Elementor as integration within marketing and 3rd party tools need to talk with each other behind-the-scenes.
Now if you aren’t familiar with shortcode or Gravity forms yet, I’ll link to a documentation article from Gravity Forms — this is where you will actually find the shortcode. Typically shortcode is built in, customized to the needs of the website but here’s a snippet that will get you up and running (the video goes through exactly how to change it to your needs as well).
Copy This Shortcode:
Oops! We could not locate your form.
It’s important to note that you will need to replace the form ID in this shortcode above. This will be specific to your form but most likely if you have never created a gravity forms form before it will be “1”
To find your gravityform id, navigate to your list of forms within WordPress and check the first column ID. In the case of this form, the ID is 47 in the screenshot below.
step 5.
Embed Form To Page Using Shortcode
It’s time to embed your found/created shortcode to your Elementor page. Navigate to the Elementor widget library (top left of most pages) — if you need help finding this, feel free to get in touch and I’d be glad to help walk you through this.
Click and drag the shortcode widget to your placement of choice on the page.
Embed the shortcode from above (where it says copy this shortcode from above, remember to replace the form ID number with YOURS) into your shortcode’s content area.
If you’ve followed the steps and video above, you should see something like the form below (the form fields may vary depending on what you have built in). The main point to note here is that the submit button is missing and will only show if the code field is ‘abc’ or whatever you have set your password to be.
