Does JotForm allow images within the output submission? Need to show a map in our submissions.

Hello,

I have a question for everyone.  For my forms, I would love to include the "Geolocation" by JotForm so that users can move the pin to a location of their choice.  I tried this feature in our JotForm, and it works great, but it only shows the coordinates.  We need to see the map. 

We would love to have a map of the location from where people move the drop pin.  I was wondering if anyone knew how to include this in our submissions?  I was not sure if the output submissions can even show images (a map)? 

Any help would be great! 

Hi,

Would this jotmap app server the purpose you are after?

It is under Geo and mapping section of our apps.

Do let us know if that is what you were looking for, as well if it is not and we will try to see what else could be done.

Best Regards,
Ben

Thank you for your reply.

That is not exactly what I am looking for.  Whenever a customer submits our form, they have to fill in their addresses.  After they submit, depending on the conditions we set, the submission will go to various people.

We would just like to have a map of the address from the customer once they submit the form.  I see in our inbox for submission that there actually is a map, but that does not get sent out when we receive the email notifications.

Hi,

OK, I think that I understand now what you would like to achieve.

It can be done by using our Geolocation widget and Static Google Map API.

To use it we just add this code to our email:

<img style="width: 400px; height: 400px; display: block; margin-left: auto; margin-right: auto;" src="//maps.google.com/maps/api/staticmap?center={clickTo1}&amp;zoom=9&amp;size=400x400&amp;sensor=true" alt="Does JotForm allow images within the output submission? Need to show a map in our submissions. Image-0" />

clickTo1 in our case is the parameter that we get from our Geolocation widget.

Please try this jotform to see if this is what you wanted to achieve: http://form.jotformpro.com/form/42946262602959

It is set to send you an email notification once you fill it out so please enter your email and test it out to see how it looks in your email.

Please note that in thank you message it sometimes seems to load the location in Google maps correctly and sometimes not, in email it however is received properly.

Best Regards,
Ben

Wow.  Yes this is it.  I hate to ask even more from you, but how do I set this up to work for our form? 

Also, we would love it if it zoomed in as much as possible, but I'm not sure if we can set this.  Maybe we would have to change the zoom=9 to zoom=(something else).

We really appreciate your help!

Hi,

Great :)

I hate to ask even more from you, but how do I set this up to work for our form?

No problem at all.

To set it up you should open your notification and go to the edit screen. Once there please click on the HTML toolbar button.

Now a new window opens and it might be a bit hard to place the image right where you want it, but in such case do let us know and we will be glad to do it for you.

In this new screen just paste this at the location of your choice:

Code with blue pin:

<img style="width: 400px; height: 400px; display: block; margin-left: auto; margin-right: auto;" src="//maps.google.com/maps/api/staticmap?center={clickTo1}&amp;zoom=9&amp;size=400x400&amp;sensor=true&amp;markers=color.blue%7C{clickTo1}" alt="Does JotForm allow images within the output submission? Need to show a map in our submissions. Image-1" />

Code without pin:

<img style="width: 400px; height: 400px; display: block; margin-left: auto; margin-right: auto;" src="//maps.google.com/maps/api/staticmap?center={clickTo1}&amp;zoom=9&amp;size=400x400&amp;sensor=true" alt="Does JotForm allow images within the output submission? Need to show a map in our submissions. Image-1" />

Also, we would love it if it zoomed in as much as possible, but I'm not sure if we can set this.  Maybe we would have to change the zoom=9 to zoom=(something else).

Now you can change the size (just change the 400 found in code to some other numbers), also to change the zoom you should change the zoom=9 part to any other. I suggest somewhere between 10 and 15 would be the best, but you can test it out and see what works the best for you (all depends who wants to accomplish what).

Once this is done, just click Update and if the notifier works as you wanted click on Finish and test out.

Do let us know if you have any further questions.

Best Regards,
Ben

Hi Ben,

Thank you very much for your help. 

When I put the code it, the map seems to only stay on the fixed location. 

I am not sure why this is?

Here is the code...

Any ideas how to sync it up to where the map changes as well? 

Hi,

Can you please tell me if you mean that you would like to scroll in and out of the map? Or do you want to change the location of the map in your email?

If you would like to change the location of the map in your email, please leave MAP_HERE in your jotform notification and we will place it in that section.

If you would like to be able to scroll the map, I would need to take a look at it and let you know, because I think that that would not work in emails nor in notifications, since we can not add javascript to the notifier.

Again please let us know what you wanted to achieve and we will try to help you with that.

Best Regards,
Ben

Hi Ben,

Thank you so much for help!  I did not explain it well earlier.  I meant to say that when we receive the email notification, it is always stuck on the same location.  I do not want to scroll in the email notification. 

I highlighted the MAP_HERE.

I also highlighted the code I was trying to use.

Here is the code...

