SOLVED

Embedded form success message after fill out

Go to solution
Highlighted

Embedded form success message after fill out

We are embedding a Marketo form on our website and would would like a success message instead of linking to another page.

When a user clicks "SUBMIT" on form can we stop the page from loading? How do we show a success message a under the email input box? If an user email address is already in the list, can we return a message letting them know this and a link to manage there preferences?

1 ACCEPTED SOLUTION

Accepted Solutions
Highlighted
Level 2

Re: Embedded form success message after fill out

Hi Kelly,

You can show the custom message on the form submission. You just need following basic javascript for the same:

form.onSuccess(function(values, followUpUrl) {

form.getFormElem().html("Thanks for Registering!<br />You'll be hearing from us soon.");

form.getFormElem().css("text-align","center");

form.getFormElem().css("font-family","'GalanoGrotesque-Regular'");

return false;

});

To show success message underneath email input you can use jquery insertAfter selector.

Best Regards,

Avtar Singh

View solution in original post

6 REPLIES 6
Highlighted
Level 10 - Community Moderator

Re: Embedded form success message after fill out

Have you searched for the first 2 questions? There are myriad examples of using Thank You text/Thank You DIVs here on the Community.

The question of identifying whether a lead is in a given list has come up several times, too. Search for "lead lookup form."

Highlighted
Level 2

Re: Embedded form success message after fill out

Hi Kelly,

You can show the custom message on the form submission. You just need following basic javascript for the same:

form.onSuccess(function(values, followUpUrl) {

form.getFormElem().html("Thanks for Registering!<br />You'll be hearing from us soon.");

form.getFormElem().css("text-align","center");

form.getFormElem().css("font-family","'GalanoGrotesque-Regular'");

return false;

});

To show success message underneath email input you can use jquery insertAfter selector.

Best Regards,

Avtar Singh

View solution in original post

Highlighted
Level 10 - Community Moderator

Re: Embedded form success message after fill out

When posting code, please highlight it using the Advanced Editor's syntax highlighter so it's readable:

https://s3.amazonaws.com/blog-images-teknkl-com/syntax_highlighter.gif

Highlighted

Re: Embedded form success message after fill out

Thanks! Super helpful!

Highlighted
Level 1

Re: Embedded form success message after fill out

I'm trying to add a success message, however, my form completely disappears when using the following code. Any help would be appreciated.

 

<script src="//app-ab23.marketo.com/js/forms2/js/forms2.min.js"></script> <form id="mktoForm_1253"></form> <script>MktoForms2.loadForm("//app-ab23.marketo.com", "360-XJZ-500", 1253);MktoForms2.whenReady(function(form){ var formJq = form.getFormElem(), formEl = formJq[0]; form.onSuccess(function(values, followUpUrl) {form.getFormElem().html("Thanks for Registering!<br />You'll be hearing from us soon.");form.getFormElem().css("text-align","center");form.getFormElem().css("font-family","'GalanoGrotesque-Regular'");return false;});</script>

 

Highlighted
Level 1

Re: Embedded form success message after fill out

@SanfordWhiteman are you able to help me with the below query?

 

We're trying to embed a form on our website. I'm able to get the form to show, however when trying to add a success message (vs. refreshing the page), the form disappears completely.

 

Thank you in advance!

Tags (2)