Author 诗语

Honeypot field in User Registration Form for Elementor

In UAE』s version 1.18.0, we introduce the User Registration Form widget for Elementor having the Honeypot field to fight spammers.

Here we provide a Honeypot field, which is a better way than to fight pesky spammers rather than using reCAPTCHA.

Table of Contents

What is Honeypot?Advantages of using Honeypot?How to Setup Honeypot in User Registration Form widget?Example: How to Create Smarter Honeypot with UAE?

What is Honeypot?

Honeypot field helps you fight spammers, by adding a hidden field only visible to spambots. This field helps admin identify whether the user is a spambot and not a user.

When a spambot fills in honeypot field, the form is rejected as spam. Thereby, the spambot will get stuck and won』t be able to submit the form.

Therefore, Honeypot is a great alternative as it will not bother users to go through maths and Image problems to register on your website. And the valid users will be able to register with ease and convenience.

Advantages of using Honeypot?

Prevents spambots from attackingHelp understand future attack preventionHelps focus on the malicious users making the investigation easierOne-click setup

How to Setup Honeypot in User Registration Form widget?

To set up the Honeypot field in the User Registration Form widget you need to create a page and Edit with Elementor.

After that, you will just need to drag and drop the widget in the Elementor editor.

Next, in the Content tab > Form Fields add a Form Field and select the Type as Honeypot.

That』s all, now update the page and your User Registration Form is now protected from the Spammers.

Example: How to Create Smarter Honeypot with UAE?

Using the User Registration Form, you can create smarter registration form having multiple Honeypot Form Fields.

This ensures, that even the smartest spambot will not be able to get access to your website.

All you need to do is place the honeypot fields in the random order in your formAdd multiple Honeypot fields so that it has higher chances of stopping spambots

You are now ready to create a spam-free registration form using the User Registration Form widget and Anti-Spam Protection features provided. We also provide Google reCAPTCHA support to our widget.

UAE Saved Sections

The Ultimate Addons for Elementor allows you to save sections with UAE widgets that can be used later. This feature of the Ultimate Addons works with Free Elementor as well as Elementor Pro.

In this article, we』ll see where you』ll find these saved sections and how you』ll get their section ID.

Where Will I Find a UAE Saved Section?

You』ll find the saved sections under

Elementor -> My Templates -> Sections

How Can I Get the Section ID?

Edit the section you wish to get the section ID for (Refer to the above screenshot). You』ll find the section ID in the URL as shown in the screenshot below.

In the above screenshot, we see that the section ID is 664.

Introducing How-to Schema Widget for Elementor!

UAE brings for you a brand new widget that now allows creating How-to pages or articles. And on top of it, you will have Schema Markup added to the page, without a single line of code.

Before diving in, let』s take a quick look at the features we can utilize in this widget –

Automatic Schema Integration as per latest Google GuidelinesQuick and Easy SetupHelp with Default textsOverall Customization options

How to Setup/Configure How-to Widget?

Let』s see how quickly we can setup and Configure the How-to widget –

Start with dragging-n-dropping the widget into the Elementor editorEdit or remove the default Strings as per your requirement to the Title and ContentStyle the widget as per your website style layoutReview and verify the page on Google Structured Data Testing ToolAnd that』s it your HowTo page has Schema added to it.

How to Style the How-to Widget?

We have provided various styling options to style the widget so that you can make it look similar to your page style or make it unique –

You can navigate to the Style tab of the How-to widget and find all the options for specific sections.

How to Verify HowTo Schema Added to Your Page?

Google provides a Structured Data Testing Tool. Visit this link – Tool Link.

There you will find two options to test your Structured Data containing Schema –

You can either copy your page URL which has the HowTo widget on it and add it in the Page URL section or copy your page』s source by pressing ( CTRL + U ) and Paste it in the Code Snippet section. And press Run Test button below it.

On the next page, you will see detected Schema results – where you will need to find the HowTo schema. If there are no errors or Warnings, your page is ready for Rich Search results to be displayed for Google.

Click on the HowTo schema and you will find the Question and Answers you have provided in the respective Name and Text fields of the Schema Markup.

How to Preview the HowTo Schema Added to Your Page?

Google provides another tool called a Rich Results Test tool. Visit this link for the tool.

