• Skip to primary navigation
  • Skip to main content
  • Skip to primary sidebar

RocketGeek

Home of WP-Members, The Original WordPress Membership Plugin

  • WordPress Plugins
    • WP-Members
      • FAQs
      • Quick Start
      • Documentation
      • Extensions
    • Advanced Options
      • Documentation
      • Purchase the Plugin
      • Get the Pro Bundle
    • Download Protect
      • Documentation
      • Purchase the Plugin
      • Get the Pro Bundle
    • Invite Codes
      • Documentation
      • Purchase the Plugin
      • Get the Pro Bundle
    • MailChimp Integration
      • Documentation
      • Purchase the Plugin
      • Get the Pro Bundle
    • PayPal Subscriptions
      • Documentation
      • Purchase the Plugin
      • Get the Pro Bundle
    • Salesforce Web-to-Lead
    • Security
      • Documentation
      • Purchase the Plugin
      • Get the Pro Bundle
    • Text Editor
      • Purchase the Plugin
      • Get the Pro Bundle
    • User List
      • Documentation
      • Purchase the Plugin
      • Get the Pro Bundle
    • User Tracking
      • Documentation
      • Purchase the Plugin
      • Get the Pro Bundle
    • Memberships for WooCommerce
    • WordPass
  • Store
    • Cart
    • Checkout
  • Blog
    • Basics [Free]
    • Tips and Tricks
    • Filters
    • Actions
    • Code Snippets
    • Shortcodes
    • Design
    • Release Announcements
  • Contact
  • Sign In
  • Show Search
Hide Search
Home » Plugins » WP-Members » Documentation » Customizing Forms

Customizing Forms

All of the style and layout elements of the WP-Members forms are driven by CSS.  There are several options for customizing the look and feel of the forms and other elements in the plugin.

  • Use the WordPress Customizer to apply basic CSS changes.
  • Select a different stylesheet in the plugin’s main Options tab.
  • Create and load a custom stylesheet.

You should NOT edit the form code directly in the plugin.

Customization beyond CSS

Customizing the stylesheets should suffice for most customization.  However, there may be times when you need to insert certain style definitions, specific HTML tags, other elements beyond what is already in the plugin or in the included stylesheets..

There are several filter hooks in the plugin’s form building functions that allow you to customize the HTML that is output for the forms.  This allows you to add your tags, classes, or IDs.

Form filter hooks

There are a number of form filter hooks available.  These filter hooks give you the ability to replace what is generated by the plugin with your own form elements.  There are many examples and tutorials on this site on how to use these filters to enable various form customizations.

  • wpmem_sidebar_form (tag)
  • wpmem_login_form_before (tag)
  • wpmem_login_form (tag)
  • wpmem_register_form_before
  • wpmem_register_form (tag)
  • wpmem_register_heading
  • wpmem_user_edit_heading
  • wpmem_recaptcha (tag)
  • wpmem_tos_link_txt

Examples

Here are some posts that have some custom form layout examples using some of the plugin’s filter hooks:

  • Customizing form CSS: Adjusting floated form elements [free]
  • Customizing form CSS: Setting maximum form width [free]
  • Customizing form CSS: Custom login form with side-by-side inputs [free]
  • Customizing form CSS: Login widget with inline inputs [member only]

 

  • Getting Started
  • Recommended WordPress® Settings
  • Plugin Settings
    • Options
    • Fields
    • Dialogs
    • Emails
    • New Feature Settings
  • Managing Content
    • Restricting Posts
    • Restricting Pages
    • Show Excerpts
    • Custom Post Types
  • Managing Users
  • Registration
    • Choosing Fields
    • Create a Registration Page
    • Moderating Registration
    • Using CAPTCHA
    • Removing Registration Options
  • User Profile
  • Membership Products
    • Membership Properties
  • Menus
    • Individual Menu Items
    • Logged In Menus
    • Login/Logout Menu Link
  • Customizing Emails
    • Email Address
    • Email Content
    • Email Format
    • Email Shortcodes
    • Email Troubleshooting
  • Customizing Forms
    • Create a Custom Stylesheet
    • Using the WordPress Customizer
    • Login Form HTML
    • Registration Form HTML
    • Widget Login Form HTML
  • Shortcodes
    • Pages and Forms
    • Login Status
    • User Fields
    • Email
    • Other Shortcodes
  • WP-CLI Commands
  • API Functions
  • Filter and Action Hooks
  • WP-Members FAQs
    • How to add a shortcode
    • How to apply login redirects
  • Demo Videos

Ready to get started?

Join Today!

© 2021 · butlerblog.com · RocketGeek is built using WordPress, WP-Members, and the Genesis Framework

  • butlerblog.com
  • WP-Members Support Subscription
  • Terms of Service
  • Refund Policy