Change the order of registration fields

#1

Hi all,
I would like to add two additional custom registration fields ‘middlename’ and ‘company’.
The field ‘middlename’ should appear after ‘first name’ and before ‘last name’.
The field ‘company’ should appear right after ‘last name’.
Is this possible? And if so, how? (some example code is greatly appreciated)

Thanks in advance.

#2

I think this is possible, with a JS code after the form. But it’s too specific to be possible to create code for you, sorry…

#3

There is another option, if you don’t know javascript but are good with CSS. You could create your new fields in the regular General Options -> Custom Registration/Profile Fields panel and then change the order in which they display using CSS.

#4

The only way I can think of doing this is using CSS3 ‘flexbox’.
But this is not supported in older browsers.
I’ll give it a try anyway :wink:

#5

I just tried it with CSS Flexbox, but that doesn’t work because the custom fields you create are put in a separate DIV with the heading ‘Additional Info’. There is, as far as I can see, no way with CSS to get these custom fields out of this DIV and ‘put’ them in the DIV that says ‘Create Profile’.
So I think I have to try it with some JavaScript (but I’m not good at it)

#6

Flexbox isn’t the way to do it.

First, you need to create the fields by answering the question, Starts a New Section? No. That avoids your problem of the fields being placed within a new parent div.

Then create a field called middle_name and another called company

Then it’s a bit of trial and error. This works for the theme I was testing with:

#s2member-pro-stripe-registration-form-last-name-div, 
#s2member-pro-stripe-registration-form-password-div { 
    margin-top: 10em; 
} 
#s2member-pro-stripe-registration-form-custom-reg-field-middle-name-div { 
    margin-top: -45em !important; 
    margin-bottom: 16em !important; 
} 
#s2member-pro-stripe-registration-form-custom-fields-section-title { 
    visibility: hidden; 
}

You will obviously need to play around with the numbers, but you get the idea.

#7

Thanks for the reply Tim.
I did see that question, answered ‘No’ but nevertheless it does create a new section (and parent div) called ‘Additional Info’.

#8

The Additional Info label is taken care of with the visibility:hidden; attribute in my CSS above.

For the fields themselves, I had no problem moving them if I answered “no” to that question. Perhaps you weren’t targeting the same divs as me.

#9

You are right.
Fiddling with it now.
Thanks!

#10

For everyone else interested in this topic.
I just came across this section in the Knowledge base that shows you how to create/modify your own Pro-Forms:

Of course, this only applies when you have s2Member Pro installed. I don’t think it works with the free version of s2Member.

1 Like