Editing s2member form templates and emails

[fizzbacker]

Hello

FIrst of all thanks for the great plugin . It works fine for me but I have a few issues with how things look i.e layout etc.

My first issue is the registration page. By having the field below the label doubles the rows and increases scrolling. I want to be able to bring the text fields in the same line as their labels and generally being able to tweak that form to look like the other forms in the website.

On the same page I want to be able to split it in half, one half for existing users (login form) and the other half for new users (registration form). I guess this goes back to my previous point about being able to edit things that little bit more.

Another think I would like to change, not that critical though, is the notification email i get every time someone registers. The email has a bunch of empty fields which I didn't create i.e cv0:, cv1: etc, and I'd like to clean that up if possible.

Finally I was wondering when someone downloads something on the website, if there is a way of stopping that window confirming the download and limit, from appearing?

Please excuse me from bombarding you with so many questions in one topic but it would be a massive help to get answers for these, if possible.

Here is the website in case you need it: http://www.fizzback.com.

Many Thanks
fizzbacker

[Cristián Lávaque]

No problem about the number of questions.

About the login and registration forms customization, if the selectors provided in the HTML aren't enough to change it with CSS, you could copy the HTML of each and add them to a new page where you'll be able to customize everything about them, as long as you leave the form working the same way.

For a failed submission to go to your new form, a redirection in your .htaccess file would be a good start, but I'm really not sure it'll work because the new page won't have the error handling the default does.

I'll leave the other two questions to Jason.

[Jason Caldwell]

Another think I would like to change, not that critical though, is the notification email i get every time someone registers. The email has a bunch of empty fields which I didn't create i.e cv0:, cv1: etc, and I'd like to clean that up if possible.

* Sorry, it's not possible to change these easily.
However, if you really need this changed, you can use this Filter.

Create this directory and file:
/wp-content/mu-plugins/s2-hacks.php

Code: Select all

<?php
add_filter("ws_plugin__s2member_registration_notification_email_msg", "my_filter");
function my_filter($msg)
    {
        return $msg; /* Modify the message here if you like. */
    }
?>

Finally I was wondering when someone downloads something on the website, if there is a way of stopping that window confirming the download and limit, from appearing?

Yes, add this to the end of your download links: &s2member_skip_confirmation

s2Member will automatically detect links, anywhere in your content, and/or anywhere in your theme files, that contain ?s2member_file_download. Whenever a logged-in Member clicks a link that contains ?s2member_file_download, the system will politely ask the user to confirm the download using a very intuitive JavaScript confirmation prompt that contains specific details about download limitations. This way your Members will be aware of how many files they've downloaded in the current period; and they'll be able to make a conscious decision about whether to proceed with a specific download or not. If you want to suppress this JavaScript confirmation prompt, you can add this to the end of your links: &s2member_skip_confirmation.

My first issue is the registration page. By having the field below the label doubles the rows and increases scrolling. I want to be able to bring the text fields in the same line as their labels and generally being able to tweak that form to look like the other forms in the website.

On the same page I want to be able to split it in half, one half for existing users (login form) and the other half for new users (registration form). I guess this goes back to my previous point about being able to edit things that little bit more.

Are you running s2Member ( free ), or s2Member Pro Forms?

[fizzbacker]

Hi

Thanks for your replies guys!

Even though I upgraded to pro and followed the installation instructions, apart from some extra options in the admin page, I didn't notice any difference in forms or anything else....?

Any tips how to enable pro forms?

Thanks
fizzbacker

[fizzbacker]

No problem about the number of questions.

About the login and registration forms customization, if the selectors provided in the HTML aren't enough to change it with CSS, you could copy the HTML of each and add them to a new page where you'll be able to customize everything about them, as long as you leave the form working the same way.

For a failed submission to go to your new form, a redirection in your .htaccess file would be a good start, but I'm really not sure it'll work because the new page won't have the error handling the default does.

I'll leave the other two questions to Jason.

Yeah. So I tried it and even though i got close, getting submission re-directs, lost password etc integrated, I didn't manage to avoid being re-directed to the old form for failed submissions and errors like you said.

Anyone any ideas? Maybe a way of making this new replicated register/log-in page the default page for s2member?

Thanks in advance

[Cristián Lávaque]

OK, now that you have Pro, I can suggest you use the s2Member Pro-Form for free registrations. Pro-forms let you edit their template and they'll work fine with data validation too.

