Pop up - can't understand the instructions with what actually happens...

  • Profile Image
    robwalden
    Asked on February 13, 2021 at 04:49 PM

    Hi.

    I want to add a pop up using the embed, but there is only a code (with a link embedded in the code).

    So, I try embedding the code but it only gives me a text link that will not enable me to centralise it or adjust it in any way - so it doesn't look good.

    Then, if I extract the link from the actual pop-up, it just opens in a whole page rather than the small pop-up.

    So I think I am either misunderstanding when it says "Embed the code above as a link or a button to have your form pop-up in a new window." or I'm doing something wrong.

    See video - : https://www.loom.com/share/a6d2240e71bb44438e6d64c77e4930ac

    Thanks for your help!

    Rob

  • Profile Image
    Katherine_W
    Answered on February 13, 2021 at 10:01 PM

    Hi Rob,

    Happy to help!

    I am not able to hear any sound in your Loom video:

    1613271434_6028918a2bf12_

    Are you able to enable sound or re-record for us?

    The <a href> code will "pop up" in a new window/page like so using the Pop Up code will do this by default.

    You can also use this code within a pop up widget or plug-in if you have one installed on your site.

    We await your response.

  • Profile Image
    robwalden
    Answered on February 14, 2021 at 11:44 AM
    Hi. I can record sound if it helps but i didn't actually record any sound
    first time. I was just demonstrating the issue.
    The key problem is that the code doesn't allow any customization...just a
    text link that cannot be centralised or even colour changed.
    If you use the URL as a link it does not pop up. It only opens a new tab.
    You also have to extract the link from the code. (There is no popup link
    produced separately by Jotform) so i guess i can try a pop-up plugin. I'm
    just trying to avoid too many plugins.
    It would be helpful if we could make some adjustments to the styling of the
    embed code.
    Did you need me to record this in sound or does it make more sense now I've
    explained?
    Thanks
    Rob
    ...
  • Profile Image
    Katherine_W
    Answered on February 14, 2021 at 03:29 PM

    Hi Rob,

    Thank you for clarifying!

    I wanted to ensure that you didn't mean to include sound and that we weren't missing anything.

    I've been going through our guide on how-to-open-your-form-in-a-popup-window and I'm wondering if your website builder is stripping off the script for the JavaScript that's included?

    I can understand wanting to avoid too many plug-ins on your website as well. Could you please take a look at your site builder and let us know if it is stripping the scripts? If not, then I can certainly open a feature request with our back end team.

    I look forward to your response!

  • Profile Image
    robwalden
    Answered on February 14, 2021 at 04:33 PM
    Thanks! It might be that it's stripping the Javascript but I'm not sure how
    to check that to be honest. I will research how to check this - but if you
    have any tips on how to check it that would be great.
    But, I'm using Elementor Pro builder.
    (Your other html embeds seem to work ok - without popups).
    I wonder if it makes a difference for the Smartembed feature to be
    selected. It's not the end of the world if not but it would be great to get
    it working.
    Thanks!
    ...
  • Profile Image
    Katherine_W
    Answered on February 14, 2021 at 05:42 PM

    Hi again Rob,

    For sure! I'm happy to help.

    I did a quick search in regards to your website builder and JavaScript and was able to find this: https://essential-addons.com/elementor/docs/custom-js/

    I wonder if you treat the embed as "custom JavaScript" and implement it as the guide above instructs, will the issue persist?

    We look forward to hearing back from you soon!

  • Profile Image
    robwalden
    Answered on February 15, 2021 at 02:44 AM
    Ok many thanks I'll take a look.
    ...
  • Profile Image
    robwalden
    Answered on February 22, 2021 at 10:33 AM
    Hi
    Thanks for getting back to me - much appreciated.
    Apologies for the delay in replying. I was working a few things out and
    trying things...
    1) I have disabled Essential Addons - I am only using Elementor Pro now.
    But it doesn't work...
    See video:
    Jotform Problem with embed code - design of user-facing link issue — Watch
    Video


    2)
    See screenshot below... is it possible to reduce the space around these
    embed cards? (not as important as the above - 1)
    1614008011_6033cecba6bf4_image.png

    ...
  • Profile Image
    Bojan_J
    Answered on February 22, 2021 at 01:03 PM

    Greetings.

    Unfortunately, we didn't receive the link you have shared with us. Please try to share it again.

    However, you can add CSS directly to the link Jotform provided. I've added some style to the link, to closely match your needs. You can test it here:
    https://shots.jotform.com/bojan/embed/2896730.html

    I've added the following inline CSS:

    display: inline;
    background: purple;
    color: white;
    padding: 10px 25px;
    text-decoration: none;
    border-radius: 35px;

    The final link looks like this:

    <a
       href="javascript:void(
        window.open(
        'https://form.jotform.com/210264659685061',
         'blank',
         'scrollbars=yes,
         toolbar=no,
         width=700,
         height=500'
        )
       )
      "
    style="
    display: inline;
    background: purple;
    color: white;
    padding: 10px 25px;
    text-decoration: none;
    border-radius: 35px;
    "
    >

       Please get in touch to suggest an idea, link, video, podcast, article etc.
      </a>

    Will this solution work for you?

    Your second question has been moved to a new ticket. We are working on a reply, and you will soon receive it at the following link:
    https://www.jotform.com/answers/2915596

    If you have any additional questions, please post them to associated tickets.

    Thank you for your cooperation.