Even here you will find two options to test your page』s Rich Results for they would display on Google Search.

You can either copy your page URL and paste it in the URL section or copy your page』s source by pressing ( CTRL + U ) and Paste it in the Code section. And press Run Test URL/Test Code button below it.

The following option – 「Googlebot smartphone/Googlebot Desktop」 is just beside the Test URL/Test Code button, you will have the option to preview in 「Smartphone/Desktop」, you do not require to change here anything. But you can preview your Rich Result in Desktop view too.

Next, you will see a page that says, Page is eligible for rich results. Click on Preview Results and you will see an example of how your FAQs can be viewed on Google Search Results.

Google reCAPTCHA v3 in User Registration Form for Elementor

reCAPTCHA is widely used and one of the most popular ways to prevent your website from spamming and abuse by preventing bots from being able to create users or while logging in.

Here for the User Registration widget, if you choose to use reCAPTCHA to protect your website.

You will need to add reCAPTCHA keys, you first need to get the reCAPTCHA keys from the Google website. We have provided integration with only the latest reCAPTCHA i.e. reCAPTCHA v3.

As the latest version is known to be easy on humans, and hard on the bots. Thereby, reducing user friction while the onboarding process.

reCAPTCHA v3

Step 1: Visit the Google reCAPTCHA site and select reCAPTCHA v3.

Step 2: Add a Label to identify this instance. 

Step 3: Add a domain, e.g. www.your-site-url.com

Step 4: Enter an admin email address or add a new one

Step 5: Accept the Terms of Service and Submit.

Step 6: On Submission, you will be redirected to the next page, from their copy both the Site Key and the Secret Key.

Step 7: Enter these keys in the Settings > UAE > User Registration Form Settings > reCAPTCHA options and click Save Changes. (There』s another field to change the Score Threshold if desired. If you notice bots manage to get around the reCAPTCHA, increase the score ).

Step 8: Add a New Page and Edit With Elementor

Step 9: Drag and drop the User Registration Form Widget

Step 10: Go to User Registration Form > Content > Form Fields and click on Add Item

Step 11: Under Type choose reCAPTCHA v3

Step 12: Choose whether to place the reCAPTCHA badge to the right (bottom of the page), left (bottom of the page), or inline.

Step 13: Click Save

As per the Badge Position set, you will now see the reCAPTCHA badge. Refer to the image shown below for inline reCAPTCHA position.

Similarly, you can see a reCAPTCHA badge on the bottom-left and bottom-right corner of the page when the respective Badge Position for reCAPTCHA is set.

We also have another Anti-Spam protection tool called Honeypot using this you can fight the spammers. You just need to enable the Honeypot field and your form has doubled the protection to fight the spammers.

Filters/Actions for Video Widget

Filters available for Video are listed below.

HELPS MODIFY the offset value.

