Replace form labels with placeholders using Placeholder Labels Add-On for Profile Builder

icon-150x150

Placeholder Labels Add-On hides all Profile Builder form labels and adds for each form field a placeholder with the title of the field.

This can help you reduce clutter on the page, or shorten the length of your forms.

Note: Requires at least Profile Builder 2.1.9, free or premium.

Version 1.2 released:
Fixed compatibility with PB add-ons and problems with some form fields.

Version 2.0 released:
Added a Meta Box on back-end of each form from Multiple Registration and Edit-Profile Forms to select on which form to be active.

pbpl

Replace form labels with placeholders

Add placeholders only to input and textarea fields, but hide the labels of all fields.

4

Support for RTL (right-to-left) languages

This add-on will work on all RTL languages.

5

About

This add-on will hide all labels, it will not remove them.

Works only with PHP and CSS, no unnecessary JavaScript.

Get Profile Builder Placeholder Labels Add-On

Adding reCAPTCHA to WordPress Register, Login and Lost Password Forms with Profile Builder

The improved reCAPTCHA field from Profile Builder now offers an UI for enabling reCAPTCHA verification on all Profile Builder front-end forms, as well as default WordPress register, login and lost password forms.

Having a reCAPTCHA powered registration on your website can help you dramatically reduce user registration spam.

reCAPTCHA-Manage_fields

Once you add the reCAPTCHA field to the Manage Fields list in Profile Builder, under the field options, you will be able to select the forms which will have reCAPTCHA verification enabled.

reCAPTCHA-field-options

Adding reCAPTCHA to Profile Builder front-end forms

reCAPTCHA_display_PB_forms
The first set of options allows you to choose which Profile Builder forms should display the reCAPTCHA verification.

By default, only the Register form has reCAPTCHA verification enabled, but you can also add reCAPTCHA to Login and Lost Password front-end forms by checking the corresponding options.

Displaying reCAPTCHA  on the front-end Recover Password form

Displaying reCAPTCHA on the front-end Recover Password form

Having a reCAPTCHA verification in place on the Login and Lost Password forms is a good way to improve your website security and protect yourself against brute force attacks.

Adding reCAPTCHA to WordPress Register, Login and Lost Password forms

reCAPTCHA_display_default_WP_forms
Profile Builder allows you to also add reCAPTCHA to the default WordPress Register, Login and Lost Password forms as well.

By default, the WordPress Register form will have reCAPTCHA enabled, but you can choose to also add it to the (back-end) WP Login and Recover Password forms.

reCAPTCHA enabled on default WordPress Login form

reCAPTCHA enabled on default WordPress Login form

With the improved reCAPTCHA field from Profile Builder, you now have full control over which forms (both back-end WP default forms as well as front-end Profile Builder forms) should display the No CAPTCHA reCAPTCHA verification.

reCAPTCHA error on the back-end WordPress Login form

reCAPTCHA error on the back-end WordPress Login form

Note: The improved reCAPTCHA field is available in Profile Builder premium versions (both Hobbyist and PRO), starting with version 2.1.6.

Labels Edit for Profile Builder

icon-150x150

The Labels Edit Add-On will help you edit all Profile Builder labels. With the Labels Edit Add-On we’ve tried to make Profile Builder labels edit as easy as possible.

 

Edit Labels

To edit a label first you need to select desired string in the Label to Edit select. With the label selected enter the new string in the New Label textarea and hit Add Entry.

2

After you edit a label this plugin will automatically replace the old label with the new one in all places (both front and back-end).

7

You can edit all the edited labels by clicking the Edit button from the edited labels table.

5

Rescan Labels

If we’ll add more labels after an update of Profile Builder, you can scan again very fast with a click on the Rescan button and your select will be updated with all the new labels.

4

Variables explained

Variables with numbers like 1, 2, 3, etc. help us to output variables content in any order in a string.

  • %1$s
  • %2$s
  • %3$s
  • %4$s
  • %s

You must be careful and place them like in the default string, see e.g.

Example:

Old Label: in %1$d sec, click %2$s.%3$s

New Label: click %2$s.%3$s in %1$d sec

Variables can output links, users username, email, etc.

You must escape characters in new label like in the old label, see e.g.

  • \”

Example:

Old Label: Password Reset from \”%1$s\”

New Label: From \”%1$s\”, a password reset

Get Profile Builder Labels Edit Add-On

User Listing Table made Responsive with CSS

