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

    Conditional fields not working with copied source code

    Asked by emilyjane on March 12, 2015 at 01:33 PM

    Hello,

     

    Im making a form to add to a site that already has some other forms on it.  I am going to need o style my jotform identically to the forms already on the site. I have significant knowledge of HTML/CSS and I figure the best way to do this would be to take the source code from jotform copy it onto my site and then I can add some additional CSS classes, etc.. Before even editing the source code I have encountered a problem that the conditional fields are not hiding when they should (all fields are visible all the time).  Do you know how this can be fixed. 

     

    Here is a link to the dev site where is it not working: http://pcp-test.myshopify.com/pages/custom-quote.  

    Here is a link to the form that works correctly (If you select Project Type > Hardcover book a number of new dropdowns appear):http://form.jotformpro.com/form/50687173251961

    Thank you!

     

    Emily

    Page URL:
    http://pcp-test.myshopify.com/pages/custom-quote

    source JotForm problem style
  • Profile Image
    JotForm Support

    Answered by Charlie on March 12, 2015 at 03:01 PM

    Hi Emily,

    To better assist you, could you please provide us more details of the conditional logic that you are having problems? What should be hidden and show and what are the rules needed to be met.

    Regarding embedding the form, I would suggest using the Form Designer + Inject Custom CSS code to achieve the style that you would like instead of using the full source code, you might encounter code conflict between your website and the form.

    To learn more about the form Designer, you can check this guide: http://www.jotform.com/help/300-Form-Designer-Tutorial-Let-s-create-fantastic-forms-. To learn more about custom CSS codes, you can check this one: http://www.jotform.com/help/75-Customize-your-Form-using-Custom-CSS-Codes.

    I hope this helps.

    Kind regards

  • Profile Image

    Answered by emilyjane on March 12, 2015 at 04:43 PM

    Attached is a screenshot that shows the conditions when certain fields are supposed to "Show". I didnt designate "Hide" for anything because I noticed that in the Preview, once I designate something to "Show" in a certain circumstance it is hidden in other circumstances by default (correct?).  

    The reason I am opting to copy the source code rather than Inject Custom CSS is that I ultimately want to clone the style of a pre-existing form by adding class names from that form into the HTML of the jotform and moving the field labels so they are within divs that contain the input field (because that is how the form I am copying is structured.  

     

    If its not possible to get the conditional logic working w the copied source code I will use the Inject Custom CSS method but I suspect it will be more difficult to do it that way.  I think maybe the problem is some sort of javascript thing or maybe a link to some other asset that contains the conditional code is broken?

    Thank you so much for your help.

    Emily

     

  • Profile Image
    JotForm Support

    Answered by BDAVID on March 12, 2015 at 05:58 PM

    I would definitely recommend you to embed your form in your site using the iFrame embedded method, since using the full source code might conflict with the jquery libraries in your site:

    Regarding the styling of your form, I would recommend you to try the Designer feature as suggested by my colleague, you will see changes in real time, it is easy to use, there is no need to be an expert in CSS area.

  • Profile Image

    Answered by emilyjane on March 19, 2015 at 10:36 PM

    Thanks B David.  In order to avoid javascript conflicts I am using the iframe technique and your design feature.  I know CSS very well and it makes more sense for me to use the area where I can insert CSS as opposed to the visual interface (especilally becasue I already have the CSS written for forms that should look the identical). The interface is someone tedious but I understand there is a trade off with these sorts of things designed for usability without CSS experience.

    I have a couple questions:

    1.  A width style is inserted into the select in my dropdowns and I would like to eliminate it but I cannot determine where it came from (image attached).  Do you know where this info is coming from?

     2. The forms that I already have CSS written for (not jotform) are part of a responsive site with breakpoints set at 1020px, 720px, and 540px width.  I see there is a box to check to enable the jotforms to be "responsive".  What exactly does this mean?  Will I be able to set style changes to occur at these breakpoint like I have with my other forms?

    Here is the jotform: http://pcp-test.myshopify.com/pages/custom-quote

    Here is the form I am in process of copying: http://pcp-test.myshopify.com/pages/hardcover_book

    Thanks a lot!

    Emily

  • Profile Image
    JotForm Support

    Answered by Charlie on March 20, 2015 at 12:02 AM

    Hi,

    Here are my answers to your questions, I hope it helps.

    1.  A width style is inserted into the select in my dropdowns and I would like to eliminate it but I cannot determine where it came from (image attached).  Do you know where this info is coming from?

    I believe this is the width set in the form builder.

    2. The forms that I already have CSS written for (not jotform) are part of a responsive site with breakpoints set at 1020px, 720px, and 540px width.  I see there is a box to check to enable the jotforms to be "responsive".  What exactly does this mean?  Will I be able to set style changes to occur at these breakpoint like I have with my other forms?

    You can check this guide on how to make the form mobile responsive: http://www.jotform.com/help/311-How-to-make-forms-Mobile-Responsive. What this does is that when the form is viewed directly on a mobile phone, the layout of it will automatically adjust to be mobile friendly. Embedding it on a website which is also mobile responsive would help the form adjust its layout. 

    If you would like to use breakpoints in the form, you can use the @media rule in CSS code:

    @media screen and (min-width: 10px) and (max-width: 540px) {

    insert custom CSS styling here

    You can inject that under Form Designer->CSS tab.

    I hope that helps.

    Thank you.

  • Profile Image

    Answered by emilyjane on March 23, 2015 at 12:17 AM

    Thank you for all the help!

    One thing that Im having trouble with is using the @media rule in the injected CSS area.  I added some styles that are only supposed to apply to screens up to 720px but they are applying to larger ones as well. styles for .form-all & .form-input. Im not sure what Im doing wrong.  Would you mind having a look?

    Thanks,

    Emily

     

  • Profile Image
    JotForm Support

    Answered by Charlie on March 23, 2015 at 01:30 AM

    Hi Emily,

    It seems like this is more on the custom CSS code using @media rule, to better assist you I've opened a new thread regarding this matter. Please refer to this link instead: http://www.jotform.com/answers/538382. We will address it accordingly.

    Kind regards