Is there a way to add a thank you response to an embedded form?

[Anonymous]

Good Afternoon,

Below is a screenshot of the embedded opt-in form on our website. After completion of the form is there a way to have the screen say "Thank you for subscribing" and remove the form field?

Thanks,
Evan

[SanfordWhiteman · Accepted solution]

Of course.  I wish I had my Forms 2.0 Cookbook ready for publication, because I've demoed this kind of thing a couple of times on this forum and it'd be easier to send you there!  Anyway: http://jsfiddle.net/sanford/q0u0fx9k/

[Anonymous]

Sanford Whiteman​

Hi Sanford. I am trying to do this as well but it's not rendering correctly. The form field disappears but "Thank You" does not show. Any idea? I've replaced lines 1-3 with the embed code of the form I am using.

Also, once we figure that out is there a way to customize the font for the "thank you" ?

Thanks!

Katie

[SanfordWhiteman]

What's your URL?  Obvs. the demo works so there's probably a typo.

(Yes, you can easily change the font.  The text could easily be wrapped <SPAN class='whatever'>Thank you for your submission</SPAN> or any other arrangement of elements.  The world is your oyster there.)

[Anonymous]

Here is URL: https://go.apperian.com/new-customer-success-program-tools-tips-tricks.html

The code I am using is:

<script src="//app-sjl.marketo.com/js/forms2/js/forms2.min.js"></script>

<form id="mktoForm_623"></form>

<script>MktoForms2.loadForm("//app-sjl.marketo.com", "300-EOJ-215", 623,

    function(form)

    {

        form.onSuccess(function(form,thankYouUrl){

            var formEl = this.formElem[0],

                formElParent = formEl.parentNode,

                thankYouText = "Thank you for your submission!";

            formElParent.removeChild(formEl);

            document.body.insertAdjacentHTML('beforeEnd',thankYouText);

            return false;

        });

    });       

</script>

[SanfordWhiteman]

Replace

     document.body.insertAdjacentHTML('beforeEnd',thankYouText);

with

     formElParent.insertAdjacentHTML('beforeEnd',thankYouText);

[Anonymous]

Thank you!! That worked

One thing, if I try to wrap the text, the form doesn't show at all on the LP.  I am likely adding it wrong...:)

<script src="//app-sjl.marketo.com/js/forms2/js/forms2.min.js"></script>

<form id="mktoForm_623"></form>

<script>MktoForms2.loadForm("//app-sjl.marketo.com", "300-EOJ-215", 623,

    function(form)

    {

        form.onSuccess(function(form,thankYouUrl){

            var formEl = this.formElem[0],

                formElParent = formEl.parentNode,

                thankYouText = "<span style="font-size: 18px;" _mce_style="font-size: 18px;">Thank You!</span>";

            formElParent.removeChild(formEl);

            formElParent.insertAdjacentHTML('beforeEnd',thankYouText);

            return false;

        });

    });      

</script>

[SanfordWhiteman]

You can't wrap double quotes like that -- it's a syntax error.

Use single quotes on the outside if you need double quotes inside the text:

     thankYouText = '<span style="font-size: 18px;" _mce_style="font-size: 18px;">Thank You!</span>';

[Anonymous]

Thank you!!!!! Very much appreciated

[Anonymous]

This worked great, thanks for the information!