One of the awesome features of Profile Builder is the user listing. As the name suggests, you can create a listing of your users by selecting different criteria, like which user roles to display, the number of users to display on a page, a default sorting, be it by username, first name or other default and extra fields, and so on, that you can display in your pages via a shortcode.

The default template, used to display the listing, is a table and as you can see in the image below it looks quite good out of the box, when it is displayed on a large screen. But, as you may already know, tables don’t really look all that great on small screens, especially when they have lots of columns.

profile-builder-user-listing-table-1

In some cases they look terrible even with a few columns. Five columns were more than enough to ruin the overall tidy aspect of the above table. So, the goal is to make them look pretty even on small screens.

profile-builder-user-listing-table-2

Using the pure CSS solution the guys at Living Social found for their problem, we’ve transformed the crammed table into something easy to read and understand with just a few lines of CSS.

profile-builder-user-listing-table-3

 

Let’s see the code

These improvements will be present in a future update of Profile Builder, but for the impatient and for any others looking for a pure CSS solution to responsive tables I’m going show what needed to be done in order to achieve this good looking table.

The solution uses the power of CSS pseudo-elements, the ::before pseudo-element to be more exact and its ability to get content from an attribute of the targeted element.

Let’s take the default user listing template. We want the column titles to become the labels that are displayed to the left of our new rows. In order to do this we will add a new attribute to the table cell.

1
2
3
4
<!-- Table cells without the new attribute -->{{{avatar_or_gravatar}}}{{meta_user_name}}{{meta_first_name}} {{meta_last_name}}{{{meta_number_of_posts}}}{{{more_info}}}
 
 
<!-- Table cells with the new attribute -->{{{avatar_or_gravatar}}}{{meta_user_name}}{{meta_first_name}} {{meta_last_name}}{{{meta_number_of_posts}}}{{{more_info}}}

Now let’s sprinkle some CSS magic dust

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
@media screen and ( max-width: 720px ) {
 
    /* 
     * This little bit of code will add the pseudo-element and populate it with 
     * content from the table cell's data-label attribute 
     */
    .wppb-table td:before {
        content: attr(data-label);
        float: left;
    }
 
 
    /* 
     * Let's add a little more styling to make the table look clean
     */
     .wppb-table {
         border: 0;
     }
 
    .wppb-table thead {
        display: none
    }
 
    .wppb-table tr {
        display: block;
        margin-bottom: 30px;
    }
 
    .wppb-table td {
        display: block;
        text-align: right;
        border-bottom: 0;
    }
 
    .wppb-table td:last-of-type {
        border-bottom: 1px solid #e1e1e1;
    }
 
    .wppb-table .wppb-posts,
    .wppb-table .wppb-moreinfo{
        text-align: right;
    }
 
}

 

A bit more

If you want to go a step further and create a minimalist user listing you can use the style below.

profile-builder-user-listing-table-4

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
    .wppb-table {
        border: 0;
    }
 
    .wppb-table thead {
        display: none
    }
 
    .wppb-table tr {
        display: block;
        margin-bottom: 30px;
    }
 
    .wppb-table td {
        display: block;
        text-align: right;
        border: 0;
        border-bottom: 1px dotted #e1e1e1;
        padding: 15px;
    }
 
    .wppb-table td:last-of-type {
        border-bottom: 0;
    }
 
    .wppb-table .wppb-posts,
    .wppb-table .wppb-moreinfo{
        text-align: right;
    }
 
    .wppb-table td:before {
        content: attr(data-label);
        float: left;
        font-weight: bold;
    }
 
    .wppb-avatar:before {
        display: none;
    }
 
    .wppb-table .wppb-avatar {
        text-align: center;
    }

Campaign Monitor and Profile Builder

icon-campaign-monitor-150x150The Campaign Monitor Add-On for Profile Builder is here and it will help you close the gap between you and your potential subscribers. As with the MailChimp Add-On we’ve tried to make the set-up as easy as possible, in order to save you the time and the trouble. So let’s see what needs doing.

 

API Key

In order to connect Profile Builder with Campaign Monitor you will need to add the API key of your Campaign Monitor account into the newly created page from Profile Builder. You will find the API key in your Campaign Monitor account, in the Account Settings page.

profile-builder-campaign-monitor-1

Clients

If the API key is valid a drop-down with all the clients from Campaign Monitor will appear. Select the client you wish to connect with Profile Builder and the lists associated with that client will load into the page.

profile-builder-campaign-monitor-2

Client lists and fields

