Possible to move the form error message?

  • 6 December 2010
  • 15 replies
  • 10 views
D

Is it possible to move around the error messages on your form? Right now, our error message covers up our “Submit” button and I’d like to move it somewhere else on the landing page.

15 replies

J

Hi David, unfortunately I can give you the answer you want. At this time their is no way provided by the editor position the error messages. They are positioned automatically to one side of the form or other depending on the position of the form and the width of the browser window.

We will look into alternative methods for placing the error messages but this may take some time before we are able to provide a better solution.

Justin

Michael_Tucker

If you guys could make this more customizable that would be great. I had to write some css styles for mine because it was showing up on the bottom of the page. Still doesn’t look right though. I don’t really have any custom styles either so I’m not sure what is causing it.

bshyong

any updates on this as of Oct 7?

D

It would be great if we could customize this, as our validation error message blocks the form fields so you cannot amend the form to fix it. You can move the browser or refresh the page but this is not intuitive.

R

It’s been 5 years now. Has it become possible to position this error message yet?

J

Hi Radu, 
This is something that’s still in our backlog, as fixing this would require a rebuild of forms in it’s entirety to complete this. However, one of our awesome CS coaches came up with a temporary solution you might find useful. Try the form on this page to view the form error behaviour. The form error message should disappear after 1 second, and if it reappears, you can click it to have it disappear. Give it a try and let me know if you’d like the javascript code: 
http://unbouncepages.com/error-message-disappears/

R

Yes, this seems to be a lot like what we would need to solve our problem. I would really appreciate to have the javascript code for this implementation of form error messages.

S

Hi! I would like to know the javascript code too! Thanks :) 

S

Here is the code!

J

Thank you Stephanie! Not sure how this one slipped by my radar. 

M

To be clear, do you need to add this to each individual page and change the #lp-pom reference for each page it is on?

M

redirect of old variants

G

Hi Justin, could you give me the code?

Jess
Rank
Userlevel 7
Badge +1

Hey Glenn! Thought I’d jump in here. 🙂

Here’s the Javascript you’re looking for:

<script>
  $(function(){
    $(".lp-form-errors").click(function(){
      $(".lp-form-errors").fadeOut()
    }); 
    $('.lp-pom-form .lp-pom-button').click(function(){
      setTimeout(function(){$(".lp-form-errors").fadeOut()},9000)
    })
  });
</script>

And the Stylesheet that goes along with it:

<style>
.lp-form-errors element.style{

    right: 100px !important;
}
</style>

Let me know how that works!

Cheers

J

Is this the java that makes the error dialogue fade? Does it go in Head?

Reply


Terms & ConditionsCookie settings