Email Form Confirmation

[djguitar]

Hi, I’d like to use the email form element’s Confirmation Message area, but even in the custom styling area I’m not finding a way to control the appearance of the confirmation message. Currently it takes on a green color for confirmation, or pink for failure. I’d like to remove these colors and have control over the font style such that I can match it to page content.

Here’s an example of pink that I need to get rid of:

Thanks

[Joao]

Hi There,

Please provide your URL in order that we can take a closer look.

Thank you

[djguitar]

I’ve added a secure note to my original post.
Thanks

[Prasant]

Hello @djguitar,

Thanks for sharing login details.

Under Pro > Email Forms please enable Custom Styling option to customize form CSS. Let us know how it goes.

Thanks.

[djguitar]

Hi,

I’ve explored the Custom Styling area, as I mentioned in my first note. There’s nothing there that I can see which addresses my concern, unless you can clarify. It’s all buttons, border, margins etc, nothing about the confirmation message that’s viewable in the image I uploaded. I’d love for subscribers to just get a simple confirmation right there on the page, but it seems I’ll have to redirect them away to an alternate page just to say thanks for subscribing. Please tell me I’m wrong. Thanks

[lely]

Hi There,

Yes, those Custom Styling settings doesn’t include settings for confirmation message. You can redirect them to other page, or use direct custom CSS to change how it looks. We can use browser developer tools to inspect those element. See this:

This is how it should be by default:

Because of the following CSS specially the float left value, the background of the error overflow with the entire form.

.tco-subscribe-form fieldset {
    float: left;
    padding: 10px;
}

If you insist on adding the custom CSS, we need to clear the float like below:

.tco-alert-danger {
    color: #b94a48;
    border-color: #e5bdc4;
    background-color: #f2dede;
    clear: both;  /*This line was added*/
}
.tco-alert {
    margin: 0;
    border-left: 4px solid #f6dca7;
    padding: 0.915em 2.25em 1.15em 1.15em;
    font-size: 14px;
    line-height: 1.6;
    color: #c09853;
    background-color: #fcf8e3;
    border-radius: 3px;
    clear: both; /*This line was added*/
}

To understans better, see this too: https://www.w3schools.com/css/css_float.asp

Hope this helps.

[djguitar]

Thanks for the detailed answer.

[Joao]

Glad to hear we managed to help!