CSS Styling Help - Online Form

Hi

I have a web form on a page that looks quite rubbish, Ideally I would like it to appear much smarter and neater, I am really relaxed around the style of it but something like the form located here would be great;

http://www.multyshades.com/wp-content/uploads/2014/04/login-form-css3.jpg

The web page for my form is located here

http://v.policecommunity.co.uk/book-duty/

You will need to be logged in to access the form. Support access is granted.

I would be grateful of some CSS specific to this page that could help me out

Regards

Wayne

  • Adam Czajczyk

    Hello Wayne,

    I hope you're well today and thank you for your question!

    I've visited your site and checked the form. Making it look exactly like the one on the screenshot would require some additional work with changing its HTML code but much can be done with CSS only.

    That said, here's a couple of CSS rules that you may use to make the form "prettier":

    #loginform {display:block;margin: 20px auto;max-width:350px;background:#FFF;padding:30px;border:1px solid #cecece;-webkit-border-radius: 20px;
    border-radius: 20px;}
    #loginform p label {clear:both;display:block;font-size:20px;color:#999;}
    #loginform input[type="text"] {border:0;background:#F5F5F5;width:100%;font-size:15px;color:#777;padding:5px 10px 5px 10px;}
    #loginform input[type="submit"] {background:#2ECC71;border:0;font-size:15px;font-weight:bold;color:white;padding:10px 20px;border-radius:10px;-webkit-border-radius:10px;margin:0 auto;display:block;}

    That's not exactly the same as on image but should make a good starting point. You may want to add these CSS rules either to your child theme's style.css file (if you're using a child theme) or via a "Simple Custom CSS plugin".

    If you need further assistance, just let me know and I'll be glad to help!

    Best regards,
    Adam

Thank NAME, for their help.

Let NAME know exactly why they deserved these points.

Gift a custom amount of points.