You can copy the code in the /wp-content/plugins/s2member-pro/includes/templates/forms/paypal-registration-form.html file.

Create a new file naming it what you want (e.g. my-custom-registration.php) inside /wp-content/ or /wp-content/themes/the-theme-you-are-using/ and paste the code into it.

Now you can edit the code to achieve the layout you want, just keep the divs, IDs and classes as they are because they're used as selectors by JavaScript.

You can use Firebug to help you editing the CSS, I'm pretty sure the file is under /s2member-pro/includes/separates/gateways/paypal/.

Enter the new file's name in the template attribue of your free registration pro-form's shortcode.

Code: Select all

[s2Member-Pro-PayPal-Form register="1" ... template="my-custom-registration.php" /]

I hope that helps.

[fizzbacker]

Hi

Thanks for your reply.

I'm very close to getting this to work. My only problem now is I need to de-PayPalize the forms and more specifically the errors that come up on the page :

i.e PayPal® configuration error. Please configure your PayPal® Email Address.

Appreciate your help!

[Cristián Lávaque]

Could you show me a screenshot of what you want to change?

[fizzbacker]

Screenshot:

http://imageshack.us/photo/my-images/687/msgg.png/

Edit of even remove altogether.

Thanks for your help & patience.

[fizzbacker]

actually after having a closer look i found there is another plugin, insitelogin, that generates the registration form, not s2member, so i might have to look into that to change the form layout!!!

[Cristián Lávaque]

I see. That error message is for you, because you haven't finished configuring your PayPal info in the admin side. WP Admin -> s2Member -> PayPal Options -> PayPal Account Details, PayPal IPN Integration and PayPal PDT Auto-Return Integration

You can customize the pro-forms if you want.

Is it possible to modify the PayPal® and/or Authorize.Net® Pro Form templates?

Usually not necessary. But yes, if you really need to. Please check your /s2member-pro/includes/templates/forms/ directory. You can take the default templates, and place some ( or all of them ) into your own WordPress® theme directory. s2Member Pro will automatically find your custom templates there. By placing custom templates into your theme directory, you can be sure they won't get overwritten in a future upgrade. Either that, or you can just use the default templates like they are, and customize them with your own CSS rules inside the Stylesheet for your WordPress® theme ( i.e. style.css ). If you're using a PriMo Theme ( for instance, the s2Clean Theme ), check your Theme Options Panel, under: Custom CSS / Style Sheet.

You tell your pro-form to use your template file with the template shortcode attribute. WP Admin -> s2Member -> PayPal Pro-Forms -> Shortcode Attributes (Explained)

template="" 100% optional. This can be a custom template file that exists inside your WordPress® theme directory. For example: template="checkout.html".

I hope that helps.

[afeefmirza]

Hi,

I also want to be able to edit the Paypal pro forms and at the moment the layout of the pro forms is absolutely shoddy and unprofessional. Can anyone please help me out with editing the pro forms???

Thank you ever so much!

[Jason Caldwell]

Thanks for reporting this important issue.

s2Member Pro Forms come with basic structural CSS, giving Pro Forms a professional appearance, but still leaving plenty of room for style inheritance from your WordPress theme.

On your installation, your Pro Forms should look something like our demo here: http://dev.primothemes.com/s2clean/payp ... kout-demo/

If your Pro Forms look "shoddy and unprofessional", here are some things I would have a look at:

1. Is s2Member Pro properly loading its JavaScript/CSS files on your installation?
( take a look in the <head></head> of your site, are these files functional? )

2. Is your WordPress theme overriding s2Member's default structural styling in some way?
( try testing with the default WordPress themes, or with the s2Clean theme for s2Member )

3. If all else fails, you can remove all of s2Member's CSS following these instructions, and then apply your own stylesheet which will need to completely re-style the s2Member Pro Forms on your installation.

How can I prevent s2Member Pro from loading it's default CSS?
You can create this directory and file: /wp-content/mu-plugins/s2-hacks.php

Code: Select all

<?php
add_action ("ws_plugin__s2member_after_loaded", "remove_s2_pro_css");
function remove_s2_pro_css ()
    {
        remove_action ("ws_plugin__s2member_during_css", "c_ws_plugin__s2member_pro_css_js::css");
    }
?>

Or, you could remove only specific action Hooks; based on Payment Gateway.

Code: Select all

