Can't make pop up layer work properly

Hi all,

I’m trying to create a pop up layer containing a form which can be triggered by either two buttons, one near the top of my page and one near the bottom. The form is created in Jotform.

I’ve done this by creating a placeholder in the pop up layer and embedding the code for the form using the ‘replace with HTML code’ option in the Web properties>Placeholder.

The first button works fine, but when I try to create the second button and preview it, it seems to be erratic. Half the time, I get a truncated version of the form. (screenshot attached). The manual says to place all the objects in the same pop up layer so that’s what I tried initially, but I’ve also tried making a separate pop up layer for the second button with the same result.

The Jotform branding is there at the bottom and it is possible to move between the fields using the tab button, but users may not realise this – it just looks as though part of the form isn’t there.

I was wrestling with this all of yesterday, thought I’d have another go today, but still the same problem so I’m absolutely stumped. Any advice would be much appreciated.

Pennywhistle, you've not indicated whether you've used Jotform's IFRAME code or full source code.

In the IFRAME, JF used an HTML id to reference your specific form.
HTML will only ever find the first instance of this id on your web page so using a second pop-up layer with the same code will never work.
Probably ditto for the source code route, especially so as you are trying to load in the same scripts twice.

Having two instances of the same form would also mean the user could enter difference values and get very confused.
This is particularly evident when designers try to set up the same JF into a Variant and Main.

As to the problem with two buttons - there shouldn't be one. Both are simply opening the same pop-up layer.

Your safest option is to open up JF in a separate page using the JF direct URL as the button Link.
The button(s) for this also require the Link to Open link in drop down 'New window or tab (_blank)': https://helpandsupport.xara.com/xara.../link_tab.html

Acorn

Hi Acorn,

Thanks greatly for a comprehensive response. Really helpful and it certainly makes sense of some of what's happening.

I didn't use the IFRAME option as I know nothing about that - as you can see I'm groping around in the dark here. So I assume I've used the full source code. It was the one labelled 'Embed' on JF's interface.

I was specifically trying to avoid users leaving the page, hence the pop up layer, but maybe I'll have to forgo having the two buttons.

Anyway it's all learning, so thanks again for the information.

Penny

Quote:

---

Originally Posted by Pennywhistle

Hi Acorn,

Thanks greatly for a comprehensive response. Really helpful and it certainly makes sense of some of what's happening.
I didn't use the IFRAME option as I know nothing about that - as you can see I'm groping around in the dark here. So I assume I've used the full source code. It was the one labelled 'Embed' on JF's interface.
I was specifically trying to avoid users leaving the page, hence the pop up layer, but maybe I'll have to forgo having the two buttons.
Anyway it's all learning, so thanks again for the information.
Penny

---

Penny, you might try making the button Sticky.

Mock up what you have on the page - buttons, layers and placeholder and upload the XAR/WEB file here so we can check more readily.

Acorn

I haven't used jotform for years but would it work if you made a seperate page containing the form and used placeholder code to load that page into a pop-up layer. I don't think there would be any clashes of id then?

Quote:

---

Originally Posted by Egg Bramhill

I haven't used jotform for years but would it work if you made a seperate page containing the form and used placeholder code to load that page into a pop-up layer. I don't think there would be any clashes of id then?

---

Egg, not used JF either but that approach has/had its problems too.

Acorn