PLEASE NOTE: These forums are no longer utilized and are provided as an archive for informational purposes only. All support issues will be handled via email using our support ticket system. For more detailed information on this change, please see this blog post.

Changing or styling the layout of the notification message

  1. Hi

    I have tried searching the forums, but no luck on this particular question.

    I have made a notification message that is being build in functions.php (

    What I am guessing is code to control the layout looks like this:
    $confirmation = "<div id='gforms_confirmation_message' style='text-align:left; padding: 10px;'>
    Looking at this code, I am thinking that the text in the notification message should be aligned to the left, but when I use the form, the text I get is centered.

    1. I would very much like the text to be aligned to the left, like the text in this forum is aligned to the left. Can you help me to do this?

    I do not know if it makes any difference to the notification message, but the form is on multiple pages, and it is using ajax.

    2. One last question, can I get the browsers back button to work? Right now it does not work when using the form, it would be nice if I could get it to work.


    Posted 11 years ago on Monday September 5, 2011 | Permalink
  2. I really have no idea what you're talking about with the first part? Are you wanting to actually change the confirmation message markup for some reason? It sounds like you just need to target the container div and change the styling with CSS. You can do that by adding this to the end of your theme stylesheet.

    body #gforms_confirmation_message  {text-align: left}

    As far as the last question, No, if you're using the Ajax submission method, you're not going to have a browser history or any "back" state for the button.. that's the whole point, Ajax submits the form without actually refreshing the page.. there's nothing to go back to. Is there any specific reason you need to use Ajax? If not, just disable that and you're browser back button should work for you.

    Posted 11 years ago on Monday September 5, 2011 | Permalink
  3. Hi Kevin

    Thank you for your answer, I had to disable Ajax to get it to work, but now my notification message aligns to the left, very nice, Thanks!

    The first part is me, trying to let you know, what it is that I am doing to "make" the confirmation message. Chris made some example code ( that I have used, and in the beginning of that code it has that div tag, that I am guessing, is also "trying" to control the layout.
    And I wanted to let you know that, because that might have an impact on the answer.

    A conclusion to this question is that:
    1. Now my notification message is aligning to the left, and I am very happy about that!
    2. I might have to much code trying to control the layout, both in the style sheet and in functions.php

    I did not need Ajax, I just seemed like the form loaded a little faster with Ajax turned on, but after turning it off, I am thinking that is not the case, and I have no problem turning it off. (I have no test of the speed of the form, it was just a feeling)


    Posted 11 years ago on Tuesday September 6, 2011 | Permalink
  4. Great, I'm glad that worked for you.

    Posted 11 years ago on Tuesday September 6, 2011 | Permalink
  5. Carsten, this line:

    <div id='gforms_confirmation_message' style='text-align:left; padding: 10px;'>

    Can be whatever you want. I just used that to ensure that the confirmation we built in functions.php was placed in the same div as a confirmation would be if you just used "text" for your confirmation settings. Doing it this way ensures that the confirmation message we built is styled just as a normal text confirmation would have been. If you want to affect the look here, you can do as Kevin suggests, by applying styles to the body #gforms_confirmation_message element. That will affect all forms' confirmation message.

    You could also do this:

    <div style='text-align:left; padding: 10px; border:5px solid #000000; background: yellow;'>

    You could add any inline styles at all to this opening div. I added some deliberately bold styles there so you can see what it looks like.

    A 3rd way to do it would be to give the confirmation a new id or class, then add styles to your stylesheet. There are many ways to accomplish the same result.

    <div id='gforms_confirmation_message' class='hand_made'>

    Then add a block to your style.css to style the .hand_made class:

    body #gforms_confirmation_message .hand_made {
        border: 1px solid red;
        padding: 10px;
        text-align: left;
        font-size: 24px;
    Posted 11 years ago on Tuesday September 6, 2011 | Permalink
  6. Hi Chris, Kevin and the rest of the GF team.

    I have moved my form to a different website, than the one where I developed it, and now I am having problems with the styling, I admit that I do not know much about css, but I am learning along the way.

    My problem now seems to be that the stylesheet from GF "overwrites" the styles that I am trying to implement in my own stylesheet. Or that the style that I am trying to implement, is not overwriting the style from the GF stylesheet.

    When I look at my page in Firebug, it looks like the styling for the (#gforms_confirmation_message) comes from the GF style sheet, even though I have added the above sugested lines of code in my stylesheet:
    (#gforms_confirmation_message .hand_made) I have also tried with body in front, but that does not change anything, I have also tried to only have .hand_made, but not working either.

    What information do you need to be able to help me? Or do you have enough to go by here?

    The website where I am having this problem is ( the form is located here: ( the page with the form has not been made public anywhere else than here, because I am having problems with the styling.


    Posted 11 years ago on Monday September 12, 2011 | Permalink
  7. The way CSS inheritance works if you don't properly define your selector when applying your CSS then it may not apply it and may be overridden by default styles. So you have to target and apply your CSS correctly otherwise it may not work due to other factors such as styles in your theme.

    I would suggest looking at this documentation which discusses how to properly target and style form elements:

    Posted 11 years ago on Monday September 12, 2011 | Permalink
  8. Hi Carl

    Thank you for your link, it made me do some more testing, and it turns out that this code actually did the trick:
    body #gforms_confirmation_message.hand_made
    The big difference is that now there is no space between #gforms_confirmation_message and .hand_made

    I do not know why this worked, and if you could explain it to me, I would appreciate that. :-)

    And I am sure that the link will come in handy now when I have to style the rest of the form, not only the confirmation message.


    Posted 11 years ago on Monday September 12, 2011 | Permalink
  9. If the "hand_made" class is applied to your "gforms_confirmation_mesage" div, then this would be correct

    body #gforms_confirmation_message.hand_made {color:red }

    That means that the element has the ID of "gforms_confirmation_message" AND the class of "hand_made"

    if you leave the space between the two in the rule..

    body #gforms_confirmation_message .hand_made {color:red }

    that means you're targeting an element with a class of "hand_made" that is a CHILD of the "gforms_confirmation_message" element which is not the same thing.

    Posted 11 years ago on Wednesday September 14, 2011 | Permalink
  10. Hi Kevin

    Thank you for your explanation, I think that I understand it, and that actually it is working as expected.


    Posted 11 years ago on Thursday September 15, 2011 | Permalink
  11. Wonderful. Thanks for the update.

    Posted 11 years ago on Thursday September 15, 2011 | Permalink

This topic has been resolved and has been closed to new replies.