Make Membership Registration Page Responsive & Styled Nicer

Hello,

This is an example of my membership registration page.

I need to accomplish two changes to the registration form.

1. The form looks alright on desktop right now, but it doesn’t look very good. I’m not sure what styling elements I’m missing, but it feels off. Can someone suggest some CSS and layout to improve the style?

2. Everything gets messed up when the window is resized on desktop or the user is on mobile. Can someone suggest a better approach to the CSS to achieve this?

I’ve gone into the custom CSS rules of my Upfront theme and added the following to get the page to where it is now:

/* The following code was used to style the Membership Registration Form */
.ms-form-element {
border-left: solid 1px rgba(0, 0, 0, 0.45);
border-right: solid 1px rgba(0, 0, 0, 0.45);
margin: 0px 0px 0px 0px;
padding: 2px 13px;
width: 100%;
float: left;
}
.wpmui-field-label {
margin: 0px 0px 0px 0px;
padding: 5px 0px;
float: left;
}
.wpmui-field-input {
border: solid 1px rgba(0, 0, 0, 0.25);
margin: 0px 0px 0px 0px;
padding: 2px 13px;
background: #ffffff;
float: right;
}
.ms-form-element-xprofile.editfield {
margin: 0px 0px 0px 0px;
padding: 2px 13px 2px 13px;
}
.ms-form-element-xprofile.editfield.field-12 {
margin: 0px 0px 0px 0px;
padding: 2px 13px 2px 13px;
}
.ms-form-element-xprofile.editfield.field-23 {
margin: 0px 0px 0px 0px;
padding: 2px 13px 2px 13px;
}
#field_23 {
width: 95%;
height 20%;
border: solid 1px rgba(0, 0, 0, 0.25);
margin: 2px 0px 0px 0px;
padding: 2px 13px;
background: #ffffff;
}
.ms-form-element .description ::after {
padding: 0px 0px;
margin: 0px 0px 0px 0px;
display: none;
}
#field_8 {
border: solid 1px rgba(0, 0, 0, 0.25);
margin: 0px 0px 0px 0px;
padding: 2px 13px;
background: #ffffff;
float: right;
}
#field_5 {
border: solid 1px rgba(0, 0, 0, 0.25);
margin: 0px 0px 0px 0px;
padding: 2px 13px;
background: #ffffff;
float: right;
}
#field_4 {
border: solid 1px rgba(0, 0, 0, 0.25);
margin: 0px 0px 0px 0px;
padding: 2px 13px;
background: #ffffff;
float: right;
}
#field_3 {
border: solid 1px rgba(0, 0, 0, 0.25);
margin: 0px 0px 0px 0px;
padding: 2px 13px;
background: #ffffff;
float: right;
}
#field_2 {
border: solid 1px rgba(0, 0, 0, 0.25);
margin: 0px 0px 0px 0px;
padding: 2px 13px;
background: #ffffff;
float: right;
}
#field_12 {
border: solid 1px rgba(0, 0, 0, 0.25);
margin: 0px 0px 0px 0px;
padding: 2px 13px;
background: #ffffff;
float: right;
}
#ms-shortcode-register-user-form .ms-extra-fields {
border-left: solid 1px rgba(0, 0, 0, 0.45);
border-right: solid 1px rgba(0, 0, 0, 0.45);
width: calc(100% + 2px);
padding: 0 12px;
}
div#tos_content {
padding: 0 !important;
margin-bottom: 15px;
background: #ffffff;
border: solid 1px rgba(0, 0, 0, 0.45);
}
#ms-shortcode-register-user-form p#mc4wp-checkbox {
border: 0;
padding: 8px 0;
}
div#tos_content p {
border: 0;
}
form#ms-shortcode-register-user-form .ms-extra-fields {
border: 0;
padding: 0;
}
#ms-shortcode-register-user-form .ms-form-element {
border: 0;
padding: 2px 0;
}
form#ms-shortcode-register-user-form {
border: solid 1px rgba(0, 0, 0, 0.45);
padding: 13px 13px 60px;
background: #fafafa;
}
.wpmui-field-input.button {
border: 1px none rgb(0, 0, 0);
background-color: rgb(183, 45, 45);
font-size: 18px;
font-family: Open Sans;
color: #ffffff;
transition: all 0.25s ease;
padding: 2px 10px 2px 10px;
margin-left: 10px;
float: right;
}
.wpmui-field-input.button:hover {
background-color: rgb(251, 176, 76);
}
.wpmui-link.alignleft {
position: absolute;
float: right;
padding: 2px 10px 2px 10px;
margin: 6px, 0px, 6px, 0px;
color: rgb(183, 45, 45);
}
.wpmui-link.alignleft:hover {
color: rgb(251, 176, 76);
}

  • Rupok
    • Support Ninja

    Hi Daniel

    Hope you had a wonderful day.

    Can someone suggest some CSS and layout to improve the style?

    Can you try the following custom CSS Code and see if it improves the design a bit?

    #wpwrap .wpmui-field-input, #wpwrap .wpmui-field-button, body .wpmui-field-input, body .wpmui-field-button {
    padding: 10px;
    width: 50%;
    color: #000000;
    }

    input[type="textbox"] {
    color: #000000 !important;
    margin: 6px 0 !important;
    padding: 10px !important;
    width: 50% !important;
    }

    select {
    padding: 10px !important;
    width: 50% !important;
    }
    @media screen and (max-width: 480px) {
    #wpwrap .wpmui-field-input, #wpwrap .wpmui-field-button, body .wpmui-field-input, body .wpmui-field-button {
    width: 90%;
    }
    input[type="textbox"] {
    width: 90% !important;
    }
    select {
    width: 90% !important;
    }
    }

    Everything gets messed up when the window is resized on desktop or the user is on mobile

    The code I just provided above will also take care of responsive breaks. I’ve added media queries for mobiles. Please give it a try, we can help further if required.

    Have a nice day. Cheers!

  • Kasia Swiderska
    • Support nomad

    Hello Daniel,

    Can you tell me if this is desired look:

    if yes, then please try this code:

    .wpmui-field-label,
    .ms-form-element.ms-form-element-xprofile label,
    .wpmui-field-input,
    .ms-form-element.ms-form-element-xprofile input,
    .ms-form-element.ms-form-element-xprofile select {float: none !important;}

    .wpmui-field-input,
    .ms-form-element.ms-form-element-xprofile input,
    .ms-form-element.ms-form-element-xprofile select {display: block;}

    If you have something other in mind could you show me on the screenshot?

    kind regards,

    Kasia

  • Daniel
    • The Incredible Code Injector

    Hi Kasia,

    That’s the right look! Now I’d like the text fields to be 100% width, less some of the padding and the boxes don’t have to be so tall either.

    If you can help me make them the width of the element, I can tweak the CSS from there.

    All the best,

    Dan

  • Rupok
    • Support Ninja

    Hi Dan

    Hope you had a wonderful day.

    less some of the padding and the boxes don’t have to be so tall either

    #wpwrap .wpmui-field-input, #wpwrap .wpmui-field-button, body .wpmui-field-input, body .wpmui-field-button {
    padding: 5px !important;
    }

    I’d like the text fields to be 100% width

    #wpwrap .wpmui-field-input, #wpwrap .wpmui-field-button, body .wpmui-field-input, body .wpmui-field-button {
    width: 90%;
    }

    Please let us know if it doesn’t output your desired result. We will be glad to assist further.

    Have a nice day. Cheers!

  • Daniel
    • The Incredible Code Injector

    Hi Rupok,

    I think my last request is to change the font-family for the form field names and values.

    I’d like it to be nunito, light.

    I’m also concerned about the amount of CSS that’s been developed for this single form. Do I have too much in my custom CSS sheet? I feel like it’s a bit of a rat’s nest.

    Thanks for the help!

  • Daniel
    • The Incredible Code Injector

    I apologize for sending three messages in a row, but I know that I’m almost done now.

    1. Make the ‘Register Your Account’ button the same width as the boxes above it (90%)

    2. Change the value of the register button to read ‘Proceed to Payment’

    On the same page, I’m trying to display the cost of the plan. I’m using the shortcodes from membership 2 to auto-fill the cost, but it doesn’t include the ‘$’ symbol.

    When I manually enter the ‘$’ symbol, there is a space between it and the value (ie: $ 60).

    Can the gap between the cost and the symbol be removed?

  • Kasia Swiderska
    • Support nomad

    Hello Daniel,

    I think my last request is to change the font-family for the form field names and values.

    I’d like it to be nunito, light.

    Please change part of the code I gave you above to this one:

    .wpmui-field-label,
    .ms-form-element.ms-form-element-xprofile label,
    .wpmui-field-input,
    .ms-form-element.ms-form-element-xprofile input,
    .ms-form-element.ms-form-element-xprofile select {
    float: none !important;
    font-weight: 100;
    font-family: "nunito";
    }

    this way we can make bit less CSS code :slight_smile:

    It would also be great if the legend attribute ‘Create an Account’ could be hidden.

    It looks like this is already done :slight_smile:

    1. Make the ‘Register Your Account’ button the same width as the boxes above it (90%)

    #register.wpmui-submit button-primary {width: 97% !important;}

    2. Change the value of the register button to read ‘Proceed to Payment’

    In register shortcode add label_register=”Proceed to Payment” and this will change the button.

    On the same page, I’m trying to display the cost of the plan. I’m using the shortcodes from membership 2 to auto-fill the cost, but it doesn’t include the ‘$’ symbol

    I assume you are using this [ms-membership-price] shortcode? If yes then add currency=”yes” it should show currency automatically.

    kind regards,

    Kasia

  • Kasia Swiderska
    • Support nomad

    Hello Daniel,

    That would be correct because this currency is set in your Global payment settings in Membership 2 Pro

    so it show currency as CAD. I think that $ sign is only used when currency is USD. But I tested shortcode for price this way:

    $[ms-membership-price id="5820" currency="no" label=""]

    and there is no space between $ and price. There will be space if you use it as label in shortcode.

    kind regards,

    Kasia

  • Kasia Swiderska
    • Support nomad

    Hello Daniel,

    I’m sorry for the code for last button – there was typo in code. It should look like this:

    #register.wpmui-submit.button-primary {width: 97% !important;}

    if this also wont work, please try this

    body #register.wpmui-submit.button-primary {width: 97% !important;}

    kind regards,

    Kasia

  • Daniel
    • The Incredible Code Injector

    Thank you again, Kasia!

    Do you know how I can force the description for the 'City (required)' field to wrap to the same width as the other elements on the form?

    Secondly, I'm using a shortcode to pull the description of each membership from the plugin, but I can't get it to centre justify. Do you know how I could do that as well?

    Image attached for reference.

  • Kasia Swiderska
    • Support nomad

    Hello Daniel,

    Do you know how I can force the description for the ‘City (required)’ field to wrap to the same width as the other elements on the form?

    Please try this code:

    .ms-form-element p.description {width: 90% !important;}

    Secondly, I’m using a shortcode to pull the description of each membership from the plugin, but I can’t get it to centre justify. Do you know how I could do that as well?

    Can you add again this shortcode in this place, and don’t use the formating from the upfront and add this styles:

    .plain-text-container .ms-membership-details {text-align: center;}

    kind regards,

    Kasia

  • Nithin
    • Support Wizard

    Hi Daniel,

    Hope you are doing good today. :slight_smile:

    .plain-text-container {
    text-align: justify;
    }

    Please try the following CSS, I hope this is what you were trying to achieve.

    Please let us know if you need any further help. Have a nice day. :slight_smile:

    Kind Regards,

    Nithin

  • Kasia Swiderska
    • Support nomad

    Hello Daniel,

    You are right, adding this to the global CSS will make all text justified. In order to apply this rule to one place you need to click settings for this one particular text element and create new preset. Then edit CSS only for this new preset. Then in CSS add this:

    .plain-text-container {text-align: center;
    }

    I'm attaching screenshot how it looks on my testing site:

    kind regards,

    Kasia

Thank NAME, for their help.

Let NAME know exactly why they deserved these points.

Gift a custom amount of points.