• Resolved bdd

    (@bws-online)


    I’m good with the styling for the Submit button, but I need help with how to style what comes after you choose that button. It’s happening fast so I’m not getting the chance to Inspect Element and figure it out.

    It looks like it says “Sending…” in a similar style to the hover/active state of the submit button, and then it looks like a very faint outline where the button used to be, maybe a very light gray button of some sort?

    I’d like to be able to style both of those if possible. Thanks.

Viewing 3 replies - 1 through 3 (of 3 total)
  • Plugin Support Jess Quig

    (@jquigam)

    Hi bws-online,

    Yes, that’s right 🙂 After the user clicks submit, there’s a brief period when the button will say “Sending…” (or any custom text you may have added in the form settings) and the button will be disabled. At this point, the button will also become lighter, mainly to reinforce that it can’t be clicked again at that point.

    In case it helps, I created a setup to slow this process down and recorded a screencast video.

    Also, here’s the CSS you’ll see appear in dev tools:

    div.wpforms-container-full .wpforms-form input[type=submit]:disabled, 
    div.wpforms-container-full .wpforms-form button[type=submit]:disabled,
    div.wpforms-container-full .wpforms-form .wpforms-page-button:disabled {
        background-color: #eee;
        border: 1px solid #ddd;
        cursor: default;
        opacity: 0.5;
    }
    

    Within that snippet, you can adjust any styles you’d like.

    It sounds like you’ve already worked with custom CSS before, but in case it helps anyone else here’s WPBeginner’s tutorial on how to add custom CSS to your site.

    I hope this helps! 🙂

    bdd

    (@bws-online)

    Thank you Jess!

    It felt like there were actually 3 states on the button — available, sending/not available, and then a very faint/almost-not-there version. But all good, I’ll work with this as needed.

    (I’d switched to another form plugin in the meantime because I needed a free option that kept track of the entries. But I liked what I saw of WPForms and hope to use it in the future.)

    Plugin Support Jess Quig

    (@jquigam)

    I hope you do give us another shot at some point! 🙂

Viewing 3 replies - 1 through 3 (of 3 total)
  • The topic ‘CSS styling for Sending…’ is closed to new replies.