Attach an image to a checkbox choice...

User 2894899 Photo


Registered User
6 posts

I've purchased both 'Web Form Builder' & 'Responsive form builder beta' (Mac versions) and have been creating forms without issue. This question about the response HTML email sent to the recipient.
I've created the form the way I want it to look at: www.clevelandofficeleasing.com
There are (4) checkboxes with (4) images to the right of them. What I need to happen is that when a visitor chooses a city checkbox, the confirmation email they receive will not only include the "Value" attribute of the checkbox but a larger version of the image embedded into the message which resides on the web server that I've uploaded.
Example for the "Cleveland OH" checkbox: http://clevelandofficeleasing.com/img/cleveland.jpg .
I just can seem to figure out how to code it properly.
Thanks,
-Ron

User 187934 Photo


Senior Advisor
18,727 posts
Online Now

Hi Ronald,
So how about using the smaller image in the email and linking it to the larger one for them to grab or look at if necessary?
I can't hear what I'm looking at.
It's easy to overlook something you're not looking for.

Here's my S-Drive site with
examples of what can be accomplished in VSD.
https://progrower.coffeecup.com/
Here's my CoffeeCup SCCP Shop with examples of what can be done.
https://progrower.coffeecup.com/shop/
This is a site I built for my work.(RSD)
http://esmansgreenhouse.com
This is a site I built for use in my job.(HTML Editor)
https://pestlogbook.com
This is my personal site used for testing and as an easy way to share photos.(RLM imported to RSD)
https://ericrohloff.com
User 2894899 Photo


Registered User
6 posts

Thanks for the response Eric, the client wants a large, postcard-sized image of the selected checkbox to appear at the top of the response email. How would I link the thumbnail image to the checkbox? I could probably figure out the rest myself after the link was created.

Thanks,
-Ron
User 187934 Photo


Senior Advisor
18,727 posts
Online Now

See if this is close to what you need.
http://ericrohloff.com/coffeecup/ccforu … ity-image/
I can't hear what I'm looking at.
It's easy to overlook something you're not looking for.

Here's my S-Drive site with
examples of what can be accomplished in VSD.
https://progrower.coffeecup.com/
Here's my CoffeeCup SCCP Shop with examples of what can be done.
https://progrower.coffeecup.com/shop/
This is a site I built for my work.(RSD)
http://esmansgreenhouse.com
This is a site I built for use in my job.(HTML Editor)
https://pestlogbook.com
This is my personal site used for testing and as an easy way to share photos.(RLM imported to RSD)
https://ericrohloff.com
User 2894899 Photo


Registered User
6 posts

Wow Eric! that's just what I need!
The only thing I'll need to change is to include the full-size postcard rather than the thumbnail (http://clevelandofficeleasing.com/img/columbus.jpg ...etc).
Thank you so much!
Please let me know which files need to be edited.

Thanks,
-Ron
User 187934 Photo


Senior Advisor
18,727 posts
Online Now

I put the Instructions on the form.
I used the same image for the example but all you need to do is adjust the urls in the html element code to your bigger image.
Have fun with your new discover!
I can't hear what I'm looking at.
It's easy to overlook something you're not looking for.

Here's my S-Drive site with
examples of what can be accomplished in VSD.
https://progrower.coffeecup.com/
Here's my CoffeeCup SCCP Shop with examples of what can be done.
https://progrower.coffeecup.com/shop/
This is a site I built for my work.(RSD)
http://esmansgreenhouse.com
This is a site I built for use in my job.(HTML Editor)
https://pestlogbook.com
This is my personal site used for testing and as an easy way to share photos.(RLM imported to RSD)
https://ericrohloff.com
User 2894899 Photo


Registered User
6 posts

I just noticed the actual url to the postcard-sized image for Columbus is: http://clevelandofficeleasing.com/img/cbus.jpg and not what I posted above, sorry.

Ron
User 2894899 Photo


Registered User
6 posts

Hi Eric,
Thank's for all the help, I'm good with all the instructions you added to your form except step #2
I noticed that in your form construction you used a 3-column layout for the city checkboxes, rather than 1-column like I did for each city, does that make a difference? I just used a 50% checkbox/50% image to get them to line up side by side.
You say "Add a text input under each image", are you dragging a "text field" element in Form Builder onto the form below each image, naming it as stated? It a bit confusing since there are no visible input field below your images?

User 187934 Photo


Senior Advisor
18,727 posts
Online Now

Layout actually doesn't matter. The text inputs can go anywhere as they are hidden. They will affect the layout slightly as I'm not hiding the div they're in. You can add some css and display:none the div's holding the inputs. Those would have an ID similar to id="item1" for example. You could also add some more js code to hide those with the JQuery. Mine would look like this. Yours are probably different.
jQ('input[name="columbusurl"],input[name="clevelandurl"],input[name="pittsburghurl"],input[name="cicinnatiurl"],#item11,#item12,#item13,#item14').css("display", "none");

I can't hear what I'm looking at.
It's easy to overlook something you're not looking for.

Here's my S-Drive site with
examples of what can be accomplished in VSD.
https://progrower.coffeecup.com/
Here's my CoffeeCup SCCP Shop with examples of what can be done.
https://progrower.coffeecup.com/shop/
This is a site I built for my work.(RSD)
http://esmansgreenhouse.com
This is a site I built for use in my job.(HTML Editor)
https://pestlogbook.com
This is my personal site used for testing and as an easy way to share photos.(RLM imported to RSD)
https://ericrohloff.com
User 2894899 Photo


Registered User
6 posts

Everything works perfectly now Eric, thank you.

It's really refreshing to have such tremendous customer support.

Thanks,
-Ron

Have something to add? We’d love to hear it!
You must have an account to participate. Please Sign In Here, then join the conversation.