Styling inline success message

  • Resolved John

    (@dsl225)


    4 years, 4 months ago

    Hi folks,

    Is there a way to style a bit the inline success message that displays by default above the form after submission?

    For instance:

    – display the message at bottom of the form instead of above (as you do with your own contact form at your site for instance)?
    – As I want to add some fields from the form as confirmation (ie: {text-1}, {name-1}, etc) is there a way to separate them with line breaks? I tried with <p></p> and <p> </p> but didn’t work.
    – change background color and text font/size?

    For the first question about the placement at bottom instead of above the form, I’m using Ajax and I see the form scrolls to top after submission. So, changing this placement would only make some sense if the form somehow remains aligned at bottom (as this happens at your own contact form for instance).

    Many thanks!

Viewing 6 replies - 1 through 6 (of 6 total)

  • Hi @dsl225,

    Line break separation: try <br /> – it worked for me in the email body.

    Regards,

    • This reply was modified 4 years, 4 months ago by eugene212.
    Thread Starter John

    (@dsl225)

    Many thanks @eugene212 !
    That works fine indeed.

    Plugin Support Patrick – WPMU DEV Support

    (@wpmudevsupport12)

    Hi @dsl225

    I hope you re doing well.

    You will need to use the br tag, we already reported to our developers about the p tags not working on this, so I hope it will work on the future too.

    About the style, you can use custom CSS, the selector is:

    #forminator-module-ID .forminator-response-message.forminator-success{
    background: red;
}

    Replace the ID using your form ID.

    You can set a higher time before hiding the message to find all selectors too.

    Let us know if you need any further help on this.
    Best Regards
    Patrick Freitas

    Thread Starter John

    (@dsl225)

    Thanks Patrick @wpmudevsupport12, that’s fine then.

    Yes, the br tag does the job for now, no problem.
    And yes, in this case I have disabled message hiding so that the message remains in there.

    As we now abandoned the idea of having a second form as confirmation page, we are going to use those inline messages.

    – Is there a way of getting the submission ID in there?

    Thanks to your help, we are sending this ID already to Google Sheets with the snippet you provided and it works great. We are just wondering whether it would also be possible to get it here, in the inline message. Not a must but would be nice to have if a solution exists for that.

    I tested by adding {submission_id} and also the hidden field that goes to Google Sheets but doesn’t seem to work.

    Cheers.

    Plugin Support Amin – WPMU DEV Support

    (@wpmudev-support2)

    Hello @dsl225 ,

    You can use this code https://gist.github.com/wpmudev-sls/26edaf04eb5afed6f43e843c870dd07e to put submission ID in the inline message.
    Add {submission_id} into the message and it will display the ID.

    kind regards,
    Kasia

    Thread Starter John

    (@dsl225)

    Awesome!

    Many thanks Kasia @wpmudev-support2, works fine.

Viewing 6 replies - 1 through 6 (of 6 total)
  • The topic ‘Styling inline success message’ is closed to new replies.