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

    Breaks in product details removed from custom injected css

    Asked by vobsanniversary on March 31, 2014 at 11:56 AM

    I need to add breaks to product details in my Jotform which I was able to do with this CSS code:

     

    .form-product-details:after { content: '\A'; white-space:pre-wrap; }

     

    However, each time the form is opened in Jotform, the editor is reverting the custom injected CSS setting to this:

     

    .form-product-details:after { content: ' A'; white-space:pre-wrap; }

     

    Notice the missing forward slash, which removes the break and adds 'A' after everything.  I've tried overriding the setting in my page with an external stylesheet, but the Jotform stylesheet always seems to take precendence.

    Is there any way around this other than embedding the source code into the page?  I'd rather not do that as I need to use the payment function in Jotform with this form and it seems cleaner to keep the code in Jotform.

    Any assistance would be appreciated to resolve this problem.

    product Injected CSS JotForm problem source css code
  • Profile Image

    Answered by Carina on March 31, 2014 at 12:51 PM

    I did some tests but had the same result.  
    A workaround might be creating a new html file with the form's source code and editing the css file, so that it has this property defined. Then creating an iFrame embeding code from this html file, so that you can use the iframe method on your side. But for this is necessary to host these html and css files online. Do you have access to a server?

    We can assist you in this process.

    Let us know if this is a solution for you.

    Thank you

  • Profile Image

    Answered by vobsanniversary on April 03, 2014 at 11:37 AM

    Thank you for the feedback, unforunately, I've tried using the method you suggested and that doesn't seem to work either.  Ultimately, the best workaround would be to get jotform to recognize my css style sheet first.  Is there anyway that can happen?

  • Profile Image

    Answered by vobsanniversary on April 03, 2014 at 12:37 PM

    Actually, it might work -- the last time I tried to embed the source code I lost all the formatting.  I tried it again and the iframe solution looks good.  I just wish it wouldn't close the original window when it goes to Paypal...  Do you know if there is a way to redirect it back to the website after payment completion at Paypal?

  • Profile Image

    Answered by vobsanniversary on April 03, 2014 at 12:42 PM

    Also, do you know if we do things this way, will the notification emails still process through the settings at Jotform, or do I need to do anything special with that?

  • Profile Image

    Answered by Carina on April 03, 2014 at 02:11 PM

    Regarding notifications no change is needed, but as you are working with the source code, any edit you do to the form needs you to embed the source code again. This is the downpart if you do lots of editing to your form.

    Regarding the paypal redirecting question, I can only think of editing the javascript file so that instead of opening the paypal in the same window, to open in a new one. But I believe this depends of how comfortable you are with javascript. Perhaps there is a much simpler solution, but for now I can only think of this one.

    Please get back to us if additional support is needed.