Web forms are one very useful and nifty feature in Keap. Web forms are easy to create, and you can collect variety of information on your site using web form. In this tutorial, you’ll learn how to create a web form in Keap and allow it to autofill logged in users information using Memberium. Don’t worry, its very easy and doesn’t involves you to have ninja coding skills.
Let’s first take a look at what we’re trying to do here. As you can see in the below screenshot, the fields like Firstname, Lastname, Email and Phone are autofilled, and the user won’t have to actually type in these details. This is very handy when you don’t want your users/members to type in repetitive information.
Creating a web form in Keap
The first step would be to create a web form in Keap if its not already created. If you’ve already created, or have a web form ready then you can use the existing one also.
To create a new web form, login to Keap, go to Marketing and click on Campaign Builder and then select your campaign. Drag and drop the “Web form submitted” goal to the canvas, and then double click on it and start creating your web form. You can find a detailed guide on creating a web form from the official site here.
Once the web form is ready with all the fields, text, image and such elements added to it, it’s time to add/embed this to your WordPress site.
Adding the web form on your WordPress site
Go to the “Code” tab in Keap, click on “HTML code (unstyled)” and then copy the complete code.
Next, navigate to your WordPress page and paste the complete code.
You’d now need to make a few minor changes in the code.
FirstName example:
For example, if you’d want to autofill the FirstName, then you need to find this line in the code:
<input class="infusion-field-input" id="inf_field_FirstName" name="inf_field_FirstName" placeholder="First Name *" type="text" />
And add value=”[memb_contact fields=FirstName]” at the end of the code, but before the closing bracket.
So now your code will look like:
<input class="infusion-field-input" id="inf_field_FirstName" name="inf_field_FirstName" placeholder="First Name *" type="text" value="[memb_contact fields=FirstName]"/>
Same way, you need to find and replace all the fields with Memberium shortcodes.
Email example:
Find this:
<input id="inf_field_Email" class="infusion-field-input" name="inf_field_Email" type="text" placeholder="Email *" />
Change it to:
<input id="inf_field_Email" class="infusion-field-input" name="inf_field_Email" type="text" value="[memb_contact fields=Email]" placeholder="Email *" />
Likewise, you can make the changes for LastName, Phone, and your custom fields fields also.
Bonus Tip: You can find Keap field names from this page.
Alternative Method: Using [memb_update_form] shortcode
If the above method seems complex to you, and if you’re searching for something simple then you might want to try out our [memb_update_form] shortcode.
With this shortcode, you can create a simple form which will allow your members to update their Keap contact fields. For example, you can create a Profile page, My Account page, etc which will allow your users to update their contact information. And yes, it can have information auto filled!
Take a look at the documentation of [memb_update_form] for an example.
Wrapping up!
Keap web form is very useful when it comes to creating surveys, forms, or wherever you want input of your users/members. Now with autofilling their information by fetching from Keap, the forms are much more intuitive as your users won’t have to type in their every detail (thereby, saving their precious time). It will automatically have their personal information like name, email, phone, address, etc autofilled.
So go ahead and give this method a spin!
