Conditional fields not working with copied source code

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

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

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

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.

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

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.

Thank you for all the help!

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