-
JohnFraserScottAsked on January 17, 2015 at 2:40 AM
I have created a form that I would like to use as a Lightbox form embedded on my site. The problem is, as it stands, it simply appears as clickable text and I wanted to be able to click a button to open up the embedded Lightbox form.
If it matters, this is for a Wordpress site.
Really hoping you can make some suggestions.
Kind regards,
Vlad -
jonathanReplied on January 17, 2015 at 10:43 AM
Hi Vlad,
This is doable in Jotform. Please check this similar thread
Here's how to create a lightbox form. How to Create a Lightbox Form
To use a button, just simply use the lightbox class from your lightbox embed code on your buttons code. Example:
<script src="//max.jotfor.ms/min/g=feedback2" type="text/javascript">
new JotformFeedback({
formId:'30452332860952',
base:'http://jotformpro.com/',
windowTitle:'Title Me',
background:'#FFA500',
fontColor:'#FFFFFF',
type:false,
height:500,
width:700
});
</script>
<input class="lightbox-30452332860952" type="button" value="Click Here" />
Please let us know if you need further assistance doing it.
Thanks.
-
JohnFraserScottReplied on January 18, 2015 at 9:03 PM
Thank you, I have tried this and it worked for me!
My only question is how to control the appearance of this button? Can I do one of two things?
1) Use some code to control the size, colour, shape of the button and colour of the font?
2) Use an image in place of a button?
Thank you,
Vlad -
Elton Support Team LeadReplied on January 19, 2015 at 3:37 AM
Hi Vlad,
Glad to hear it works for you. :)
1. It is possible with CSS, you can insert style attribute on the button code. This method is called Inline CSS.
Example:
<input class="lightbox-30452332860952" type="button" value="Click Here" style="font-size:16px;background:#01A2A6;border:none;padding:8px;color:#fff;" />
Result: http://jsfiddle.net/gw4yjona/
2. Image is also possible as long as you'll use the class that will call the lightbox form.
Example:
<img class="lightbox-30452332860952" src="http://www.yoursite.com/image/your_button.png" />
Just replace the sample URL on this code with your button image URL.
Hope this helps. Thanks!