What is JotForm?
JotForm is a free online form builder which helps you create online forms without writing a single line of code. No sign-up required.

At JotForm, we want to make sure that you’re getting the online form builder help that you need. Our friendly customer support team is available 24/7.

We believe that if one user has a question, there could be more users who may have the same question. This is why many of our support forum threads are public and available to be searched and viewed. If you’d like help immediately, feel free to search for a similar question, or submit your question or concern.


  • Profile Image

    Can I adjust the padding in lightbox

    Asked by onepoint on March 09, 2012 at 05:06 PM

    I am having trouble resizing the lightbox to fit the youtube Iframe and get rid of the white padding/spacing arround the video. Can this be done?

  • Profile Image
    JotForm Support

    Answered by Mike_T on March 09, 2012 at 05:44 PM

    Thank you for creating separate threads.

    Are you talking about some custom lightbox script? Could you please provide more information on this? If possible, please provide us with the code, and URL to reproduce the problem.

  • Profile Image

    Answered by onepoint on March 09, 2012 at 05:55 PM

    To best show an example I have placed a copy of the lightbox on our test page http://www.onepointpartitions.com/3easyways

    I have sized the form to the dimensions of the youtube iframe. When this is done, the lightbox requires scrolling to fit the video. When I make it larger, the video fits, but there is additional "padding" around the video before the border. I would like to perfectly fit the video to the lightbox frame area.

  • Profile Image

    Answered by fxr on March 09, 2012 at 06:17 PM

    Which link opens the lightbox?

  • Profile Image

    Answered by onepoint on March 09, 2012 at 06:24 PM

    The big blue one on the top that is labeled Video Lightbox Test.

  • Profile Image

    Answered by fxr on March 09, 2012 at 06:44 PM

    That link doesnt seem to want to work in Chrome. 

    Looks like you have the old Javascript conflict problem again. Can you try placing the lightbox embed code before any other of your scripts load? 

  • Profile Image

    Answered by onepoint on March 12, 2012 at 01:09 PM

    The code is now in the top most position in our scripts section.

  • Profile Image

    Answered by fxr on March 12, 2012 at 02:03 PM

    I can't get it to work in any browser. 

    In any event, If I remember correctly, I created a custom CSS cased lightbox solution for you before, probably tinkering around with a similar method is the way forward here as it amongst other things allows room for greater customisation. 

    I see your 'video test' form. I assume that is the form you are trying open from your webpage? 

    If you want, I can have play around with some code that you can add to your webpage to open that form. 

    I can make a clone of your page and work from there. 

    What link is it you want to open lightbox from? and you plan to ultimately open more than one form, this way, is that right?

  • Profile Image

    Answered by onepoint on March 12, 2012 at 06:16 PM

    Yes, i almost forgot that you did create a custom css before. What's odd is we re-programed the mootools and haven't had issues since.

     

    We are having a BIG problem with users not reading the form as they fill it out. I am trying to create multiple video lightboxes to come up on both our landing pages and within the form to explain each option.

     

    I'm still working on the spacing/breaks, but this is an example of what we're trying to acomplish within the form. The bottom portion of the image would select a field, where the top portion (presently pointing to google) would pull a lightbox with the particular video inside it.

  • Profile Image

    Answered by fxr on March 12, 2012 at 06:31 PM

    OK, starting to see more clearly what you are trying to do now. 

    I think to have better control over the elements on your page you should look at embedding the forms full source code onto the webpage, instead of trying to come up with something in the editor itself. 

    Is it *only* a video you want to open in a lightbox? i.e there will be no normal form controls in the content in the lightbox? 

    The best way to achieve that is, using most of the code I gave you before; when an image is clicked, pass the relevant youtube video URL to a javascript function that will load the CSS lightbox and render the youtube video in it.

    I am happy to help with a bit of code to provide that functionality but I think look at embedding the forms full source to give you more scope for this type of heavy customisation. 

    -- 

  • Profile Image

    Answered by onepoint on March 12, 2012 at 06:58 PM

    Yes, videos (play on load) are the only lightbox element I need to load (one per lightbox). Everything else will be coded into the landing page.

    I just put the full code into the crm. Honestly, it's a bit overwhelming at first, and I'm not sure what's going on with the selection tiles.

    I might go buy javascript for dummies on this one. Any help would be greatly appreciated.

  • Profile Image

    Answered by fxr on March 12, 2012 at 07:06 PM

    OK, i will have look at what can be done with this at some point over the next 24 hours. 

     

    I am assume there is other elements, i.e headers etc of your own website that you will want on the page? Are you able to get them in yourself in the meantime; I just think it would just make the handing over (off my code) process a little bit more straightforward. 

  • Profile Image

    Answered by onepoint on March 12, 2012 at 07:59 PM

    I honestly think where I'm having issues is finding the lines between where css ends and scripts begin. It also seemed to justify left once I placed the entire script on our site.

    What I can do is layout the form completely with "filler" images like I have been doing, and then once I'm finished in photoshop go back and replace the destination url's of each image. within the final code.

    As for "headers" etc, I was planning to write these into the html of the page, rather than within the form.

    Is it possible to have an image outside of "the form" area call a lightbox video as well?

  • Profile Image

    Answered by fxr on March 12, 2012 at 08:16 PM

    Yes, you put the headers into webpage along with the forms full source. 

    Leave it with me, I will have a proper look at this, get you some code, and try and break down everything into seperate components that you can slot into a webpage on your website. 

  • Profile Image

    Answered by fxr on March 13, 2012 at 07:15 PM

    @onepoint, 

    Sorry I havent been able to look at your page, I see you have made some progress? The page is looking well, so my busyness may have been a blessing.

    Can you summarise what is left to be done now? Are you happy with the layout out of the page?

  • Profile Image

    Answered by fxr on March 14, 2012 at 05:42 AM

    Its quite difficult to keep up with your changes, but I believe its something like this that you are working towards?

     

     

    Click the 'Metal' option midway down your page.

  • Profile Image

    Answered by onepoint on March 14, 2012 at 10:14 AM

    Yes! This is what we are working towards concerning videos within the page and form. We are working on recording individual 30sec clips for each one, but for now they can point to the same.

    Beneath the Blue area would begin our jotform to request a quote. Within the form I would like to use similiar tiles as a way to both select that field within the quote and watch the video.

    Next a similiar set of 4 tiles would be used allowing the user to select the configuration closest to their own.

    For the record, I have tried to use a joomla plugin to achieve the lightbox, however, since the "landing page" plugin we are using hides all other modules including the one it would open with lightbox, this doesn't work.

  • Profile Image

    Answered by fxr on March 14, 2012 at 06:41 PM

    OK, i see the work you have been doing on your form -> http://www.jotformpro.com/form/20685329647968

    Are you trying to get this lightbox youtube video to open from within the form now? 

    Once you settle on your form/webpage design and get it as close to how you want it look as possible, shout me back and I will get you the code and show you where to put it to add the code to create the youtube video in a lightbox. 

    Let me know if there is any formatting issues on the form that you just cant resolve.

    Ultimately the only way to get this functionality is to embed the forms full source, some formatting issues may also be better taken care of there. 

    I just need you to get your form to as close to its final revision as possible. 

  • Profile Image

    Answered by onepoint on March 20, 2012 at 01:53 PM

    Ok, here goes! The top web portion will be tweaked as I'm writing content, however, I have completed the form to function how I want it to, except for the image field alignment (they image pieces are overlaping and have a gap from top to bottom). Also, is there a way to have a mouseover image for the video play buttons? I'm simply wanting it to turn the play button grey using an alternate image.

    Putting the full source code into the system will not be a problem. I haven't done this yet in effort to allow for editing of the form.

  • Profile Image

    Answered by fxr on March 20, 2012 at 02:07 PM

    OK, I will have a tinker around with that and get back to you with my thoughts/code as soon as I can. 

  • Profile Image

    Answered by fxr on March 22, 2012 at 06:41 PM

    @onepoint , I will get to this over the weekend. I have been feeling a little rough the last couple of days but will get this sorted out for you. 

  • Profile Image

    Answered by fxr on March 25, 2012 at 12:53 PM

    OK, this is where I have got to with this:

    http://pamppi.info/jotform-testing/lightbox/onepoint2.html

    It involves quite a lot of butchering of the source code. 

    --

    Here is a link to the altered JotForm form source code: 

    http://pastebin.com/t4RJgbd7

    --

     

    This is where to put in your relevant youtube ids:

     

     

    Let me know if you have any questions or need any further customisations carried out to the soruce code. 

  • Profile Image

    Answered by onepoint on March 28, 2012 at 11:06 AM

    Ok, I have put this on our page, and it's working about 70%, but not enough to launch...

    For whatever reason some of the hide attributes in the condition logic are not working in firefox, and nothing hides within IE9. Is this also a script conflict?

    Second, on the video portion, the bottom image tile used to be able to select the checkbox rather than having to click the actual box.

    Lastly, the select layout tiles for rooms 1-4 are overlapping like the video tiles did. Is this a change in CSS or the Javascript?

  • Profile Image

    Answered by fxr on March 28, 2012 at 12:28 PM

    Send on a link on to where you have the form embedded and I will take a look at it. 

    The javascript is simple so cant see that being an issue, but I will know more when I have a look at things on your (test) webpage. 

  • Profile Image

    Answered by onepoint on March 28, 2012 at 12:29 PM

    http://www.onepointpartitions.com/3easyways

  • Profile Image

    Answered by fxr on March 28, 2012 at 06:11 PM

    Yes, it looks like the form code is conflicting with existing code on your webpage. (probably mootools)

    Are you able to put the code of the form into a seperate page on your webserver? (make sure its working) then we could then get you iFrame code to embed it onto the website you want to finally render it on. 

  • Profile Image

    Answered by onepoint on March 28, 2012 at 06:26 PM

    I'm assuming that this "seperate page" would be outside of our joomla template and not another article page etc?

  • Profile Image

    Answered by fxr on March 28, 2012 at 07:00 PM
    Yes, ideally.
  • Profile Image

    Answered by onepoint on March 30, 2012 at 02:08 AM

    I have uploaded the raw html file as a seperate page here. http://onepointpartitions.com/landingtest.html However, the same issues still remain.

  • Profile Image

    Answered by fxr on March 31, 2012 at 10:14 PM

    Can you tell me exactly what changes you need to make to my version of your form? is it very different?

     

    http://pamppi.info/jotform-testing/lightbox/onepoint2.html

     

    We need to get the form right, then look at how we are going to embed to your webapge. 

  • Profile Image

    Answered by onepoint on April 04, 2012 at 05:20 PM

    No, very few changes are needed. Here is what needs to be different.

    On the "choose a material" section, the bottom "pick material" half of the image needs to allow you to select that material option without clicking the checkbox (like the radio buttons) and maybe have the same mouseover.

    Above the material options needs to be an HTML text area in the same color/font stating:

    Upload A Layout, Fax to (615)261-1433 Or Email partitions@onepointpartitions.com

    Please include your contact info on this form.

     

    This message would be centered on the form to provide an alternate option to uploading a file.

    Lastly, on each of the "pick layout" icons, the formatting is pushing them all to the right and causing an overlap.

     

    The issues with the hiding not working properly are browser specific due to the script conflict. Thanks for the help!

  • Profile Image

    Answered by fxr on April 06, 2012 at 07:51 AM

    OK, I have made those adjustments. 

    Can you confirm this editted form source code looks how you want & functioning properly in your tests? 

    http://pamppi.info/jotform-testing/lightbox/onepoint2.html

    --

    If you want to test this edited source in an iframe on your webpage: 

    Use this embed code:

    <iframe allowtransparency="true" src="//pamppi.info/jotform-testing/lightbox/onepoint2.html" frameborder="0" style="width:100%;height:3250px; border:none;"></iframe>

    ( I have tested in 5 browsers and its working fine. )

  • Profile Image

    Answered by onepoint on April 06, 2012 at 01:13 PM

    Alright the testing works great on all browsers, however when placed on our page the script for the lighbox loads from the top of the form thus requiring one to scroll down. (onepointpartitions.com/3easyways) Can the video/mousover portion of the script be placed above the header to fix this?

    Second, can the mousover effect carry over onto the layout tiles?

    Lastly, The text for uploading a layout needs to hide/show up right above the first upload field. Other than that we're set to roll. I appreciate all the help!

  • Profile Image

    Answered by fxr on April 07, 2012 at 05:20 AM

    OK, I see the issue with how the lightbox is rendered, this adds an extra level of complexity which I had overlooked, I will work on that and get back to you. 

    I will also the rollover effect to the layout tiles.

    --

    'Lastly, The text for uploading a layout needs to hide/show up right above the first upload field.' 

    I am not quite sure what you mean by this, can you explain it again please? perhaps provide an annotated screenshot? Just so I know exactly what you mean. 

  • Profile Image

    Answered by fxr on April 07, 2012 at 06:59 AM

    I have made a clone of your webpage here

    The two issues you mention have been addressed. 

    Once I have more clarity and address that last issue you brought up, I will provide instruction on how to add this to content to your website. 

  • Profile Image

    Answered by onepoint on April 09, 2012 at 02:42 PM

    Here we go, attached is an image of what I need the form to do.

    Only show the upload or email/contact information when the upload field is selected.

    Aside from that I think we'll be ready to go. Thanks again for the help!

  • Profile Image

    Answered by fxr on April 09, 2012 at 03:32 PM

    I can't see the screenshot; can you send it to jotformsupport [at] gmail [dot] com , marking the subject with this threads title so that I can have a look at it. 

    I will make the change to the form & then get you over instructions on how to add this to your website. 

  • Profile Image

    Answered by fxr on April 09, 2012 at 05:15 PM

    Ok that change has been made: here

    Now follows the instructions for migrating this to your website. 

    1. First create a new blank file on your website (I remember you used iframe.html previously), put this form source code into it:

    http://pastebin.com/YgTqKNsC

    --

    2. You then need to add the following code to the page in which you want to embed the form:

    http://pastie.org/3758095

    3. The changes you need to make to this code are shown below: 

     

     

    Let me know if you run into any problems carrying out these steps. 

  • Profile Image

    Answered by onepoint on April 17, 2012 at 10:00 AM

    Ok, here is the next question. In testing the form out on our website, we have realized that more of the elements need to be buttonized in order to allow greater ease of use. I want to add image tiles (like pick  a layout) under the "I would like to" section to replace the text. I tried changing this in the html, but it seems I'm missing something on the backend.

     

    Second, is there a way that when we get the notification email that it can display the alt text of each image so we know what field was selected? Sometimes the images fail to load within the email.

  • Profile Image

    Answered by fxr on April 18, 2012 at 03:39 AM

    @onepoint,

    Can you tell me which exactly elements you want to buttonized and I will have a think about what options we have? A screenshot is always useful to help work out what you mean. Do you have images or anything prepped to use as those butons?

    Can you forward on one of those notification emails that shows the missing images to jotformsupport [at] gmail [dot] com ? We may need to rejig the form and add hidden fields which we can use to build a customised email notification. 

    Please mark the subject of that forwarded email with the name of this thread. 

  • Profile Image

    Answered by onepoint on April 19, 2012 at 05:52 PM

    I'm working on creating the image buttons and will email them shortly. I tried to simply duplicate the html creating an image call for the script, but it seems it may be more complicated than that. Let me work up an example screenshot and send it attached to another email.