Alternative text
Alternative text
Alternative text
Alternative text

Instructions

1. Add a html element to the top of your form.
2. Add a text input for each checkbox and name it the same as the checkbox name but add url to the end. Example: columbusurl
3. Adjust the urls in the code below to the locations of your images on your host.
4. Copy the HTML Element code below to the html element on your form after you adjust the image urls to your image locations.
5. Add the email code to your email template on the form builders Comfirmation email tab by clicking the edit pencil in the bottom right corner. You may have to mess with it to get it styled the way you need.

HTML Element code

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.2.4/jquery.min.js">
</script>
<script>
var jQ = $.noConflict(true);
// version 1
jQ( document ).ready(function() {
jQ('input[name="columbusurl"],input[name="clevelandurl"],input[name="pittsburghurl"],input[name="cicinnatiurl"]').css("display", "none");

jQ('input[name="columbus[]"],input[name="cleveland[]"],input[name="pittsburgh[]"],input[name="cincinnati[]"]').change(function() {
var columbusurl = "http://mydomain.com/images/columbus-tn.jpg";
var clevelandurl = "http://mydomain.com/images/cleveland-tn.jpg";
var pittsburghurl = "http://mydomain.com/images/pittsburgh-tn.jpg";
var cincinnatiurl = "http://mydomain.com/images/cincinnati-tn.jpg";

if (jQ('input[name="columbus[]"]').is(':checked')) {
jQ('input[name="columbusurl"]').val(columbusurl);

} else {
jQ('input[name="columbusurl"]').val("");
}

if (jQ('input[name="cleveland[]"]').is(':checked')) {
jQ('input[name="clevelandurl"]').val(clevelandurl);

} else {
jQ('input[name="clevelandurl"]').val("");
}
if (jQ('input[name="pittsburgh[]"]').is(':checked')) {
jQ('input[name="pittsburghurl"]').val(pittsburghurl);

} else {
jQ('input[name="pittsburghurl"]').val("");
}
if (jQ('input[name="cincinnati[]"]').is(':checked')) {
jQ('input[name="cincinnatiurl"]').val(cincinnatiurl);

} else {
jQ('input[name="cincinnatiurl"]').val("");
}

});
});</script>

Email code

<td class="element" style="text-align:center;">


<div style="width:100%;font-size:16px;line-height:1.5;color:#4c5154;">[columbus]<br> <a href="[columbusurl]"><img src="[columbusurl]" /></a></div>


</td>
<td class="element" style="text-align:center;">

<div style="width:100%;font-size:16px;line-height:1.5;color:#4c5154;">[cleveland]<br> <a href="[clevelandurl]"><img src="[clevelandurl]" /></a></div>


</td>
<td class="element" style="text-align:center;">


<div style="width:100%;font-size:16px;line-height:1.5;color:#4c5154;">[pittsburgh]<br> <a href="[pittsburghurl]"><img src="[pittsburghurl]" /></a></div>


</td>
<td class="element" style="text-align:center;">


<div style="width:100%;font-size:16px;line-height:1.5;color:#4c5154;">[cincinnati]<br> <a href="[cincinnatiurl]"><img src="[cincinnatiurl]" /></a></div>


</td>