0

Because it takes a long time for a Pardot form to get submitted I thought it might be best if I'd add a little loading animation to it just so people would not smash the button to make sure it works (or close the tab).

The difficulties:

  • I am no developer, have very little knowledge of JS
  • the rigid way a form is set up makes it even harder because I can't seem to fashion an existing solution with my current knowledge.
  • Can't change the existing HTML structure or add classes (maybe you can with JS?)

I'd want to do something simple preferably via only HTML/CSS but I think JS will be needed.

This is the sort of thing I am talking about: http://jsfiddle.net/AndrewDryga/GY6LC/

-

And here is an example form I need to make this happen: http://www2.idioplatform.com/l/20742/2018-04-18/5c8mk3

Can you give me pointers how should I go about making this work? Or where to look for help with implementing this?

I am happy to provide any additional details needed.

Thank you!

Balint Sipos
  • 119
  • 1
  • 1
  • 6

1 Answers1

0

You can add a class directly to your button in the Layout Template (Pardot) - see attached. That way you can try the link code @lewis referenced...be sure to create a new layout template and add the javascript there. enter image description here

Katy H.
  • 224
  • 1
  • 10
  • Wow this blew my mind. It was there the whole time. Thank you so much. I'll tinker around to see if I can make it work. – Balint Sipos Apr 19 '18 at 08:07
  • So I've tried to implement this but I must be screwing something up here. Now I can't even submit the form: http://www2.idioplatform.com/l/20742/2018-04-18/5c8mk3 Any idea what am I screwing up here? https://snipsave.com/balintsipos/#/snippet/ogDxdPdZIOEQ9BAWt4 // https://snipsave.com/balintsipos/#/snippet/vdYzE1LcXLR6o57fLc – Balint Sipos Apr 19 '18 at 10:13
  • Yes. I see that you added the script before the form loads. Try to move it under the form but before the close of the body tag. – Katy H. Apr 20 '18 at 09:46
  • I tested moving the script and it will work for @Lewis's example. For your original request, this would require a pseudo :before class. If I'm not mistaken, you can't add a pseudo class to input submit text. I have had this issue before and my hack was to mimick the button with the p.submit. - Best of Luck! – Katy H. Apr 20 '18 at 09:58
  • Huh I think I got the first bit to work: http://www2.idioplatform.com/l/20742/2018-04-18/5c8mk3 Now clicking on the button shows the loading animation. The problem is just to get the form processed and submit the info and proceed to the Completion actions. I'm guessing that's what you've mean with the pseudo classes. Do you remember how you actually did that p.submit bit? Or what do you mean by "mimick" exactly? – Balint Sipos Apr 20 '18 at 13:45