SOLVED

Lightbox form styled with an image

Go to solution
SanfordWhiteman
Level 10 - Community Moderator

Re: Lightbox form styled with an image


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.

jendaytwo
Level 2

Re: Lightbox form styled with an image

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?

jendaytwo
Level 2

Re: Lightbox form styled with an image

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.

SanfordWhiteman
Level 10 - Community Moderator

Re: Lightbox form styled with an image


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.

jendaytwo
Level 2

Re: Lightbox form styled with an image

Thank you - that worked

SanfordWhiteman
Level 10 - Community Moderator

Re: Lightbox form styled with an image


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).

 

 

jendaytwo
Level 2

Re: Lightbox form styled with an image

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?

SanfordWhiteman
Level 10 - Community Moderator

Re: Lightbox form styled with an image


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.