Black Friday Sale! Get up to $40 off GP Premium!Learn more

[Resolved] How to change default look of form fields and buttons

Home Forums Support How to change default look of form fields and buttons

Viewing 12 posts - 1 through 12 (of 12 total)
  • Author
    Posts
  • #486653
    Halil

    How can I change the default look of form fields (input fields) and buttons (like Subscribe button)?

    there are some space between them which is greater than I like and I’d like to have a bit rounded corners. Should I edit css for each form or is there a way to change default look.

    GP Premium 1.5.6
    #486820
    Leo
    Staff
    Customer Support

    Hi there,

    Looks like you are able to achieve what you want already?

    GP has buttons colors in the customizer, other customization require some CSS for sure.

    Let me know if you need help with the code.

    #486945
    Halil

    Yes I did but I wrote a css code spesific to each form. How can I change the padding/width/height etc when I have multiple input fields and submit button.

    I’d like to write one css to rule them all form behavior. (like changing the color of a button in customizer so it’ll apply to all buttons)

    #487238
    Leo
    Staff
    Customer Support

    This selector should take care of all the input area:
    input[type="text"], input[type="email"], input[type="url"], input[type="password"], input[type="search"], input[type="tel"], input[type="number"], textarea, select

    Sometimes the plugin you are using to might have their own style to overwrite the form though. Best to learn to use inspect element if you want to do lots of coding 🙂

    #487280
    Halil

    thanks. I’ll check them.

    #487407
    Leo
    Staff
    Customer Support
    #488470
    Halil

    I did checked them and I couldnt do something I want. I am really bad with inspect element.

    https://powerbi.istanbul/dax-ve-veri-modelleme/

    On this page, in the sidebar bottom, both input and submit fields should be inline for tablets/desktops but they are not! What should I add or change so that this 2 fields are always inline for screen sizes greater than phone (580?)

    For phone I wrote something like @media( max-width: 580px ) … It looks working, however I’d like to have both fields are equally sized but submit button looks short. Can I do something for this?

    there is also another form on the page site? How do I write css for spesific forms? How will I say change input field for form lets say 1580?

    #488645
    Leo
    Staff
    Customer Support

    They are stacked on top of each other on mobile because of this CSS you’ve added:

    @media (max-width: 580px) {
        .mc4wp-form input[type="email"] {
            display: block;
            margin-bottom: 10px;
            width: 100%;
        }
    }
    @media (max-width: 580px) {
        .mc4wp-form input[type="submit"] {
            display: block;
            margin-bottom: 10px;
            width: 100%;
        }
    }

    display: block and width: 100% makes them stack on top of each other. Remove the CSS should make them inline.

    To make the size of the submit button bigger, you can try increasing the left and right padding of the button:

    input[type=submit] {
        padding: 10px 70px;
    }
    #488746
    Halil

    thanks Leo,

    I have deliberately written this code for mobile, they should stacked on top of each other for mobiles.

    For other screen sizes, othen then mobile, they should be inline but they are not!

    what should I add to force it ? any comment will help.

    #488915
    Leo
    Staff
    Customer Support

    They are inline to me on desktop: https://s18.postimg.org/pcp5otgmh/2018-02-05_1528.png

    When I try resizing the browser window, they stay inline until there isn’t enough space at around 1480px:
    https://s18.postimg.org/x5fth5wzt/2018-02-05_1530.png

    Then there is simply not enough space and I don’t think there is a way for it.

    #489483
    Halil

    thanks for checking out Leo.

    #489596
    Leo
    Staff
    Customer Support
Viewing 12 posts - 1 through 12 (of 12 total)
  • You must be logged in to reply to this topic.