What is JotForm?
JotForm is a free online form builder which helps you create online forms without writing a single line of code. No sign-up required.

At JotForm, we want to make sure that you’re getting the online form builder help that you need. Our friendly customer support team is available 24/7.

We believe that if one user has a question, there could be more users who may have the same question. This is why many of our support forum threads are public and available to be searched and viewed. If you’d like help immediately, feel free to search for a similar question, or submit your question or concern.


  • Profile Image

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

    Asked by Kenric on October 22, 2014 at 10:53 AM

    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! 

    Page URL:
    http://widgets.jotform.com/category/mapping

    Screenshot
    Submissions JotForm map My Forms
  • Profile Image

    Answered by Ben on October 22, 2014 at 12:30 PM

    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

  • Profile Image

    Answered by Kenric on October 22, 2014 at 12:49 PM

    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.

  • Profile Image

    Answered by Ben on October 22, 2014 at 04:05 PM

    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="" />

    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

  • Profile Image

    Answered by Kenric on October 22, 2014 at 04:19 PM

    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!

  • Profile Image

    Answered by Ben on October 22, 2014 at 05:51 PM

    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="" />

    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="" />

    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

  • Profile Image

    Answered by Kenric on October 23, 2014 at 09:50 AM

    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? 

  • Profile Image

    Answered by Kenric on October 23, 2014 at 09:51 AM

     

  • Profile Image

    Answered by Ben on October 23, 2014 at 11:04 AM

    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

  • Profile Image

    Answered by Kenric on October 23, 2014 at 11:15 AM

    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.com" 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="" /></p>

  • Profile Image

    Answered by Kenric on October 23, 2014 at 11:37 AM

    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.

  • Profile Image
    JotForm Support Manager

    Answered by Jeanette on October 23, 2014 at 01:49 PM

    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

  • Profile Image

    Answered by CORElectric on October 24, 2014 at 08:22 AM

    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?

  • Profile Image

    Answered by CORElectric on October 24, 2014 at 08:35 AM

    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? 

  • Profile Image
    JotForm Support Manager

    Answered by Jeanette on October 24, 2014 at 12:39 PM

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

  • Profile Image

    Answered by CORElectric on December 10, 2014 at 01:46 PM

    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?

  • Profile Image

    Answered by Ben on December 10, 2014 at 02:54 PM

    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

  • Profile Image

    Answered by CORElectric on December 10, 2014 at 03:42 PM

    Hello,

     

    This is happening on our website. 

     

    Here is a link of our site.

     

    http://ored.oakridgetn.gov/contact/

  • Profile Image

    Answered by Ben on December 10, 2014 at 05:10 PM

    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

  • Profile Image

    Answered by CORElectric on February 03, 2015 at 03:10 PM

     

    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!

  • Profile Image
    JotForm Support Manager

    Answered by Jeanette on February 03, 2015 at 04:19 PM

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