SOLVED

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

Go to solution
Christine_LeBla
Level 2

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

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.

1 ACCEPTED SOLUTION

Accepted Solutions
Darshil_Shah1
Level 10 - Community Advisor

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

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

Darshil_Shah1_2-1658149241429.png

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

11 REPLIES 11
Darshil_Shah1
Level 10 - Community Advisor

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

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

Darshil_Shah1_2-1658149241429.png

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
Level 2

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

Thanks much! This is awesome!

Christine_LeBla
Level 2

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

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

SanfordWhiteman
Level 10 - Community Moderator

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


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
Level 2

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

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
Level 10 - Community Moderator

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


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>

 

Christine_LeBla
Level 2

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

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.

 

 

Christine_LeBla
Level 2

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

I need to have a separate dropdown for the QTY next to each poster image. - Marketo does not allow to use the same field more than one time.

Now what? Unfortunately I am stuck and this solution is not going to work.

Goal: The end user should be able to select a QTY desired next to the different poster designs presented to them.

 

No visibility rules or conditional logic at play here. Just presenting all the poster designs as thumbnails up front.

 

Please advise if you know any other way to get this set up easily without having to get a javaScript dev involved. And, I will avoid setting up numerous fields just for such a project which I read would be sloppy for our instance, not best practices. They cannot be deleted once established.

SanfordWhiteman
Level 10 - Community Moderator

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

You can’t do this without JS β€” except for a Checkboxes set, multiple inputs which are combined into 1 field before being posted to the server is not natively supported.

 

It’s not particularly complex JS but you cannot simply drag-and-click to get this functionality.