For the button being grayed out, that gets a little more complicated - as far as I know you need some script to achieve that behavior (Sanford keep me honest here).
That's right. You do need JavaScript. But you don't need to count the fields to determine validity, you can call validate().
Disable the button by default (set the Boolean property disabled to true).
Then when the form is first ready, do a first check to see if it's already valid (since Pre-Fill can mean it's valid to begin with). Whenever the input or change events fire on the form element, check validity again. When it becomes valid, enable the button by setting disabled to false.
Hi @SanfordWhiteman here is my code pen:
https://codepen.io/daytwo-nutrition/pen/poeRdow
I added the confirmation message but am still unsure about the submit button only turning blue on validation. Can you help me with the code?
Hello @Dave_Roberts & @SanfordWhiteman
I also was wondering if there is a way to pop a "thank you we will be in touch soon" message in the modal on submit or on the page? If not I will work on an automated email to be sent out on submit.
I also was wondering if there is a way to pop a "thank you we will be in touch soon" message in the modal on submit or on the page?
Sure, you can use the concept from this rather ancient blog post. It still works.
Thank you - that worked
Another question. How do you suggest implementing forms2.js? In the header on every page? In the footer on every page? Using GTM?
The forms2.min.js library should only be loaded separately from the <form> element if you have a range of different forms that can be used on the page (in different parts of the DOM).
In that case, you do only want to load the library once to eliminate extra network requests. (Note the library determines that it's already been loaded, so there's no functional risk to loading it more than once, only a bandwidth impact. But bandwidth is important, esp. on mobile.)
If you want to load it once, by all means put it in the <head>.
I wouldn't advise putting it in a tag manager unless you're very careful with load order. Lotsa pages out there trying to use MktoForms2 before it exists.
Otherwise, keep it with the <form> element followed by the <script> with loadForm() (i.e. the default embed code setup).
Thanks Sanford I believe I get it. If there is more than one form on a page would you still load the forms2.js with each embed code?
Thanks Sanford I believe I get it. If there is more than one form on a page would you still load the forms2.js with each embed code?
I would not. That creates network overhead.