Can form have thumbnail images next to a dropdown menu? - So, the images would be embedded within the form set-up?

Christine_LeBla · ‎07-18-2022

Is it possible, in Marketo, to have thumbnail images next to a dropdown menu? So the images would wind up embedded within the form setup?

Example: a series of poster designs from which to choose from and dropdown next to the thumbnail img to select QTY desired.

How would I even go about something like this in Marketo? Or, is there a workaround I should do instead?

Thank you.

Darshil_Shah1 · ‎07-18-2022

Yes, you can add images to the Marketo form by adding the rich text section next to the form fields. Something like below -

You can also add multiple product images, and quantity fields per your requirement. If you'd like the user to select the product in the image as well, you can add the respective products' checkbox field next to the image as well, so a user submiting the form would submit product checkbox, and it's respective quantitiy select field along with other form fields as well (you'd end up with a ton of fields though). I'd also recommend adding the proper field validation rules as well.

You may also need some custom CSS to make the form pretty on the landing page. 🙂

View solution in original post

Darshil_Shah1 · ‎07-18-2022

Yes, you can add images to the Marketo form by adding the rich text section next to the form fields. Something like below -

You can also add multiple product images, and quantity fields per your requirement. If you'd like the user to select the product in the image as well, you can add the respective products' checkbox field next to the image as well, so a user submiting the form would submit product checkbox, and it's respective quantitiy select field along with other form fields as well (you'd end up with a ton of fields though). I'd also recommend adding the proper field validation rules as well.

You may also need some custom CSS to make the form pretty on the landing page. 🙂

Christine_LeBla · ‎07-18-2022

Thanks much! This is awesome!

Christine_LeBla · ‎08-18-2022

Is there ability to make the image placeholder container clickable so end-user can click the thumbnail and view it larger?

SanfordWhiteman · ‎08-18-2022

Is there ability to make the image placeholder container clickable so end-user can click the thumbnail and view it larger?

Yes. But obviously this won’t happen automatically as, just with any other HTML <img> tag, there’s no built-in “pop-up”/“details”/etc. function.

If you tag the images in your labels with the appropriate class or data- attribute you can use any JS popup library.

Christine_LeBla · ‎08-19-2022

I'm working with a form...

To inject any JS, I would have to instead edit the template in order to place within the <head>... is that correct for Marketo?

I cannot apply JS code directly into the form, unless it's first referenced within the <head>?

Can you confirm that's how Marketo would need to handle it?

Thank you.

SanfordWhiteman · ‎08-19-2022

To inject any JS, I would have to instead edit the template in order to place within the <head>... is that correct for Marketo?

I cannot apply JS code directly into the form, unless it's first referenced within the <head>?

Not necessarily! There’s no reason for it to be in the head, it can just as easily be after the form embed. You simply need to wait for the JS to be loaded and for the form to be ready:

<!-- standard Form embed -->
<script src="//app-nnnn.marketo.com/js/forms2/js/forms2.min.js"></script>
<form id="mktoForm_1234"></form>
<script>
   MktoForms2.loadForm("//app-nnnn.marketo.com", "123-ABC-456", 1234);
</script>
<!-- /standard Form embed -->
<script src="//example.com/some/external/script.js"></script>
<script>
  MktoForms2.whenReady(function(mktoForm){
    // now you may use the external script features + the Marketo form
  });
</script>

SanfordWhiteman · ‎02-20-2023

To inject any JS, I would have to instead edit the template in order to place within the <head>... is that correct for Marketo?
I cannot apply JS code directly into the form, unless it's first referenced within the <head>?

Scripts can be in <head> or <body>.

You can also include scripts within a Rich Text area if you do it the right way.

Dave_Roberts · ‎02-21-2023

Another option here to get a script onto a Marketo Landing Page without editing the template would be to add it locally at the page level using the dropdown in the top-left corner of the LP Editor and choosing "Edit Page Metatags". There's an input there for "Custom Head HTML" that you can use to add a script or stylesheet, etc to "this page only" without needing to draft the template.

I'll usually use this approach (rather than adding it to the template) if it's a one-off or unique scenario.

Otherwise, I'll usually add it to the template if it's something that I would want added to "all pages that use this template".

Christine_LeBla · ‎08-19-2022

Running into an issue. - There will be multiple QTY drop downs next to each poster design.

Seems I cannot repeat and use the same 'Field' more than once within the form? Is that so?

I went with Field Type: Select... and for my values used numbers since end-user can only choose up to 5 posters of each design.

My Field name, for example, is called: Hot Buttons. ....Now it seems I am unable to use that Field again for these simple drop downs.

We just need to get the form submission to know how many of each design to send out. Please advise.

Just want a simple solution. To have to create several more Field names just for this 'one off' project won't be useful long-term.

Thank you.

Can form have thumbnail images next to a dropdown menu? - So, the images would be embedded within the form set-up?

Can form have thumbnail images next to a dropdown menu? - So, the images would be embedded within the form set-up?

Re: Can form have thumbnail images next to a dropdown menu? - So, the images would be embedded within the form set-up?

Re: Can form have thumbnail images next to a dropdown menu? - So, the images would be embedded within the form set-up?

Re: Can form have thumbnail images next to a dropdown menu? - So, the images would be embedded within the form set-up?

Re: Can form have thumbnail images next to a dropdown menu? - So, the images would be embedded within the form set-up?

Re: Can form have thumbnail images next to a dropdown menu? - So, the images would be embedded within the form set-up?

Re: Can form have thumbnail images next to a dropdown menu? - So, the images would be embedded within the form set-up?

Re: Can form have thumbnail images next to a dropdown menu? - So, the images would be embedded within the form set-up?

Re: Can form have thumbnail images next to a dropdown menu? - So, the images would be embedded within the form set-up?

Re: Can form have thumbnail images next to a dropdown menu? - So, the images would be embedded within the form set-up?

Re: Can form have thumbnail images next to a dropdown menu? - So, the images would be embedded within the form set-up?