Do you want to create a user-friendly frontend user registration in WordPress? Do you wish to use Contact Form 7 to develop a custom WordPress user registration form? This post will explain how to utilize the Contact Form 7 plugin to construct a WordPress frontend user registration form.
Image by Freepik
How to Create a Contact Form 7 User Registration Form?
If you want to use the Contact Form 7 (CF7) plugin to build a user registration form, you’ll require the Contact Form 7 user registration extension. To automate CF7 form workflows, you could use the Tablesome plugin, which is a Contact Form 7 automation plugin.
Using Contact Form 7 and Tablesome, we will build a WordPress user registration form.
We’ll use Contact Form 7 to create a custom user registration form, and then use Tablesome to create a User Creation workflow that will be triggered when the form is submitted.
Installing and Activating Contact Form 7 plugin
If you have already installed the CF7 plugin you can skip this step.
- Login to your WordPress dashboard
- Go to Plugins → Add New
- Then search for “Contact Form 7” and the click ‘Install’
- After installation activate the form plugin
Create a custom User Registration Form
- To create a new form, go to Contact → Add New
- Give the registration form a suitable title and then add the necessary fields for your user registration form in the form editor
- WordPress has two obligatory fields when creating a user: username and email, so your form should have them
- Other WordPress User Profile fields, such as Nickname, Display Name, etc., could be added.
- If you want to get some other user details such as House Address, Phone Number, etc., you could create these form fields. These form field can be stored as User Metadata (user_meta)
- Then ‘Save’ the form
User Registration Contact Form 7 Template (Contact Form 7 registration form code)
Here is a sample Contact form 7 template for user registration.
<label> Username [text* username ] </label> <label> Email [email* your-email] </label> <label> First Name [text first-name] </label> <label> Last Name [text last-name] </label> <label> Nickname [text Nickname ] </label> <label> Display name [text last-name] </label> <label> Biographical Info [textarea bio-info] </label> <label> Address [text your-address] </label> <label> Phone No. [number phone-number] </label> [submit "Submit"]
You can rapidly construct a Contact Form 7 user registration form on your website by just copying and pasting this code.
Depending on your needs, you can change, delete, or add new form fields.
This is how the front-end registration form will appear.
Create a WordPress User Registration Page
Now that we have created the user registration form using Contact Form 7 plugin we have to add it to a user registration page.
- Copy the shortcode of the CF7 form that we have just created
- Go to Pages → Add New
- Give this registration page a title
- Add a Shortcode block to the page and paste the form shortcode
- Then add other content that you would want to have in the user registration page and the publish it
Setting up User Registration Workflow with Tablesome
Now that the form is ready we have to setup the user registration work using the Tablesome plugin. You have to download and install the Tablesome plugin to your site. To download the plugin file you can start a Tablesome free trial by giving the required information.
- After installing and activating the Tablesome plugin, go to Tablesome → Create New Table
- Give this workflow a good title
- Under ‘Workflows’ you will have Trigger 1 section, here select CF7 Integration
- Select the ‘On Form Submit (CF7)’ trigger and select the user registration form
- Then under Action 1, select the action WordPress Integration and then choose the ‘Add User(WordPress)’ action
- Then you can Enable or Disable user notification email
- Below you will find the Map User Field section, here you can map the form field to the available user fields
- Username, User Email, and User Role are the minimum necessary fields for a user to be created in WordPress
- You can select the user role for the newly created user
- You can also map other available user profile fields and User Metadata
- After finishing the field mapping you can save the workflow by clicking ‘Save’ button
How to set password:
Tablesome does not collect password, in order to user set a password an email consisting of an auto-generated link will be sent to the users and users can set the password in the corresponding page.
With Tablesome you can also setup workflows to redirect form submitter’s to another page and also save the form entries to the table.