Apps Ballance Cash_2 Chat Checkout Click Code Cog_Wheels Compose_email Conference Contacts Earth Edit_File_1_ Email Email_2 File Folder_2 Gift Group Group_2 Help ID ID_2 Key Keys Laptop_Store Like_1_ Link Lock Log_Out Map Marketing Mobile_UI Navigation POS Partnership Profile Safe_2 Search_User Secure_Files Settings Share Shield Shield_2 Shopping_Cart Support_Male Trash Type_pin User_female User_male logo copy

WYSIWYG Field Type

Iain Poulson avatar
Iain Poulson Last updated on March 16, 2021

The WYSIWYG (What You See Is What You Get) Field Type provides a space for your users to submit text that can be formatted using the WYSIWYG editor. They have the option to format their text using heading styles, boldfaces, italics, and they can even make use of the HTML editor instead of the visual editor. 

Examples of use cases for this field type include: asking your users to submit formatted text, asking for permission where formatting is important, enable HTML input capabilities on the submissions.

How to Add The WYSIWYG Field Type

Adding this field type is simple. It functions just like any other custom fields that you want to add to your registration form: 

  1. Navigate to USERS > CUSTOM FIELDS
  2. From here, you can choose to add another field group by clicking “Add New Field Group” or customize an existing field group by clicking “Customize Fields” next to the name of the field group you want to update
  3. Click on “Add new custom field” to get to the custom fields popup.NOTE: In case you already have a WYSIWYG field type selected, just click on “Edit Field” to update that existing field.
  4. On the popup, click on the Advanced Fields tab
  5. Add a Field name
  6. Click on WYSIWYG
  7. Click “Create Custom Field” to create your new field type

Once your new field is created, you can update the settings accordingly. 

General

Under the “General” tab, you will find the following settings: 

  • Field title – the name of the repeater field that will be displayed on your registration form. 
  • Field description – this optional field is the text that will appear as a description within the forms
  • Unique meta key – this field is important to specify or remember since this will be the tag of the data or information about your users that will be stored on your databaseNOTE: The key must be unique for each field and written in lowercase with an underscore (_) separating the word, e.g., country_list or job_title. Errors might result in adding the information on the database if this field is not properly formatted. 
  • Placeholder – this will be the placeholder text that will be displayed on the field in the registration form. You can leave this empty if it’s not needed. 

It’s good practice to pay attention to these fields since these will be the basic settings needed for the field.

Validation

The “Validation” tab provides settings for requiring user inputs on the registration form. 

  • Set as required – enable this option to ensure that the field is filled out before the form can be submitted. 

Privacy

The “Privacy” tab provides the settings to control the visibility of the information on the user’s profile section.

  • Profile visibility – this setting sets the visibility of this field on the user’s profile pages. 

Permissions

The “Permissions” tab provides the settings to control what the users can update or edit once the registration form has been submitted. 

  • Profile editing – this setting sets who can see and edit this field after submission. Setting this to “Hidden” will not allow editing on the front-end profile page. 
  • Set as read-only – enable this option to prevent users from editing this field on their profile page. If the profile editing is set to publicly editable, the field will still be visible within the account page but will not be customizable

Adding to the Registration Forms

Once you’ve set and created the custom WYSIWYG field, it’s time to add this custom field to the registration form. Here’s how you can do that: 

  1. Navigate to USERS > REGISTRATION FORMS
  2. Click “Add New Form” in case you want to create a new form with this field, otherwise, click “Customize Form” to customize the existing form.
  3. Drag and Drop the custom field that you created under the “Available Fields” from the right column to the “Form Fields” on the left. You can rearrange the fields as you see fit.

The changes are automatically saved after you make them and will take effect immediately. 

Previewing the Registration Form

Once you’ve updated the registration form and added the repeater field, since the changes are automatically updated, you can preview if this works by logging out and replicating the registration process.

To update your registration, profile, and account pages, add shortcodes including parameters, read more on this documentation page. 

On the front-end of the registration form, the following format abilities are available to the users: 

  1. Heading styles
  2. Font styles (Bold and Italics)
  3. Lists (Bulleted and Numbered )
  4. Blockquote
  5. Text Alignment (Left, Right, and Center)
  6. Insert/ Edit Hyperlinks
  7. Read More Tags
  8. And more under the Toolbar Toggle option:

Clicking on the “Text” button at the top-right corner of the editor will open up the HTML editor for this field. 

The Profile and Account Page

Depending on the setting that you set under the “Privacy” and “Permissions” tab of the custom field, the information that was submitted can be seen on the user’s profile page.

Editing the WYSIWYG Field from the Profile Page

Once the user has successfully registered, and if the “Privacy” and “Permissions” settings that you set for this field, the user can easily update and edit the information from their account or profile page. 

From the Profile page, click on the “Edit account” link next to the username to be directed to the Account page where the users can update the existing information on the fields. 

WP User Manager logo

Get Started with the Best WordPress Membership Plugin Today

Connect, Manage and Build your Membership Site

Need more help?

If you still didn't find an answer you can always contact us

Submit a ticket