Design Question for Pro Forms

[cnyc31]

Hi there!

I love the plug in. You guys rock!
I would like to have a savvy registration page and I'm having some issues.

I'm a newbie regards to html and css. I barely have my wordpress site going..

I just bought the pro version because I really like the fact I can ask people to register as a member within a page. I want to offer free sign up for some areas of the site.

Here's what I have.
http://aoyamakoicafe.com/basic-training-sign-up-page

And here's what I want to make it look like.
http://www.fizzback.com/?page_id=1203
(I found this page within the forum. Great design!)

I would like to narrow the user input field and have it next to the titel of the field like the example above.

Also I would like the final "submit" button to have some Japanese texts on it. (Is this in the s2member-pro/includes/templates/forms/paypal-registration-form.html? How do I edit the "submit" text? )

And finally I would like to completely delete/disappear "Additional Info" which shows up under the standard registration fields. ( I want all the forms to show up under neath "create profile" without the white line that says "Additional Info" : )

(Bonus would be to get rid of the pink Paypay API warning!)



I saw something in the forms about coping html and putting it in your site.

Re: Add the s2Member Registration/Login Form to Custom Desig
by Cristián Lávaque » April 8th, 2011, 9:36 pm

You're right, I was just talking about the login.

One thing you could do is create the custom fields you want here WP Admin -> s2Member -> General Options -> Custom Registration Fields and when the form has all the fields you want, copy the form's HTML and paste it in a text widget and style as needed.

I would love to know how I copy the form's HTML. Would I do this in Chrome→show source→ and copy the html?

Is there anyway to put the text widget within the page without using the widget thing on the side? Like use a short code? I don't use any sidebars on my page.

I'm a total noob and would totally be grateful for any advice from anyone. Would really love your help.

Thanks for reading and I hope you have a fantastic day!

Chris Gen

www.Aoyamakoicafe.com
(site in development! lol)

p.s.

Seriously... you guys are amazing for making this. It's waaay under priced. Would gladly donate.

[Cristián Lávaque]

Thanks for the props, Chris!

You're on the right track.

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" /]

The PayPal warning will go away after you set it up properly. WP Admin -> s2Member -> PayPal Options -> PayPal Account Details, PayPal IPN Integration and PayPal PDT/Auto-Return Integration

I hope that helps!

[webbmalin]

I tried to make my own template with Paypal-Pro form for Level 1... didn't work...

I copied paypal-checkout-form.php into my-checkout-form.php, I placed the file in my themes directory.
then I added template="my-checkout-form.php"

But nothing happend. What did I do wrong?

And what's the difference between paypal-sp-checkout-form.php and paypal-checkout-form.php?


I also wonder how I can hide the cards next to the paypal radio button.

Thanks, Malin

[Cristián Lávaque]

If you look at the HTML for each card icon, you'll see each has a unique ID. You can use their IDs to hide them with CSS. Like:

Code: Select all

s2member-pro-paypal-checkout-form-card-type-visa-label {display: none !important;}

sp is short for Specific Post/Page, it's referring to that kind of access restriction. So the filename with sp in it is the one for the Specific Post/Page Pro-Form.

The custom template file has to be inside your active theme directory, like this: /wp-content/themes/twentyeleven/my-checkout-form.php. Please let me know if you continue to have trouble with this.

The /wp-content/ directory also works, and if present, will override the one inside the active theme directory: /wp-content/my-checkout-form.php.

I hope that helps!

[webbmalin]

It works fine this time Cristián
I guess I was tired last time, cause I'm sooo sure I did exactly the same thing before, hahaha.

And I managed to hide the creditcard images as well.

Can I do the same thing with the login/logout form?
(Cause it's really bugging me that I don't know how to translate everything using mo and pot or whatever... I know you posted links about it but still it's just too confusing )

[Cristián Lávaque]

I'm glad you got it working! Thanks for the update.

What login/logout form? And what do you want to hide there?

Ah, yes, I know what you mean about translations in WordPress.

[webbmalin]

The s2member_pro_login_widget() Don't need to hide anything, but if I could use my own template at least I could translate...

[Cristián Lávaque]

Ah ok. Yes, you can use CSS to style the pro login widget too.

The template is not editable yet, but looking at the code there's something you could try doing (I haven't tested this yet):

Create a copy of the Pro Login Widget's file to the must-use plugins directory, and edit the template there. Let me know if that works. /wp-content/plugins/s2member-pro/includes/classes/login-widget.inc.php to /wp-content/mu-plugins/login-widget.inc.php

You could edit the original, but that'd be overwritten after an update.

Let me know if that helps!

[webbmalin]

That works great!!!
Is it possible to do the same with the [s2Member-Profile /] ??
Where do I find the template for it?

Thanks

[webbmalin]

And also, the checkout form works good, but when you add a coupon code there's some text in english showing up. Where do I find the template for that? Couldn't find it in the regular my-checkout-form.php

[Cristián Lávaque]

Yes, you can do the same with the profile form. I'm pretty sure this is the file: /wp-content/plugins/s2member/includes/classes/profile-in.inc.php

Here's documentation on how to translate: /wp-content/plugins/s2member/includes/translations/translators.txt

I hope that helps.