Lightbox form styled with an image | Community
Skip to main content
J
jendaytwo
New Participant
May 23, 2021
Solved

Lightbox form styled with an image

  • May 23, 2021
  • 1 reply
  • 6544 views

I have this lightbox form started in codepen:

https://codepen.io/daytwo-nutrition/pen/poeRdow

 

There are 2 things I need here:

 

1. I need this lightbox to be styled like this:

 

2. I need smartforms to work with the lightbox 

 

I tried to destyle the form using this code but it did not work:

https://codepen.io/figureone/pen/MbPOdj

 

Best answer by jendaytwo

Hey Jen,

 

I've updated the pen here: https://codepen.io/dRoberts/pen/MWpmPad

 

For the (X) icon on the right side of the invalid fields, I'll usually use an image there and load it into the background image of the input. With most elements you can get away with using the ::before and ::after pseudo-elements for this but those won't work for text inputs.

To update this, you'll just want to load a small image (I used 15x15 in the example) into your Design Studio (or on the website depending on where the form page is hosted) and swap out the URL of the placeholder to the URL of the image you just loaded. 

Use the "background-image" property to add validation icons to your fields.Use the "background-image" property to add validation icons to your fields.

For the validation styles, there's a class called ".mktoRequired" that gets put onto any input which is required. In the initial load state of the form, this is the only validation class present. Once you interact with a field, it'll get a new class which you can use to style the validation rules. The new class will either be ".mktoValid" for valid fields or ".mktoInvalid" for invalid fields. In this case, Im using the .mktoInvalid class to style the input to have a red border-bottom and text.

 

The error message is broken up into a few bits (I've clustered them in the pen) - there's a "container" that positions the text and then a "text box" with the text inside it. These have a bunch of little rules to override, but I'll usually just work thru the inspector looking at the existing styles and then writing new styles with a stronger [better] selector to override them.

For example, I'll use: form.mktoForm  { ...} 

Instead of: .mktoForm {...}  [which is how it is written on forms2.css and also targets <div class="mktoForm">...</div> which doesn't really help]

 

The Bootstrap adjustments to add a modal to your page would probably need to get added in at the template level, so there might be a bit of dev overhead there to get it setup but from my experience, it's much easier to manage and customize (albeit technical) compared to the built-in lightbox functionality. Most templates these days use Bootstrap in one way or another, so you might already have something like this setup on your template. If you'd like to open a new thread that's more specific to "how to make a modal using Bootstrap" and post some working code for a template there (that uses bootstrap) I'd be happy to help walk thru setting that up a little at at time in the community here -- I think it might be something everyone could benefit from.

 

Finally, in terms of using the !important flag to override a bunch of styling stuff -- it's definitely not ideal or as good as it "should" be, but given the way Marketo is loading the styles onto the page and the load order of things you add beyond that, it's usually the path of least resistance in the longrun --  albeit a bit clunky and manual (the advantage is that it's a little easier to update/edit once you've got the initial round of styles in there b/c everything is more accessible - there's just a lot to get together). 

 

Let me know if those new styles work out for what you were after or if you've got any questions about how any of that stuff works.

 

Thanks again,

Dave


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.

1 reply

SanfordWhiteman
SanfordWhiteman
New Participant
May 24, 2021
I tried to destyle the form using this code but it did not work:

https://codepen.io/figureone/pen/MbPOdj

Not sure what you mean by "did not work"? You're not currently loading that code in your Pen now.

 

Based on your mockup, I would say you don't want to use the Marketo Forms built-in lightbox, because it's not designed to put the form in the 1st column of a 2-column layout (the image being the other col). Instead, use a 3rd-party lightbox like Magnific Popup or fslightbox. (Ordinarily I'd avoid jQuery, which Magnific depends on, but the fact is you always have jQ as MktoForms2.$ if you have a Marketo form, so there's no overhead.).

 

But I don't see a distinct reason that you'd need to remove (as opposed to simply override) the Marketo CSS? The form itself isn't drastically reformatted that I can see.

 

SmartForms, to the degree they work*, will work fine whether the form is in a modal or not.

 

 

*last time I checked their attempt to integrate w/the Marketo JS API, it was really sloppy,
but the lightbox wouldn't make it more or less sloppy AFAIK

J
jendaytwoAuthor
New Participant
May 24, 2021

Hi @SanfordWhiteman  sorry about the incorrect pen link. I think the one I sent you was one of yours that I also had open:

 

https://codepen.io/daytwo-nutrition/pen/poeRdow

 

So two things:

 

1. the form input fields have strange grey shading at the top and inside the input boxes themselves

 

2. The background image is loaded via CSS. Can I not lock it in place for desktop and present a form like this for tablet/mobile?:

3. Hopefully simple thing. Adding content above the form - how do I do that?:

 

I am going to assume you will say the mobile option is the only one that will work using a Marketo Lightbox - correct?

 

Another question. How do you suggest implementing forms2.js? In the header on every page? In the footer on every page? Using GTM?

 

Thank you,

Jen

Dave_Roberts
Dave_Roberts
New Participant
May 24, 2021

Hey Jen,

I fiddled with the code you added to CodePen and have something setup here: https://codepen.io/dRoberts/pen/MWpmPad 

Disclaimer: This is my first "pen" so lemme know if you're not able to see/access that for whatever reason.

 

Here's a look at the desktop view:

Desktop view

 

...and the mobile view where everything is stacked:

Mobile View

 

I did my best to comment and organize the CSS so it was a little easier to find things if you wanted to make any adjustments. Let me know if you've got any questions about the styling or if this looks like it might work for what you're after?

 

1. the form input fields have strange grey shading at the top and inside the input boxes themselves

This is a "box-shadow" rather than a border. Sometimes a 1px box shadow is used in place of a border or outline.

 

3. Hopefully simple thing. Adding content above the form - how do I do that?:

To add some content above the form, you'd want to do that in the form editor and just drag in a new Rich Text element to the top of the form and add your H4 and paragraph inside the editable area there.

 

etc.

For what it's worth, if you're already using a page built on Bootstrap there's a native "modal" element that works really well to put an editable form and/or text element into without dealing w/ all the noise of the built-in lightbox feature. This takes a little setup at the template level, but it basically puts you in a place to be able to design and edit the modal experience instead of overriding styles and being stuck w/ the native lightbox architecture. 

Terms & ConditionsAccessibility statement

Loading footer...