Change Contact Form Success Banner

Greetings!

I'm not too familiar with locating CSS elements.

How could I change the success/sent contact banner so that the words are centered and possibly change the color and font size or add additional padding if needed?

Much Love,
Ciro Bey

  • Kasia Swiderska

    Hello Ciro,

    To get needed classes you can inspect element with code inspector:

    You will see there elements with classes like .ucontact-msg.info - so for them you can add your changes. You should find those classes in Contact element preset CSS so there you can change styles or if those are not there you can add them like that:

    .ucontact-msg.info {
        background: #dff0d8;
        color: #3c763d;
        padding: 10px;
    font-size: 16px;
    }
    .ucontact-message-container.ucontact-success-response div p {display: block;}

    kind regards,
    Kasia

  • Rupok

    Hi Ciro Bey ,

    I've added the following custom CSS code in "Dashboard > Appearance > Custom CSS" section and this will make all your required changes:

    /* This will change the background of the success message */
    div#page .upfront-output-region-container .upfront-output-module .default .ucontact-msg.info {
      background: #ff0000 none repeat scroll 0 0;
    }
    
    /* This will change the text color, font size and padding of the success message */
    .ucontact-message-container.ucontact-success-response div p {
      color: #000 !important;
      font-size: 30px;
      padding: 20px;
    }
    
    /* This will center align the success message */
    .ucontact-message-container.ucontact-success-response div p {
      width: 690px;
    }

    You can change the color codes as you want. And my comment above each css block will explain what does what. And the output will be like this:

    Please let us know if you have any further query. We will be glad to help.

    Have a nice day. Cheers!
    Rupok

  • Ciro Bey

    Greetings Rupok
    Thank you for this code.

    How come the existing CSS in the element settings aren't applying properly? (see the first screenshot here). Shouldn't this code apply to the success banner displaying a light green background and dark green text without the code that was recently added via 'Custom CSS'?

    Is there a way to get this existing code to work without having to add additional code or implement the new code with the existing code? My apologies for any confusion here.

    Also, what would I use to add a space between the Success Banner and the name text of the contact form? I tried using 'margin-bottom: 30px;' but that had no effect.

    Thanks again for all the support

    Much Love,
    Ciro Bey

  • Nithin

    Hi Ciro Bey,

    Hope you are doing good today. :slight_smile:

    Is there a way to get this existing code to work without having to add additional code or implement the new code with the existing code?

    The existing code didn't work because there was a CSS overriding the color, I have added/edited the following CSS, in your custom preset, and now the success message seems to be working fine:

    .ucontact-success-response div p {
        display: block;
        color: #3c763d;
        text-align: center;
        padding-top: 1%;
    }

    The above CSS gives the dark green text color.

    Also, what would I use to add a space between the Success Banner and the name text of the contact form? I tried using 'margin-bottom: 30px;' but that had no effect.

    I have added margin to the class, .ucontact-success-response class, and now it seems to work fine.

    .ucontact-success-response {
        background-color: transparent;
        padding: 0;
        position: relative;
        margin: 0;
        margin-bottom: 5%;
    }

    I hope this helps. Please advise, if I had missed out anything. Have a nice day. :slight_smile:

    Kind Regards,
    Nithin

  • Rupok

    Hi Ciro Bey,

    I went to your site to check the current situation and to find out why your padding code is not working but it seems like your site is locked for logged out users and I can't find Support Access enabled. Would you mind allowing Support Access once again so we can have a closer look at this?

    To enable support access you can follow this guide here:
    http://premium.wpmudev.org/manuals/wpmu-dev-dashboard-enabling-staff-login/

    Please confirm here when you are done granting Support Access. I'm looking forward to hearing from you and resolving this issue as soon as possible.

    Have a nice day. Cheers!
    Rupok

  • Nithin

    Hi Ciro Bey,

    Hope you are doing good today. :slight_smile:

    Thank you for enabling support access, I could see extra padding, I have changed the given CSS for the class ucontact-success-response, as follows:

    .ucontact-success-response div p {
        display: inline;
        color: #3c763d;
        text-align: center;
        margin: 24%;
    }

    Now your success banner, seems to work fine.

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

    Kind Regards,
    Nithin