<table border="0" cellspacing="0" cellpadding="0" width="100%" bgcolor="#f7f9fc">
<tbody>
<tr>
<td height="30">{pdf-link}&nbsp;</td>
</tr>
<tr>
<td align="center">
<table border="0" cellspacing="0" cellpadding="0" width="600" bgcolor="#eeeeee">
<tbody>
<tr>
<td width="13" height="30" background="http://www.jotform.com/images/win2_title_left.gif">&nbsp;</td>
<td align="left" valign="bottom" background="http://www.jotform.com/images/win2_title.gif"><img style="float: left;" src="//www.jotform.com/images/win2_title_logo.gif" alt="jotform.com0" width="63" height="26" /></td>
<td width="14" background="http://www.jotform.com/images/win2_title_right.gif">&nbsp;</td>
</tr>
</tbody>
</table>
<table border="0" cellspacing="0" cellpadding="0" width="600" bgcolor="#eeeeee">
<tbody>
<tr>
<td width="4" background="http://www.jotform.com/images/win2_left.gif">&nbsp;</td>
<td align="center" bgcolor="#ffffff">
<table id="emailFieldsTable" class="mceEditable" border="0" cellspacing="0" cellpadding="5" width="100%">
<tbody>
<tr>
<td style="padding: 5px !important; text-decoration: underline;" width="170" bgcolor="#f9f9f9"><strong>Question</strong></td>
<td style="padding: 5px !important; text-decoration: underline;" bgcolor="#f9f9f9"><strong>Answer</strong></td>
</tr>
<tr>
<td style="padding: 5px !important;" width="170" bgcolor="white">Full Name</td>
<td style="padding: 5px !important;" bgcolor="white">{fullName1}</td>
</tr>
<tr>
<td style="padding: 5px !important;" width="170" bgcolor="#f9f9f9">E-mail</td>
<td style="padding: 5px !important;" bgcolor="#f9f9f9">{email3}</td>
</tr>
<tr>
<td style="padding: 5px !important;" width="170" bgcolor="white">Phone Number</td>
<td style="padding: 5px !important;" bgcolor="white">{phoneNumber4}</td>
</tr>
<tr>
<td style="padding: 5px !important;" width="170" bgcolor="#f9f9f9">I would like to</td>
<td style="padding: 5px !important;" bgcolor="#f9f9f9">{iWould}</td>
</tr>
<tr>
<td style="padding: 5px !important;" width="170" bgcolor="white">Questions/comments</td>
<td style="padding: 5px !important;" bgcolor="white">{questionscomments}</td>
</tr>
<tr>
<td style="padding: 5px !important;" width="170" bgcolor="#f9f9f9">Address</td>
<td style="padding: 5px !important;" bgcolor="#f9f9f9">{address9}</td>
</tr>
</tbody>
</table>
</td>
<td width="4" background="http://www.jotform.com/images/win2_right.gif">&nbsp;</td>
</tr>
<tr>
<td style="font-size: 4px;" height="4" background="http://www.jotform.com/images/win2_foot_left.gif">&nbsp;</td>
<td style="font-size: 4px;" background="http://www.jotform.com/images/win2_foot.gif">&nbsp;</td>
<td style="font-size: 4px;" background="http://www.jotform.com/images/win2_foot_right.gif">&nbsp;</td>
</tr>
</tbody>
</table>
</td>
</tr>
<tr>
<td height="30">&nbsp;</td>
</tr>
</tbody>
</table>

MAP_HERE
<p><img style="width: 400px; height: 400px; display: block; margin-left: auto; margin-right: auto;" src="//maps.google.com/maps/api/staticmap?center={clickTo1}&amp;zoom=15&amp;size=400x400&amp;sensor=false&amp;markers=color.blue%7C{clickTo1}" alt="Does JotForm allow images within the output submission? Need to show a map in our submissions. Image-1" /></p>

I realized I am posting from my personal account. 

I am not sure if you need my other account information, but the username is CORElectric.

In that case , please open the thread under CORElectric and explain the part that you are missing regarding to the MAP , also, provide the form name or form ID, this way we keep a single thread with a single topic.

Thanks

Hello,

Thank you for all your help.  I actually got it to work yesterday.  I had {clickTo1} in the code, and I changed it to {clickTo} and everything was fine.

Now though, the Geolocation starts in NYC.  I am not sure why it starts there because yesterday it did not.  Any ideas to why this might be or how can I change the starting location back to ours?

What I mean is from Ben's example...

http://form.jotformpro.com/form/42946262602959

The map automatically starts off in NYC.  How can I change it to start off in our area? 

You might need to clear your browser's cache. I just opened Ben's form and I'm able to see my own location.

Hello Jeanette,

I'm not sure if you will see this, but New York is coming up again on our website as the default location.  I cleared the cache, but nothing seems to work.  Any ideas why this happens and how I can fix it?

Hi,

I'm not sure if you will see this, but New York is coming up again on our website as the default location.

Can you please confirm if this is happening on your website or in the email. Looking back this was added to email body, but based on your comment seems that the issue is on the website instead.

If this is used on your jotform that is embedded on your website do give us a link to the page so that we can take a look to see what this has happened.

Best Regards,
Ben

Hi,

OK, I see that you are using our jotform on your website and that the issue is with the Geolocation widget. Now since this thread was created for a map in email body I have moved this to a new thread where we will leave be opening a thread to our developers.

This will help them to find the issue and us to avoid any possible confusion so I would like to ask you to leave your further responses there and we will be replying to it shortly.

You can find it here: http://www.jotform.com/answers/472989

Thank you.

Best Regards,
Ben

Hi Ben,

It seems our location does not work anymore, and I have tried everything to try and fix it.  Here is the issue...

First, the map on our website no longer shows the satellite option.  I have the "hybrid" for maptype within the code. 

Second, when people submit the form, we receive this following image

Also, you might be able to see what I am talking about from the link you made for us awhile ago.  (http://form.jotformpro.com/form/42946262602959).  It shows the following when I fill it out...

Thank you, and we hope to hear from you soon!

Let us check what's going on with this form and will let you know later on.