Elementor

Would you like to create an affiliate registration form using Elementor? With AffiliateWP’s Elementor integration you can do just that, all without leaving the Elementor page builder.

This tutorial will show you how to set up the Elementor integration and create an affiliate registration form.

In This Article

  1. Enabling the Elementor Integration
  2. Adding the Form Widget and Customizing Fields
  3. Enabling Affiliate Registration
  4. Viewing an Affiliate’s Submitted Data

Enabling the Elementor Integration

To enable support for Elementor, go to AffiliateWP » Settings » IntegrationsEnable the Elementor checkbox and click Save Changes.

Enabling the Elementor integration

Adding the Form Widget and Customizing Fields

While editing your page with the Elementor page builder, locate the Form widget and insert it on to the page.

Inserting Elementor's Form widget

Once the Form widget has been inserted, a basic form will appear and the widget’s editing panel will be displayed.

A basic form after inserting the Form widget

Start by customizing the fields you’d like to show on your affiliate registration form.

For example, you might add some fields like the following:

Name
Type: Text
The affiliate’s name.

Username
Type: Text
The affiliate’s desired username.

Email
Type: Email
The affiliate’s email address.

Payment Email
Type: Email
The affiliate’s payment email for systems such as PayPal, Moneybookers, or others.

Website URL
Type: URL
A website where the affiliate intends to promote your site from.

How will you promote us?
Type: Textarea
How the affiliate intends to promote your business.

Password
Type: Password
The affiliate’s password for their new account.

After you have finished adding/editing fields and customizing the styling it might look something like the following:

Editing an Elementor Form widget to create an affiliate registration form

Enabling Affiliate Registration

Now we need to tell AffiliateWP that your form is an affiliate registration form.

Click on Elementor’s Actions After Submit section.

The Form widget's Actions After Submit section

Once opened, click into the Add Action field (or alternatively, click the + icon) and select AffiliateWP from the list.

Adding the AffiliateWP custom action

Once the custom action has been added, a new AffiliateWP section will appear in the panel below.

Click to open the AffiliateWP section and click the Enable Affiliate Registration toggle switch to turn on affiliate registration.

Enabling the Affiliate Registration toggle switch

Next we need to map the fields. This lets AffiliateWP know which fields need to do specific tasks. We recommend mapping as many fields as possible.

To map the fields, choose a field from the select menu that matches the label on the left.

Mapping form fields to AffiliateWP

For example, when the Username field is mapped, the value of this field will be used for the affiliate’s WordPress username.

When the Password field is mapped, AffiliateWP will use that for the affiliate’s WordPress account password.

Name

The selected field will be used to populate the user’s First Name and Last Name fields on the user profile screen.

Username

Used for the affiliate’s WordPress Username.

Account Email

Used for the affiliate’s WordPress account email.

Payment Email

Used for the affiliate’s Payment Email (if needed). This is shown on the affiliate’s edit screen within AffiliateWP.

Website URL

The Website URL is shown while reviewing an affiliate. It’s also shown on an affiliate’s edit screen and on their WordPress user profile page.

Promotion Method

The Promotion Method is shown while reviewing an affiliate. It’s also shown on an affiliate’s edit screen.

Password

The Password field is used to generate a password for the affiliate’s WordPress user account. If no password field is mapped, a password will be automatically generated for the affiliate.

That’s it! You now have a custom affiliate registration form, created entirely in Elementor:

Custom affiliate registration form created in Elementor.

Viewing an Affiliate’s Submitted Data

While reviewing an affiliate’s application, you can see all the values from AffiliateWP’s mapped fields.

If your affiliate registration form has unmapped fields, they will be displayed in an easy to read table. Approving, or rejecting affiliates in AffiliateWP is a breeze.

Viewing an affiliate's submitted data

If you want to review affiliate applications before affiliates become active, enable Require Approval from AffiliateWP » Settings » Affiliates.

After an affiliate has joined your affiliate program, their originally submitted data is always available. To see this, navigate to the main Affiliates screen at AffiliateWP » Affiliates and click on an affiliate’s name. All data mapped to AffiliateWP fields, and any custom data, will be shown on the screen:

Viewing an affiliate's submitted data on the Edit Affiliate Screen