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

    Show Google map static URL link on HTML or "Text" field with populated form fields

    Asked by iondjp on June 06, 2017 at 12:39 PM

    Jonathan;

    My objective is a little different, but very similar. Can you please provide some additional info on constructing the URL.

    I want to simply create a link to the google map. To save screen space, I do not want to display the actual map. I want to do this on both the email notification and the actual form.

    I have successfully done it on the Email Notice by using this Link...

    https://www.google.com/maps?q={addrStreet},{addrCity},Ontario,Canada

    However, when I try to build the same string in the form using a Text Element and editing the HTML, it does not work.

    As you can see from the screenshot below, the Link string should be 'Map Link", but it starts to show the URL stirng variables. Likewise, when I hover over the link you can see the Firefox link in the lower left of the image. It has "<span class", not the name of the street or the city, etc

     

    It appears to be some sort of missing escape characters in the HTML but I cannot figure it out.

    Your assistance would be greatly appreciated.

  • Profile Image
    JotForm Support

    Answered by BDAVID on June 06, 2017 at 02:05 PM

    Please try replacing the curtly brackets. The { symbol should be replaced with %7B and } with %7D. Example:

    https://www.google.com/maps?q=%7BaddrStreet%7D,%7BaddrCity%7D,Ontario,Canada

  • Profile Image

    Answered by iondjp on June 07, 2017 at 01:36 AM

    Well, we're getting there. The link looks proper now, but the URL that is generated is not converted to the actual values. In other words, it won't substitute the field names with the actual field values.

    The URL that is created is literally:

    https://www.google.com/maps?q={addrStreet},{addrCity},Ontario,Canada

    Instead of something like:

    https://www.google.com/maps?q=123 Main Street,Toronto,Ontario,Canada

  • Profile Image
    JotForm Support

    Answered by Charlie on June 07, 2017 at 03:48 AM

    Unfortunately, the HTML text field is somehow sanitizing characters from the form fields if you include them as part of the target URL. 

    The only way I can see you can use this is by using a Form Calculation widget. 

    Here's my sample form, which is cloned from yours: https://form.jotformpro.com/71571223824958. Test it out and see if it works.

    Here's how I did mine:

    1. First, I added a Form Calculation widget and named it "URL".

     

    2. In the widget, here's where I inserted the HTML code for hyperlink. I then use the "Add Field" button to get the street and city value fields. 

    Note: Make sure that the color of the text are light brown which indicates a string or text value. And make sure that the value for street and city is set to "A-Z" which also means it will get the string or text value. 

     

    3. Now get your form calculation widget's unique name/field tag. In my case, it's {url}. Open your HTML or text field and place it there without any hyperlinking. 

     

    4. Save the changes and test your form.

    I hope that helps. 

  • Profile Image

    Answered by iondjp on June 22, 2017 at 09:31 AM

    This did manage to work with some fussing with the Calculator Editor. Thx.

    If you are looking for some feedback, the editor for the Conditions and Field Calculations is very frustrating to use. It should be more conducive to typing plain script.

  • Profile Image
    JotForm Support

    Answered by Jim_R on June 22, 2017 at 11:48 AM

    I'm glad you're all set and thanks for the feedback. The reason why the calculate condition and calculation field's editor was designed that way was because they were mainly intended for calculations. Yes, string manipulation is possible but it's leaning more towards calculation/computation.

    It's worth mentioning that you can type the URL as if you're typing plain script (as you described) on the editor, then press the Tab key to render it in the proper string format (with light brown background).

    You may do this in chunks so it's easier to read as you're typing in the URL.

    <a target="_blank" href="https://www.google.com/ (press the TAB key)

    maps?= (press the TAB key)

    and so on...

    Related guide: How-to-Manipulate-Text-String-with-Conditions-and-Calculation