Trying to style a Sign up form.. but not sure what I am doing

Hello,

I have 2 questions:

1.) I am trying to style my sign up form located here (http://seoinerg.com/sign-up/)
I have attached images so you can see what I am trying to get it to look like.

2.) How would I get the field labels inside the actual boxes like the screenshot shows?

  • Rupok

    Hi ME Admin, how are you doing today?

    Thanks for attaching an image. Can you please confirm what exactly from that image do you want to implement on your signup form? If you want to add a background, make labels show only inside the input fields, and make the button larger? If these are all you want, then you can use the following custom CSS Code:

    .mepr-signup-form {
      background: rgba(0, 0, 0, 0) url("http://www.cfau-pd.net/images/hd-background-wallpaper/hd-background-wallpaper-15.jpg") repeat scroll 0 0;
      padding: 40px;
    }
    .mp-form-label {
      display: none;
    }
    .mepr-submit {
      background: #00ff44 none repeat scroll 0 0;
      border-radius: 10px;
      height: 50px;
      width: 200px;
    }

    You can add this to a theme's stylesheet, in a child theme, or using a plugin like My Custom CSS.

    In your form, you already have field placeholders inside the actual boxes, so do you want to edit them or do you want to hide the labels above those input fields? Can you please describe a little more? That will help us to give you proper solution.

    Please let us know if you need more. We will be glad to help.

    Have a nice day. Cheers!
    Rupok

  • ME Admin

    Thanks Rupok.. I've been messing around and figured out how to get those placeholders in there..

    the code is exactly what I needed.. thanks for your help on this.

    I actually edited the .php text values to "hide the labels" I removed them ha. But it seems to be ok.. would it be a better practice to hide the labels with css?

    Finally, I should have just supplied the link to the form I am trying to grab some ideas from

    here it is https://www.headspace.com/

    you will notice as you move your mouse over each input box it highlights with a color.. I have no clue how to do that.. other than that, I think I am pretty close..

    oh and.. if you dont fill out those boxes and hit submit.. messages come up letting you know what to do for each box and their text is styled, how might I apply styling to my error text?

    Thanks again, this has been a great day!! Hope you are doing well

    Cheers,
    Eric

  • Rupok

    Hi Eric, how you are having a wonderful day.

    would it be a better practice to hide the labels with css?

    Yeah, I think hiding this with CSS will be a better approach because that's easy to modify and override.

    you will notice as you move your mouse over each input box it highlights with a color.. I have no clue how to do that

    You can use the following custom CSS code to highlight the input field on mouse-over:

    .mepr-form-input:hover {
      background: #00ff44 none repeat scroll 0 0;
      transition: all 0.5s ease-in 0s;
    }

    how might I apply styling to my error text?

    You can add your desired property to "cc-error" class. For example, the following custom CSS code will modify the error text for you:

    .cc-error {
      background: #d7d7d7 none repeat scroll 0 0;
      border-radius: 5px;
      color: #000000 !important;
      padding: 10px;
    }

    Please let us know if you need more. We will be glad to help.

    Have a nice day. Cheers!
    Rupok

  • ME Admin

    AWESOME!!!

    Thanks for all your help on this.. I promise :wink: this is the last question..

    my form throws a red color when I click off the field without putting anything in the field.. how can I set this so it doesn't do that.. I would like the field to remain the same, with the current white background and no border change when I click off the field .. here's the link again to where my form is at, seoinerg.com

    That's it!

  • ME Admin

    AWESOME!!!

    Thanks for all your help on this.. I promise :wink: this is the last question..

    my form throws a red color when I click off the field without putting anything in the field.. how can I set this so it doesn't do that.. I would like the field to remain the same, with the current white background and no border change when I click off the field .. here's the link again to where my form is at, seoinerg.com

    and how can I change the font size of the text within the box?

    That's it!

  • Nithin

    Hi ME Admin,

    Hope you are doing good today. :slight_smile:

    my form throws a red color when I click off the field without putting anything in the field.. how can I set this so it doesn't do that.. I would like the field to remain the same, with the current white background and no border change when I click off the field

    Could you please try the following CSS, and check whether it works:

    .mepr-form input.invalid {
    	border: none !important;
    	background-color: #FFFFFF !important;
    }

    and how can I change the font size of the text within the box?

    #user_login {
        font-size: 20px !important;
    }

    Please try the following CSS code, you can increase, or decrease the value of 20, to get your desired font size. Using !important is not something we would suggest, but we haveto override in order to get these styles working.

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

    Kind Regards,
    Nithin

Thank NAME, for their help.

Let NAME know exactly why they deserved these points.

Gift a custom amount of points.