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

    Border shadow from injected CSS not displaying correctly

    Asked by daveoreardon on September 25, 2014 at 09:48 PM

    Hi.

    I have some injected CSS that puts a shadowed border around my form. The CSS statement is this:

    box-shadow: 10px 10px 5px #d3d3d3;

    The shadow looks perfect in Preview, but when the form is embedded in an html page, the lower, horizontal shadow is not shown. You can see the problem here:

    http://www.test.ciopulse.com.au/jotform-test.html

    I've attached a screenshot of what the shadow looks like in Preview.

    Any ideas?

    Page URL:
    http://www.test.ciopulse.com.au/jotform-test.html

    Screenshot
    Injected CSS JotForm problem preview horizontal box shadow
  • Profile Image
    JotForm Support

    Answered by Welvin on September 26, 2014 at 02:44 AM

    Hi,

    Append !important to the custom CSS codes. So, the overall codes would look like this:

    .form-all {

    border: 1px solid #d3d3d3 !important;

    box-shadow: 5px 5px 5px #d3d3d3 !important;

    -webkit-border-radius: 5px !important;

    -moz-border-radius: 5px !important;

    border-radius: 5px !important;

    padding: 4px !important;

    }

    Please get back to us if you need further assistance.

    Thank you!

     

  • Profile Image

    Answered by daveoreardon on September 26, 2014 at 07:52 AM

    Thanks but I'm afraid that didn't work. The border shadow looks exactly the same. See here:

    http://www.test.ciopulse.com.au/jotform-test.html

    The bottom shadow is still not showing.

  • Profile Image
    JotForm Support

    Answered by Welvin on September 26, 2014 at 07:59 AM

    Please try re-embedding the form using our iFrame method: http://www.jotform.com/help/148-Getting-the-Form-iFrame-Code.

    Thank you!

  • Profile Image

    Answered by daveoreardon on September 26, 2014 at 08:06 AM

    The iFrame method works. Are there any drawbacks to using the iFrame method that I should be aware of before I make the change in our production environment?

  • Profile Image
    JotForm Support

    Answered by Welvin on September 26, 2014 at 08:32 AM

    You only need to re-embed the form every time you will do some changes to the form because the iFrame height is fixed - not dynamic compare to the Javascript method. However, you can leave it as it is if the sections aren't that long and can be fully viewed in the page.

    Thank you!

  • Profile Image

    Answered by daveoreardon on September 26, 2014 at 09:40 PM

    Oh no! I can't use iFrames because it breaks my form logic.

    I have a single sign-up form (let's call if Form1) that uses a custom Thank You URL to run a PHP script (Script1) which then loads one of two other forms (Form2 or Form3), depending on a field value of Form1.

    Form1 passes several field values to Script1 via parameters in the URL. These fields are used both in the PHP script itself and in Form2 and Form3.

    The field values are no longer being passed between the forms with iFrames.

    Is there a way I can get the border shadow to work without iFrames?

  • Profile Image

    Answered by Ben on September 27, 2014 at 04:38 AM

    Hi Dave,

    Your jotform should work properly no matter if it is in iFrame or not which is why I have moved the issue to another thread so that we can help you set it up properly (if you are interested in pursuing this). You can find it here http://www.jotform.com/answers/435242

    If you would like to convert from iFrames to the prior embed method, do let us know the link to this page and we will take another look at what might be the issue.

    I would recommend creating another page (different from the current test page) so that we can provide you assistance with this and the iFrame embed issue, so that you can use the jotform embedding that works the best for you.

    Best Regards,
    Ben

  • Profile Image

    Answered by daveoreardon on September 28, 2014 at 07:46 AM

    Hi Ben

    I would prefer not to use the iFrame method as this requires additional work when I change the form design (I believe, with the iFrame method I have to change the iFrame size when I add/remove fields from the form).

     

    What do you want me to create another of please? I don't quite understand.

    Cheers

    Dave

  • Profile Image

    Answered by Ben on September 28, 2014 at 08:24 AM

    Hi Dave,

    It might be good to have another page where the iframe embed code would be from the page where non iframe embed code would be if you would like to resolve issues on both threads.

    Now regarding the border shadow.

    I see that this is the code that you have used to embed the jotform on the test page above:

    <iframe id="JotFormIFrame" onload="window.parent.scrollTo(0,0)" allowtransparency="true" src="//form.jotformpro.com/form/42617544191960" frameborder="0" style="width:100%; height:487px; border:none;" scrolling="no"></iframe>
    <script type="text/javascript">window.handleIFrameMessage = function(e) {var args = e.data.split(":");var iframe = document.getElementById("JotFormIFrame");if (!iframe)return;switch (args[0]) {case "scrollIntoView":iframe.scrollIntoView();break;case "setHeight":iframe.style.height = args[1] + "px";break;}};if (window.addEventListener) {window.addEventListener("message", handleIFrameMessage, false);} else if (window.attachEvent) {window.attachEvent("onmessage", handleIFrameMessage);}</script>

    Please change it to this:

    <iframe id="JotFormIFrame" onload="window.parent.scrollTo(0,0)" allowtransparency="true" src="//form.jotformpro.com/form/42617544191960" frameborder="0" style="width:100%; height:487px; border:none;" scrolling="no"></iframe>
    <script type="text/javascript">window.handleIFrameMessage = function(e) {var args = e.data.split(":");var iframe = document.getElementById("JotFormIFrame");if (!iframe)return;switch (args[0]) {case "scrollIntoView":iframe.scrollIntoView();break;case "setHeight":iframe.style.height = args[1] + 10 + "px";break;}};if (window.addEventListener) {window.addEventListener("message", handleIFrameMessage, false);} else if (window.attachEvent) {window.attachEvent("onmessage", handleIFrameMessage);}</script>

    Doing that should set it to be a visible and set properly..

    On the right is the image with +10 added ;)

    Do let me know if that works for you.

    Best Regards,
    Ben

  • Profile Image

    Answered by daveoreardon on September 30, 2014 at 07:53 AM

    Ben - why the +10 with the iframe method? When I use the iframe method, the border shadow displays perfectly without the +10. Cheers

  • Profile Image

    Answered by Ben on September 30, 2014 at 09:25 AM

    Hi Dave,

    It did not show the shadow on the bottom for me as shown on the image above (left). Adding +10 had shown it (image above - right).

    I am however glad that it is resolved for you and if you add those +10 it will work for everyone ;)

    Best Regards,
    Ben

  • Profile Image

    Answered by daveoreardon on September 30, 2014 at 10:31 PM

    Good point. Will make the change.

    Cheers

    Dave.