If you find that your Pro Form is presenting fields that seem out of place, or if you find that the overall style in Pro Forms is not a match to the screenshot below; here are some things to start looking at.

Suggested Steps to Resolve

  • Do you have any JavaScript errors on the page where the Pro Form resides? Inspecting the page where your Pro Form loads up, using the Google JavaScript Developer Console, or in Firebug for Firefox should help you resolve this. If you have another theme/plugin that is causing a JavaScript error, this could prevent other functionality on the page (e.g. s2Member Pro Forms) from working as expected. We see this quite often, so checking in a Developer Console is highly recommended.

    2015-01-20_13-35-45

  • Verify that s2Member's JavaScript/CSS libraries are actually loading up. You can inspect the HTML source code and also look for successful network connections to the following resources depicted in this screenshot. If either of these are missing (or fail to load properly), you should check your s2Member → General Options and look under CSS/JS Lazy Loading. Set the option to "No", always load.

    2015-01-20_14-17-44

    2015-01-20_14-20-11

  • Test your Pro Forms in a clean WordPress installation (e.g., a default theme such as Twenty Fiftteen, Twenty Fourteen, and with only the s2Member plugin active). This will rule out a possible conflict with other plugins and/or a custom theme's CSS file. If you find that s2Member's default structural styles (i.e., the CSS that it comes with by default) is not enough to override styles presented by your theme, or it conflicts with your theme; then you may need to seek assistance from a developer to help resolve these conflicts.

A Functional Pro Form Example

2015-01-20_14-09-50