You can edit each client list. Click on the name of the list to open the Edit Panel. Here you will find the Field Associations option where you can associate the fields from Campaign Monitor with the fields from Profile Builder. By default the E-mail Address from Campaign Monitor is associated with the Default E-mail field from Profile Builder and it cannot be edited as it is a mandatory field in Campaign Monitor.

Don’t forget to hit Save after you’ve made new changes.

profile-builder-campaign-monitor-3

Campaign Monitor Subscribe field

Once the add-on is active the Campaign Monitor Subscribe field will be added to the fields drop-down in Manage Fields. Here you will select the list you wish your new users to be added to. By default the field shows both on Register forms and on Edit Profile forms, but you can hide it from the later if you wish.

profile-builder-campaign-monitor-4

On your website

In the front-end part of your website the field will be displayed as a checkbox. If the users check this option, when the registration is complete the data of the fields that have been associated with the Campaign Monitor fields will be sent to Campaign Monitor and the new user will be subscribed to the list you have selected.

profile-builder-campaign-monitor-5

Campaign Monitor Widget

Use the built-in Campaign Monitor Widget to attract more subscribers. Here you can select the list your new subscribers will be added to and also which fields to display in the front-end form. By default you will be able to display the E-mail address and Name fields.

profile-builder-campaign-monitor-6

If both fields are selected the form will display as in the image below. The e-mail address field is mandatory.

profile-builder-campaign-monitor-7

If everything goes well the user will be prompted with a success message, if not an error message will be displayed with indication to what went wrong.

profile-builder-campaign-monitor-8

And finally…

You are done! Campaign Monitor is up and running and ready to be used. Get it now for a limited discounted price by following the link below.

Get Profile Builder Campaign Monitor Add-On

MailChimp for Profile Builder

icon-mailchimp-150x150

Say hello to our newest addition to the Profile Builder Add-Ons lineup. It is the MailChimp Integration Add-On and it will make it extremely easy for your new users to subscribe to your lists.

You’ll have it set up in no time, so let’s see what it’s all about.

MailChimp API key

First things first, when you activate the add-on a new page will be created for it. Here you will need to enter a MailChimp API key in order to connect the add-on with the data from your account.

If you don’t have an API key you will need to create one. To do this, navigate to your MailChimp account and in the Account section search for Extras > API keys. Here you will have an option to create a key. Copy the generated key and paste it in the MailChimp API Key field, then hit save.

mailchimp-walkthrough-1

Lists and fields

If the API key is valid your lists will be loaded and you will be able to edit each one.

mailchimp-walkthrough-2

In the edit panel of a list you will be able to associate each of the lists fields with Profile Builder fields.

By default the Email Address field from MailChimp is associated with the Default E-mail field from Profile Builder and this cannot be edited. If your MailChimp list contains the First Name and Last Name fields, they will also be associated by default with their corespondents from Profile Builder.

mailchimp-walkthrough-3

MailChimp Subscribe field

Once the add-on is active the MailChimp Subscribe field will be added to the fields drop-down in Manage Fields. Here you will select the list you wish your new users to be added to. By default the field shows both on Register forms and on Edit Profile forms, but you can hide it from the later if you wish.

mailchimp-walkthrough-4

What users see

In the front-end part of your website the field will be displayed as a checkbox. If the users check this option, when the registration is complete the data of the fields that have been associated with the MailChimp fields will be sent to MailChimp and the new user will be subscribed to the list you have selected.

mailchimp-walkthrough-5

MailChimp Widget

The add-on comes with a built-in widget that you can place in any widget area. By default the widget has only the Email Address, First Name and Last Name fields from each list, and you can select which of these to display.

mailchimp-walkthrough-6

If all three fields are selected, in the front-end part of your website, the widget will look something like the one bellow.

mailchimp-walkthrough-7

If a field is required, on submission, the user will be prompted with an error. If everything worked fine, the user will receive a thank you message and will be subscribed to the list you have selected.

mailchimp-walkthrough-8

That’s it

With this you are all done with a basic set-up of this new add-on. Get it now by following the link below.

Get Profile Builder MailChimp Add-On

Safari Push notifications for WordPress how and why

Starting with October 2013, with Apple launching OSX Mavericks, Mac users running this operating system could start receiving safari push notifications for WordPress on their desktop not only from their installed apps (i.e. from Gmail or Skype) but also from websites that enabled this service.

To subscribe to a website, one need only visit it from Safari. Once they agree to the subscription, Safari is no longer needed. Actually, no browser is needed. Notifications will pop up in the top right corner.

