How to load the form as a pop-up when the logo is clicked?

  • George
    Asked on October 13, 2016 at 10:30 AM

    So I create a form, and use the "embed" feature on pop-up to create the form as a tool-tip. Can the form / embedded text, be connected to a logo on a webpage, where when the logo is clicked, the jotform tool-tip pops up?

     

    The reason I ask is because I want to partner with other websites in the future, and I want to make it very easy for them to integrate my jotform into their platform, not taking up a lot of space and still have the jotform adopted for mobile devices.

    This is great software by the way and definitely thanks for integrating STRIPE.

    George

    TB Sports and Entertainment

    www.tbsportsentertainment.com

  • Kiran Support Team Lead
    Replied on October 13, 2016 at 10:42 AM

    Yes. It is possible to link the form to the logo on your web page. The embed code to link the form to your logo might look like the following.

        <a

          href="javascriptDISABLED:void(

            window.open(

              'https://form.jotform.com/FORM_ID',

              'blank',

              'scrollbars=yes,

              toolbar=no,

              width=700,

              height=500'

            )

          )

        ">

          <img  src="logo.png" width="100" height="100">

        </a>

    You'll need to replace the Form URL (Red colored Text in the above code) with your form and the image code (Blue colored Text) with your logo.

    Hope this information helps! 

     

  • George
    Replied on October 13, 2016 at 4:49 PM

    Thanks Kiran,

    To be clear, when instituting the instructions above, wherever I have a logo, I enter the code above, with your instructions, then when the logo is clicked, the JotForm acts as a tool-tip, and pops out?

     

    Thanks,


    George

  • Kiran Support Team Lead
    Replied on October 13, 2016 at 10:14 PM

    As mentioned, the tooltip in the form builder works with specific fields. With the script above, when the logo is clicked the form should be displayed in a pop-up window. If you need the form to be displayed as a tool-tip on mouse hover, it is required to write some custom code to your web site. 

    You may take a look at the following link that might help you in displaying an external page as a tool-tip.

    http://www.menucool.com/tooltip/javascript-tooltip#view1

    Hope this information helps! Please get back to us if you need any further assistance. We will be happy to help. 

  • George
    Replied on October 14, 2016 at 9:45 AM

    Hello Kiran,

    Last inquiry.

    Take a look at this ticket purchase link on StubHub: https://www.stubhub.com/green-day-tickets-green-day-norfolk-constant-convocation-center-3-12-2017/event/9688829/?mbox=1&rS=6&abbyo=true&sliderpos=true&qtyq=false&dUpg=false&sort=price+asc&byo=1&tktbkt=4&ticket_id=1221777377&ticketRank=1&byo_qty=2&cb=1&bla=true

     

    You will see the "Go To Checkout" button. What I want to do is partner with other ticketing websites, have a simple "Get Tickets, Pay Later!" button next to the partner websites BUY BUTTON, where when clicked, my JotForm pops out in a new browser.

     

    Is that what you gave me in the code above?

    Also, if listed, can my JotForm be designed to automatically get the URL for the webpage where the button is listed, in my current "ticket location" box, when clicked? Can that be done?

     

    Thanks again,

    George

  • Kevin Support Team Lead
    Replied on October 14, 2016 at 11:18 AM

    Yes, you can indeed add the pop-up functionality to almost all the elements in your form, in the link you provided I can see the button "Go to checkout" is a button HTML element, you may simply add the <a> tag my colleague Kiran provided above.

    Here is a screenshot of the button in the website you provided: 

    How to load the form as a pop up when the logo is clicked? Image 1 Screenshot 20

    So you will need to edit the code in the webpage and add the <a> tag: 

    <a

     

          target="_blank" href="javascriptDISABLED:void(

     

            window.open(

     

              'https://form.jotform.com/formID',

     

              'blank',

     

              'scrollbars=yes,

     

              toolbar=no,

     

              width=700,

     

              height=500'

     

            )

     

          )

     

        ">

    Here should be the button's code

        </a>

    This way when the button is clicked the form will pop-up.

    Also, if listed, can my JotForm be designed to automatically get the URL for the webpage where the button is listed, in my current "ticket location" box, when clicked? Can that be done?

    As you will use your forms as a pop-up I think you may use the Get Referrer widget that will know where the form was opened from, here is the link to the widget: https://widgets.jotform.com/widget/get_referrer 

    This guide will help to add the widget to your form: How-to-Add-a-Widget-to-your-Form

    Hope this helps. 

  • ELshba7
    Replied on October 22, 2016 at 3:24 PM

    Hello Kevin,

    The JotForm platform gets better all of the time.

    Let me get this clear (Note: I am a tech novice).

    With your last note (Referrer widget), so If a ticketing website ads a button to their payment selections (Ex. "Pay Later" would be the button title), they can click the button, a tool-tip pops out (My JotForm will appear), and within the actual JotForm, I can have the actual URL from the page where clicked (Which will be the page where the actual ticket is located), that URL will automatically populate within one of my JotForm fill-in boxes, or somewhere within the JotForm where I will know where the user came from, and that URL will be somewhere within my JotForm when I get the submission through eMail?

    If so, can you give me a way to explain this to a website development team (e.g. Ticketmaster, StubHub, smaller companies, etc.....)?

     

    Thanks again,

     

    George

  • jonathan
    Replied on October 22, 2016 at 9:50 PM

    Hi George,

    Let me try explain also in broken down details.

    so If a ticketing website ads a button to their payment selections (Ex. "Pay Later" would be the button title), they can click the button, a tool-tip pops out (My JotForm will appear)

    The Referrer widget will still be able to capture the URL of the website where the form was embedded.

    ...and that URL will be somewhere within my JotForm when I get the submission through eMail?

    Yes. The widget data is also in the email alert of the form. You can also see this in the submission data of the form.

    Actually the same question was answered on this discussion thread. Please refer to Charlie's explanation there also.

    Hope this help. Let us know if still not clear for you.

    Thanks.

  • ELshba7
    Replied on October 22, 2016 at 10:17 PM

    Thanks Jonathan.I will copy this thread and forward to the web developers of the websites. Thanks for your patience with a tech novice.  -George