Formit Success Message To display on Screen Without Scrolling

[jamesjazz]

How to force the senders screen to scroll to the Success Message (on same page) after message has been successfully sent?

I have a Formit form displaying at the bottom of the page.
The form can send and can be received.
The Success Message displays as expected in the form.
However, the page resets to the top of the page, meaning the sender has to scroll all the way down the page to see the Success Message.

Is there any solution to this?

My concern is the sender may not scroll and just abandon the page after form submission, or worse just refresh the page so the form sends a second time.

My Formit code below:

   &hooks=`spam,email`
   &emailTpl=`emailTPL`
   &successMessage=`Your comment has been submitted successfully, please check your email.`
   &emailTo=`[[+email]],someone @ email. com`
   &emailFrom=`someone @ email. com`
   &emailSubject=`[[+name]] Sent Us A Message`
   &clearFieldsOnSuccess=`1`
   &validate=`nospam:blank,
      name:required,
      email:email:required,
      contactemail:blank,
	  adsize:required,
      subject:required,
      text:required:stripTags,
	  confirmemail:blank`
  ]]
  [[!+fi.validation_error_message:notempty=`<p>[[!+fi.validation_error_message]]</p>`]]
  [[!+fi.successMessage]]

[halftrainedharry]

One way is to add a hash to the action attribute of the <form> tag.

<form id="myform" action="[[~[[*id]]]]#myform" method="post">   
   ...
</form>

On reload the page then jumps to the <form> tag.

---

You could also move the [[!+fi.successMessage]] placeholder to a different place in the HTML markup, or use CSS to display it differently.

---

And you could use an extra like AjaxForm to send the form with AJAX so no reload is necessary.

[jamesjazz]

Hi Harry,

Thanks for the suggestion.
However, I cannot get it to work.

This is my new form action code:

    <form action="[[~[[*id]]]]" method="post" class="form" form id="contact-form" #contact-form" method="post">

This is my new form submit/post code:

    <div class="form-buttons">
        <input type="submit" value="Send Contact Inquiry" />
    </div>
    <br class="clear" />

Any idea what I have done wrong?

[halftrainedharry]

@jamesjazz

<form action="[[~[[*id]]]]" method="post" class="form" form id="contact-form" #contact-form" method="post">

Did you paste the wrong content? I’m really confused!

---

Maybe this is what it should be:

<form id="contact-form" action="[[~[[*id]]]]#contact-form" method="post" class="form">

[jamesjazz]

Hi Harry,

Yes, this method works

I did have to alter my Success Message by inserting 4 line breaks in before the message, then the message was at the top of the screen.

&successMessage=`<br><br><br><br><p style="color:green;">Your comment has been submitted successfully, please check your email.</p>`

Thanks so much, that’s two formit issues solved in one day

[johnmacdonald]

@jamesjazz, since you’re already using a style attribute, you could add padding to the top of the paragraph instead of breaks – I think it’s more flexible.

For example:

&successMessage=`<p style="color:green; padding-top: 48px;">Your comment has been submitted successfully, please check your email.</p>`

I don’t know your setup, but another method would be to use a class and put the style rules in a stylesheet.

[jamesjazz]

Hi John,

Thanks for the suggestion. It sounds like a good idea.
I will try it out and see the result.