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

    Narrative Field: Unable to inject custom css code. It just accepts external css URL.

    Asked by OLNCMYWeb on October 06, 2014 at 06:36 PM

    I am getting extremely frustrated with styling Narrative Fields in a form that has to be secure & it's NOT because I don't know how.

    Here's the problems:

    1. Custom CSS for Narrative Fields = Link to an external stylesheet, not exactly custom css and injecting css doesn't work.

    2. Linking to said stylesheet causes the browser to BLOCK items that aren't secure -- in this case, the stylesheet.

    3. Injecting CSS using form preferences doesn't work

    4. Using a style attribute in a p, span, or div doesn't work -- everything gets stripped out.

    5. I have one ugly a** section of my form that's double spaced and has a completely different typeset than the rest of my form, which is of course set to match the site.

    Can you see my frustration with this?

    I don't have a secure anything on my server which is why I use your service. If I had a secure server, I'd be hosting my own forms (not a bad idea, hmmm)

    So I'm going to ask, can you either fix the Custom CSS for injecting css for the Narrative Fields, quit stripping out the style attribute from the "Template", or.... I don't know, host my external stylesheet so it can be secure too AND can you do any of this quickly? The form is going live later this week.

     

    using form style template different
  • Profile Image
    JotForm Support

    Answered by Charlie on October 06, 2014 at 08:05 PM

    Hi OLNCMYWEB,

    I do apologize for the inconveniences that this might have caused you. If it is possible, can you provide us the link to your stylesheet so that we can check it?

    I would suggest viewing the source code of the said page so that you can check the element tags being use in the "Narrative Fields" widget. 

     

    This will help you style the appropriate fields in the widget. 

    Here are also the things that I understand with the widget:

    1. The "Template" cannot be manually tag with an element or any html or css code, aside from this label format: {FieldName:TextboxSize:HinTtext}

    2. The custom css is dedicated for the external stylesheet you have, injecting custom css code will not work.

     

    Let us know if this helps you.

    Thanks.

  • Profile Image

    Answered by OLNCMYWeb on October 06, 2014 at 08:24 PM

    Sure, here's the external stylesheet http://dev.operationlookout.org/wp-content/uploads/content.css

    1. I have tried a normal web-friendly font; Verdana

    2. I have tried @font-face

    3. I have tried @import

    No, unfortunately, it doesn't help. I have done that. I know I'm calling up the correct element because the styling is correct when the form is not secure.

     

  • Profile Image
    JotForm Support

    Answered by ashwin_d on October 07, 2014 at 12:21 AM

    Hello OLNCMYWeb,

    I did check your form where you have added the "Narrative Fields" widget. You seems to be trying to link an external style sheet in the widget which will unfortunately not work.   Please check the screenshot below:

    Here are my responses:

    1. Custom CSS for Narrative Fields = Link to an external stylesheet, not exactly custom css and injecting css doesn't work.

    Link to external style sheet will not work. If you check your form's source code, it is used just as injected css code which will obviously not work. Please check the screenshot below:

    2. Linking to said stylesheet causes the browser to BLOCK items that aren't secure -- in this case, the stylesheet.

    Yes that is because, non secure content cannot be added in a secure web page. 

    3. Injecting CSS using form preferences doesn't work

    Injecting the custom css code in the form will not work. You will have to inject css code in your narrative field widget itself as widgets are added inside an iFrame.

    4. Using a style attribute in a p, span, or div doesn't work -- everything gets stripped out.

    As mentioned earlier, you will have to inject css code in your narrative field widget itself.

    5. I have one ugly a** section of my form that's double spaced and has a completely different typeset than the rest of my form, which is of course set to match the site.

    Please share a screenshot of the issue and let us know what changes are required in which section of your form and we will surely try to help you on that.

    We will wait for your response.

    Thank you!

  • Profile Image

    Answered by OLNCMYWeb on October 07, 2014 at 03:52 AM

    "I did check your form where you have added the "Narrative Fields" widget. You seems to be trying to link an external style sheet in the widget which will unfortunately not work."

    If you are speaking in terms of a secure form, you are correct. If you are speaking in terms of an unsecured form, you are incorrect.

    Refer to the follow threads, then check my test pages for correction to your statement:

    1. Charlie, in this thread says, "2. The custom css is dedicated for the external stylesheet you have, injecting custom css code will not work."

    2. http://www.jotform.com/answers/399300-reduce-the-size-of-Narrative-Widget-textbox

    3. My test forms:

    -- Secure form injected with custom css -- does not work https://secure.jotformpro.com/form/42790396681971

    -- Unsecured form injected with custom css -- does not work http://form.jotformpro.com/form/

    -- Secure form injected with external stylesheet -- does not work https://secure.jotformpro.com/form/42791109444961

    -- Unsecured form injected with external stylesheet -- works http://form.jotformpro.com/form/42791109444961

    1. Custom CSS for Narrative Fields = Link to an external stylesheet, not exactly custom css and injecting css doesn't work.

    Link to external style sheet will not work. If you check your form's source code, it is used just as injected css code which will obviously not work. Please check the screenshot below:

    That's not up to me, refer to the programming source code for the widget. Apparently it does work for unsecured forms -- Refer your your colleagues prior support on the issue of styling the Narrative Fields, then see my working image above and visit my test form @ http://form.jotformpro.com/form/42791109444961

    2. Linking to said stylesheet causes the browser to BLOCK items that aren't secure -- in this case, the stylesheet.

    Yes that is because, non secure content cannot be added in a secure web page.

    I followed the documentation for styling Narrative Fields, which just happens to not work with secured forms. This is why I'm writing for support, otherwise I would have no need.

    3. Injecting CSS using form preferences doesn't work

    Injecting the custom css code in the form will not work. You will have to inject css code in your narrative field widget itself as widgets are added inside an iFrame.

    It was used to rule out and diagnose this issue

    4. Using a style attribute in a p, span, or div doesn't work -- everything gets stripped out.

    As mentioned earlier, you will have to inject css code in your narrative field widget itself.

    Refer to the support threads I provided above and #3

    5. I have one ugly a** section of my form that's double spaced and has a completely different typeset than the rest of my form, which is of course set to match the site.

    Please share a screenshot of the issue and let us know what changes are required in which section of your form and we will surely try to help you on that.

    I will need this for approx 3 of these widgets in formID=42715293175962. Refer to the image that I point out as working. Its CSS is as follows:

    @font-face {
    font-family: 'Lato';
    font-style: normal;
    font-weight: 400;
    src: local('Lato Regular'), local('Lato-Regular'), url(//fonts.gstatic.com/s/lato/v10/9k-RPmcnxYEPm8CNFsH2gg.woff) format('woff');
    }

    #content {
    font-family: 'Lato', sans-serif;
    font-size:14px;
    line-height: 20px !important;
    }

  • Profile Image

    Answered by OLNCMYWeb on October 07, 2014 at 03:55 AM

    I got my edit button back -- duplicate deleted

  • Profile Image

    Answered by OLNCMYWeb on October 07, 2014 at 04:00 AM

    Your system just completely froze and freaked out. Sorry about the double post -- I don't have an edit button on either one of them to delete one.

  • Profile Image
    JotForm Support

    Answered by ashwin_d on October 07, 2014 at 06:34 AM

    Hello OLNCMYWeb,

    Please accept my apology. I have understood the issue now.

    The css is not applied to your widget when you access your form with its SSL URL. That is because non secure code cannot be added in a secure page. To solve your problem, the css URL should also be SSL. I did check and it seems operationlookout does not have SSL enabled.

    The injected custom css code in the "Narrative Field" widget is not working. I am reporting it to our back end team. We will get back to you as soon as we have any update form them.

    For now I would suggest you to please embed your form using its non secure embed code. .

    Thank you!

  • Profile Image

    Answered by OLNCMYWeb on October 07, 2014 at 12:08 PM

    Thank you for understanding the problem.

    Unfortunately, I cannot use my form non-securely. If I could, this wouldn't be such a HUGE issue. If you look at the form, just the first page alone, I have to collect a lot of sensitive and personal information. This is why my form MUST BE secure.

    I use JF just for it's ability to pass forms via SSL, because as you stated, operationlookout does not have SSL. This was the selling point that attracted me to your service.

    So please, if this can be fixed quickly, please do. I am revamping all the forms and may need this widget and your SSL for more than this.

  • Profile Image
    JotForm Support

    Answered by ashwin_d on October 07, 2014 at 01:21 PM

    Hello OLNCMYWeb,

    I have already reported this to our back end team. Though we cannot provide you an ETA on this but this issue should be addressed soon. We will get back to you as soon as we have any update form them.

    Thank you!

  • Profile Image

    Answered by OLNCMYWeb on October 09, 2014 at 01:43 AM

    I think your back end developers have been working with my form between last night and today because of some changes I've seen and revision history with one of my test forms.

    Anyway, there is some trouble with your server related to whatever they're doing on your system

    See the screencast for the problem http://screencast.com/t/Mlyu4oNA0

    The Ray ID keeps moving and never stops. I can't say if it's repeating itself or just keeps counting. What I can tell you is it is in place where the Narrative Field widget goes in my large form -- formID=42715293175962. It is not happening in the test forms

  • Profile Image

    Answered by OLNCMYWeb on October 09, 2014 at 01:55 AM

    Having p tags now seem to be causing the error. When I took them out, the error went away.

  • Profile Image
    JotForm Support

    Answered by Charlie on October 09, 2014 at 08:26 AM

    Hi OLNCMYWeb,

    This has been reported to our back end team by my colleague ashwin_d.

    If you have new problems or concerns with building your form, please open a new thread in the forum to further assist you.

     

    Thank you.

  • Profile Image
    JotForm Support

    Answered by TitusN on December 18, 2014 at 01:20 AM

    Hello

    The cloudflare error has since been fixed. 

    We have also updated the widget in the following way: 

    1. All existing narrative fields widgets will support both injected custom CSS, and linked CSS files

    2. Newly added narrative fields widgets will not support CSS injection, rather, font and layout settings will be customized from the form builder - most of this is in development - so kindly stay updated on the latest releases. This update will increase the styling integration to the main form - making widgets a seamless part of the form. 

    Your feedback is greatly valued. 

    Cheers!