post-push-notification-announce-alert-gif

Read more

WCK Single Metabox just got better

wck-small-banner

Creating custom fields with our WordPress Creation Kit plugin has just become simpler.

We’ve redesigned the way Single Metaboxes work, reducing the number of steps required for adding content.

WCK’s Custom Field Creator allows you to create single or repeater metaboxes.

One of WCK’s strong points is the ability to create repeater fields as well as repeater groups. This is super helpful when you need to add multiple custom fields or groups of custom fields of the same kind, without knowing the exact number.

This repeater metabox attached to "Our Team" page allows you to add as many team members as you need.

This repeater metabox attached to “Our Team” page allows you to add as many team members as you need.

WCK Single Metabox Improvements

The problem was that because WCK was designed with repeater custom fields in mind, the Single Metabox design was adapted from the Repeater one.

Simply put, in the previous version, to add custom fields which are not repeatable (stored in a single metabox) you needed to click the “Add Entry” button for each one of the custom field groups attached to a post, page or CPT. Only after doing this, you could “Publish” the page/post and have the saved custom fields attached to it.

Here we're using a Single Metabox attached to an Events CPT to add event details stored in custom fields.

Here we’re using a Single Metabox attached to a Events CPT to add event details stored in custom fields.

Only after clicking the "Add Entry" button custom fields data is saved.

Only after clicking the “Add Entry” button custom fields data is saved and you can go ahead and “Publish” the event.

If however you forget to click the “Add Entry” button after adding content in the custom fields and simply click Publish, the custom field data will not be saved and the single metabox content will be empty. An alert of unsaved data may have helped, but it was still going half-way.

This was a serious usability issue which needed improvement. In the redesigned WCK Single Metaboxes, we rethinked the way Single Metaboxes are built, so that we can remove the “Add Entry” button altogether. This eliminates an extra step and simplifies the data entry process.

The NEW Single Metabox:

NEW Single Metabox design eliminates the redundant "Add Entry" button.

The NEW Single Metabox design eliminates the redundant “Add Entry” button.

This redesign impacts and simplifies the WCK UI as well. Based on WCK API, some WCK modules (like Custom Fields Creator, Front-end Posting etc.) were using the single metabox format as well.

This basically means that from now on creating custom content types with WCK will require less steps and fewer clicks.

Note: The improved WCK Single Metabox is available starting with WCK version 1.1.4.

Import / Export WCK Settings addon

Another important addition is the Import / Export Settings addon. This makes it really easy for people working on two environments, to export all WCK Settings from the development site and import them on the live site.

No need to define the same metaboxes, taxonomies or custom post types twice, for both sites. Simply export them to as many sites as you need.

Download The Import And Export Add-On

Have any suggestions on how we can make WCK even better? Share your thoughts in the comments section below.

WYSIWYG User Field, now available in Profile Builder

The list of custom field types you can add to the user profile with Profile Builder has now expanded to include the WYSIWYG User Field.

Your users will now be able to add, edit and format their profile information making use of all the functionality of a Rich Text Editor. The same editor you’ve been used to when editing Posts and Pages in WordPress.

The WYSIWYG User Field is powered by WordPress default TinyMCE editor.

wysiwyg-field

The WYSIWYG field type allows you to add a Rich Text Editor field to the user profile (both front-end and back-end).


Read more

No CAPTCHA ReCAPTCHA Field for Profile Builder

Profile Builder’s reCAPTCHA field has been updated to the new and improved Google’s No CAPTCHA reCAPTCHA.

To simplify the reCAPTCHA experience the new field will simply ask users who want to register for your website whether or not they are robots.

Recaptcha_PB
Using the new reCAPTCHA API, a significant number of users will be able to securely register through the front-end forms created with Profile Builder and easily verify they are humans without actually having to solve a CATCHA.

With just a click, they can confirm they are not a robot.

reCaptcha-frontend-register

However, CAPTCHAs aren’t going away. When the risk analysis engine can’t confidently predict whether a user is a human or an abusive agent, it will prompt a CAPTCHA to increase the number of security checkpoints for confirming the user is valid.

reCaptcha-verification-registration

Besides the reCAPTCHA field, Profile Builder offers other features to help you fight user registration spam.

Note: The new No CAPTCHA reCAPTCHA will replace the old version, starting with Profile Builder Hobbyist or Pro v.2.1.0.
For a smooth transition, the reCAPTCHA field settings will remain exactly the same as in previous versions.