- onepointAsked on January 26, 2012 at 12:55 PM
We are trying to integrate the lightbox version of our quote request into our new website "get a price" button but I'm having a few issues:
1. In Internet Explorer the form will not come up at all and causes an overflow 225 error on the page. I believe the code is in the correct portion of the header tag, but I suspect the code may be slightly off.
2. The form works in other browsers, however sometimes the alignment from the top, (in safari) is off cutting the top portion of the form.
3. There is no mousover change of the cursor to reflect the area is clickable.
Let me know if you have any suggestions. Thanks
Michael - One Point PartitionsPage URL:
- fxrAnswered on January 26, 2012 at 03:56 PM
It looks like the JotForm lightbox code is conflicting with the mootools library that is being loaded into the webpage.
I have worked on fixes for similar problems before. I have come up with a mainly CSS lightbox solution which allows us to get the form embedded using an iFrame which prevents any conflict with exisiting code on a webpage.
You can see a very basic mock up here: ('get started - premium' button at the top)
It just shows the sort of effect you can expect if you did want to pursue this method.
If you wish, I can create some code tailored to your form that you can then add to your webpage to try out.
- It involves adding 2 new CSS classes & a block of code just before your closing body tag of your webpage.
- onepointAnswered on January 26, 2012 at 06:22 PM
If you all find time to throw any corrections or script variations at me that would be awesome. I have tried placing the script either in the header or footer and both didn't work for me.
Though I could get our web guys to create it, I prefer using jotform because of the continuosly changing nature of our form.
Lets give it a try. Also, everything is correct in my image reference instead of using a text link right?
- fxrAnswered on January 26, 2012 at 06:49 PM
Yeah, Its not going to matter where that script embed code goes. It does seem to be a conflict with exisiting libraries already in use on your webpage.
Yeah, your image link is fine, the problem is with the hover effect. JotForm utilizes changes in the CSS of standard webpage elements e.g divs, text to create that 'change' effect, because you are using an image those 'change' CSS rules wont work.
If you want to create a hover affect, one way would be to create another similar image of identical dimensions but with just slight changes to the colours.
I can have a look at that when I am working through the code early tomorrow.
OK. leave it with me a few hours and I will get back to you with code for this CSS based lightbox solution.
- fxrAnswered on January 27, 2012 at 07:06 AM
I have also created a minor hover affect for the image link that opens it.
You may or may not like it. Its easily changed or removed
To add this effect to your own page: you need to remove the existing JotForm lightbox code and add the follwing CSS definations, just before the end of your </head> section. -> http://pastie.org/3262750
The last thing is to replace the HTML for the image link that opens the lightbox: -> http://pastie.org/3262772
If you do decide you like it, I hope that easy enough to follow.
Let us know if you do see any problems with it or if you would like any other little customisations carried out to it.