<?php
add_action ("ws_plugin__s2member_after_loaded", "remove_s2_pro_css");
function remove_s2_pro_css ()
    {
        remove_action ("ws_plugin__s2member_during_css", "c_ws_plugin__s2member_pro_alipay_css_js::alipay_css");
        remove_action ("ws_plugin__s2member_during_css", "c_ws_plugin__s2member_pro_authnet_css_js::authnet_css");
        remove_action ("ws_plugin__s2member_during_css", "c_ws_plugin__s2member_pro_ccbill_css_js::ccbill_css");
        remove_action ("ws_plugin__s2member_during_css", "c_ws_plugin__s2member_pro_clickbank_css_js::clickbank_css");
        remove_action ("ws_plugin__s2member_during_css", "c_ws_plugin__s2member_pro_google_css_js::google_css");
        remove_action ("ws_plugin__s2member_during_css", "c_ws_plugin__s2member_pro_paypal_css_js::paypal_css");
    }
?>

If you go this route, the following details may also be useful...
The easiest way to recreate and/or override s2Member's CSS, is to load up your site with s2Member's default CSS file, as it is created dynamically, based on your configuration of s2Member. Then download the whole file by loading up: http://yoursite.com/?ws_plugin__s2member_css=1

Either that, or if you'd like to investigate the core CSS files, you'll find more of them inside:
/wp-content/plugins/s2member-pro/includes/separates/gateways/
Also see: /s2member/includes/s2member.css
Also see: /s2member-pro/includes/s2member-pro.css

[afeefmirza]

Hi Jason,

Sorry about the comments about shoddy and unprofessional look of the forms.... I didn't intend to insult or anything. It may have felt bad knowing that you are the lead developer!! But I desperately need to change the look. I have looked at these css files but I can't seem to have an effect in the look of the forms.

[afeefmirza]

And could you please tell me why's there a gap between the label name and the text box in the attached image in the previous post, for example, for the phone number field, Home Address.. it looks ungainly. I'm new to this!!!!!

[Jason Caldwell]

Hi Jason,

Sorry about the comments about shoddy and unprofessional look of the forms.... I didn't intend to insult or anything. It may have felt bad knowing that you are the lead developer!! But I desperately need to change the look. I have looked at these css files but I can't seem to have an effect in the look of the forms.

Oh, no problem at all. We welcome constructive criticism. Regarding CSS, you should be able to override or add to s2Member's default CSS styling through the style.css file for your WordPress theme.

[Jason Caldwell]

And could you please tell me why's there a gap between the label name and the text box in the attached image in the previous post, for example, for the phone number field, Home Address.. it looks ungainly. I'm new to this!!!!!

Sorry, can you post a link to that screen shot please? I'm not seeing it on my end for some reason.

[afeefmirza]

Sorry, that was put up on another thread.

Here it is:

[Jason Caldwell]

Thank you. Yes, that looks almost completely un-styled. Leading me to wonder if s2Member's JavaScript/CSS files are even being loaded on your installation?

Does this URL work on your installation?
And, does it appear in the <head></head> of your site?
Have you added any custom code ( i.e. Filters ) to exclude s2Member's default CSS?

Code: Select all

http://example.com/wp-content/plugins/s2member/s2member-o.php?ws_plugin__s2member_css=1

If possible, please post a link to this Pro Form and I'll review for you.

[afeefmirza]

Hi Jason

Where do i check if it is appearing in the Head tag? And the link doesn't seem to be working. How do i check if the javascript/css files are being loaded?

Sorry for the dumb questions but I can't think straight!

[Jason Caldwell]

You will need to have some knowledge of HTML, and the ability to view the HTML source code of your website. Many site owners like to use this tool for Firefox. See: http://www.getfirebug.com/

If you continue to have trouble, you might want to hire a freelancer to help you integrate s2Member into your WordPress theme and business model. We keep a list of Job Postings here.

FYI: WebSharks, Inc. no longer provides professional installation service for s2Member. We now work to maintain/improve the s2Member software, and to support our Customers via email/forums. If you need professional installation, please try jobs.wordpress.net, as seen below.

s2Member® / Hot Tip: ( s2Installs.com! )

Recommended by s2Member® Lead Developer (Jason Caldwell). Their rate for a standard installation is $125. They're highly trained. Just request their service!

Need Help? Post A New Job!

It's free. Your Job will appear here, and @ jobs.wordpress.net. It will be displayed for a period of 21 days; or until you take it off, whichever comes first. Good luck!