add_filter( 'uael_sticky_video_viewport', function( $viewport ) {   //Modify the offset here    return $viewport;}, 10, 2 );

Note: $viewport –  The offset value to stick the video.

HELPS MODIFY THE VIDEO URL.

add_filter( 'uael_video_url_filter', function( $url, $id ) {   //Modify the url here    return $url;}, 10, 2 );

Note: $url –  Parameter to be modified in the video URL.

HELPS set a default channel id

add_filter( 'uael_video_default_channel_id', function( $channel_id, $settings ) {
  //Set the channel ID here
    return $channel_id;
}, 10, 2 );

Retina Image Widget for Elementor

Retina Image Widget allows you to add a retina version of the image for high definition screens, removing any need for using other retina plugins or tools.

In this article, we will see how Retina Image widget works.

Key features –

Upload the Retina Image for High Definition screensProvide SVG support for Image or Logo

Like all the other widgets of Elementor, the Retina Image widget can simply be dragged and dropped in the position you want it to appear.

You can then proceed with the various settings that allow you to add the Default Image, Retina Image and display custom caption. Let us take a look at each settings tab of the Advanced Heading widget.

Below are the settings available for the Retina Image widget –

Retina Image

Retina Image: Under the Retina Image section you will be able to add your default Image as well as the Retina Image.

In the same section, you will see other options like setting the Image Size, Alignment, Caption, and Link.

Styling

Under the Style tab, you will see two options –

The Retina Image section will allow you to set the Image width, max-width, and other styling options.

While the Caption section only displays when you have set the Custom Caption in the Content tab.

Introducing Table of Contents Widget for Elementor

Did you notice Table of Contents on long pages or posts providing insight into the contents of the document when you visit a website? Have of thought about adding the same on your website?

With version 1.19.0 of UAE, we now provide the Table of Contents widget. Using this widget from now on, you will be adding a table of contents to your website with ease and convenience.

Here』s the screenshot of how it would look –

Let』s add the same to your website in quick easy steps just like any other Elementor widgets.

Search for the Table of Contents widget and drag and drop it on the Elementor editor.

Now, by default, either you will see a default message asking you to enter a heading on the page below

OR

You will be able to see the H2 headings in the table of contents based on the contents on the page where you have dropped the widget.

You can display different levels of headings based on the h1 to h6 heading tags.

We will see them in detail, but before that let』s take a look at the Key Features of the widget –

Fully Customizable Table Heading and ContentsCollapsible Button to Hide Table』s ContentsList icon style – Bullet / Numbers / None Exclude Specific HeadingSmooth Scroll and Scroll to Top

Fully Customizable Table Heading and Contents

Every section of the widget has been made customizable so that you can give it a feel of your website. That means you will be able to customize the Heading of the Table, Contents. Background, Border, Width, Alignment, Collapsible button, responsiveness, and color.

Collapsible Button to Hide Table』s Contents

Have you ever noticed a lengthy table of contents and you want to skip directly to skip to the content of the post or page? We have taken care of the same, the option is enabled by default and displays a down arrow. This collapsible button is located at the top-right corner of the table of contents.

You just need to style the same as per your requirement. Also, you can replace the icon with text, and separate text for Hide and Show.

List icon style – Bullet / Numbers / None

The list of contents can be styled using some basic icon styles like – Bullets, Numbers, or none.

This will make sure the contents are easy to read at a glance. And while you have hierarchical headings like one heading with an h3 tag and the rest under it has h4 tags, then it will display the list of h4 tags in a hierarchical structure.

Here』s an example of the same –

Exclude Specific Headings

There could be some cases, where you might need to exclude a specific heading of your post or page from the Table of Contents. Let』s say you are displaying related posts on the Post page using a Posts widget.

Here we might need to exclude the headings from the Posts widget, you will simply need to add the following class to the Posts widget under Advanced > Advanced Section > CSS Classes – uae-toc-hide-heading

That』s it! Now the posts widgets』 headings won』t be displayed in the Table of Contents widget.

View the following doc to know all the cases on How to Exclude Specific Headings from Table of Contents?

Smooth Scroll and Scroll to Top

We have taken care of scroll animation so that when a user clicks on a table』s content you will be taken to the respective section smoothly.

You will also be able to control the delay animation while it scrolls to the section you have clicked on.

And Scroll to Top is a button you can enable and clicking on the button would take you back to the Table of Contents.

With Smooth Scroll and Scroll to Top, we have seen all the features of the Table of Contents widget. And there』s nothing stopping you to add a well-designed index to your website』s long pages or posts!

Go ahead and update to the latest version 1.19.0 of UAE for Table of Contents widget and add a customized table of contents to the required pages and posts of your websites!

Frequently Asked Questions about User Registration Forms

We have listed down a few Frequently Asked Questions which you might have while using the User Registration Forms –

1. How Do I Enable/Disable User Registration?

The option to enable and disable the User Registration in WordPress is found under the WordPress Dashboard > Settings > General > Membership > Anyone can register

Note: Make sure this setting is enabled while you are using the User Registration Form widget.

2. How Do I Manage a New User Role on WordPress after Registration?

Managing or assigning a User a pre-defined User Role upon registration can be done from the WordPress Dashboard > Settings > General > New User Default Role

Note: Make sure you select respective User Role based on your website』s User Requirement, while you are using the User Registration widget.

3. How Do I Manage Users on WordPress after Registration?

After the Users are registered successfully on your website, and you would like to update the User Role for few users. To do so you will need to visit the WordPress Dashboard > Users > All Users

From here you can edit the User and update his user role as per your requirement.

Apply White Label Settings from wp-config.php File

By now, we all know how to White Label UAE? It is also known that the white label settings page can be hidden from the dashboard. However, it reappears when the plugin is re-activated on the website.

We were asked whether these white label settings can be hidden permanently. Especially agencies who serve many clients would not want them to know that the plugin or theme used to build their website is a third party white labeled plugin.

Therefore, we』ve introduced a method that will allow you to White Label the plugin and hide the White Label settings – and keep them hidden, no matter what activity the user performs with the plugin or on the website. This means that you can white label the plugin permanently from the wp-config.php file and these settings will not be changed from the WordPress dashboard settings.

To achieve the above scenario we have added a White Label Constants to UAEL from version 1.5.1.

Below is the list for the  White Label Settings and their respective White Label Constants.

White Label SettingsWhite Label ConstantsAuthorUAEL_WL_AUTHORAuthor URLUAEL_WL_AUTHOR_URLPlugin NameUAEL_WL_PLUGIN_NAMEPlugin Short NameUAEL_WL_PLUGIN_SHORT_NAMEPlugin DescriptionUAEL_WL_PLUGIN_DESCRIPTIONReplace LogoUAEL_WL_REPLACE_LOGODisplay Knowledge Base BoxUAEL_WL_KNOWLEDGEBASEKnowledge Base URLUAEL_WL_KNOWLEDGEBASE_URLDisplay Support BoxUAEL_WL_SUPPORTSupport URLUAEL_WL_SUPPORT_URLDisplay Beta Update BoxUAEL_WL_BETA_UPDATE_BOXDisplay Help LinksUAEL_WL_INTERNAL_HELP_LINKSHide White LabelWP_UAEL_WL

How to use White Label Constants?

Step 1 – Open and edit the wp-config.php file.Step 2 –  Find the line /* That』s all, stop editing! Happy blogging. */ and add White Label Constants code just before this line.Step  3 – Below is the sample code for the White Label Constants. You can update the strings as per your requirement.

define( 'UAEL_WL_AUTHOR', 'UL Author' );
define( 'UAEL_WL_AUTHOR_URL', 'https://www.ulauthor.com' );
define( 'UAEL_WL_PLUGIN_NAME', 'UL Plugin' );
define( 'UAEL_WL_PLUGIN_SHORT_NAME', 'ULP' );
define( 'UAEL_WL_PLUGIN_DESCRIPTION', 'UL Plugin Addon for Elementor' );
define( 'UAEL_WL_REPLACE_LOGO', 'disable' ); // disable/enable
define( 'UAEL_WL_KNOWLEDGEBASE', 'enable' ); // disable/enable
define( 'UAEL_WL_KNOWLEDGEBASE_URL', '#knowledgebase' );
define( 'UAEL_WL_SUPPORT', 'enable' ); // disable/enable
define( 'UAEL_WL_SUPPORT_URL', '#support' );
define( 'UAEL_WL_BETA_UPDATE_BOX', 'enable' ); // disable/enable
define( 'UAEL_WL_INTERNAL_HELP_LINKS', 'enable' ); // disable/enable
define( 'WP_UAEL_WL', true ); // true/false

How to Create a User Registration Form with Only Email Field in Elementor?

Yes, you can create a User Registration Form containing only Email Field using Elementor and Ultimate Addons for Elementor!

Firstly you will need to drag and drop the User Registration Form widget on the Elementor Editor and remove all the default Form Fields except the Email field.

Now, under the General Settings, enable the Send Email option, this would – send the new user an email about their successful account creation.

Now we have the option to customize the email sent to the User, you will have to select the Email Template > Custom to be able to send the Customized email containing password.

Here a description field will be added where you will be able to customize your email which will be sent to the User.

We have provided default custom Message which you can modify as required –

How to Customize User Email in the User Registration Form Widget?

You can customize the User Email as we have seen above for the scenario with – email field with the only password.

Now if you need to send other details to the user after a successful registration. You can use the following shortcodes with the email Customization as per your requirement.

Following are the shortcodes you will require to add in the Message section with your customized message –

[field=username] [field=email] [field=password][field=first_name] [field=last_name]

This how you can customize the User Email using the User Registration Form widget.