Does JotForm interfere with Cufon font replacement?

  • Profile Image
    chadlarson
    Asked on March 31, 2011 at 09:56 PM

    I'm using Cufon font replacement site-wide. In the pages where I've included JotForms, the font replacement now lags. Is there a workaround to make the JotForm and Cufon play nicely? Thanks.

  • Profile Image
    allanftd
    Answered on April 01, 2011 at 04:53 AM

    Hi chadlarson,

    Thank you for using JotForm. I went to the Investor page and other pages of your website but cannot find any inconsistencies in the way the fonts are being displayed. Could you help us point out the differences so that we can investigate further?

    JOTFORM SUPPORT

  • Profile Image
    chadlarson
    Answered on April 01, 2011 at 12:46 PM

    Thanks for your quick response. There is a flash of unstyled content with my headings on the pages that have JotForms: PARTNERING, INVESTOR, and CONTACT. The headings are briefly heavy, bold and unstyled, then they're replaced with the Cufon styling. This doesn't happen on MAIN, ABOUT US, or SERVICES. Hop around the pages and you should see it. Happens in both IE and Firefox. Thanks.

  • Profile Image
    NeilVicente
    Answered on April 02, 2011 at 02:14 AM

    Hi,

    I see what you mean with the unstyled text. Basically what happens is that the plugin you're using to change font style waits for the iFramed Jotform page to load before replacing the unstyled text with a Cufon font image.

    Try using a different embed code, particularly Source. That way, the form loads together with your page and the Cufon plugin wouldn't have to wait for anything before showing the heading images.

    Go to Setup & Embed > Embed Form > Source

     

    Copy the source codes and insert it into your pages, replacing the <iframe> codes

     

     

    Hopefully that solves your problem. Please let us know if you have any other questions or concerns.

     

    Neil

  • Profile Image
    chadlarson
    Answered on April 05, 2011 at 05:18 PM

    You guys are awesome. Thanks for the quick response! Your suggestion worked. Using Embed > Source elminiated the conflict with Cufon font replacement.

    However, there is now a slight issue with the form itself. Any idea why the text area box ("Your Message") doesn't appear? It wasn't a problem when I used Embed > Embed, but now the box is gone (although the field still allows input.)

    Thanks again for your excellent customer service.

  • Profile Image
    NeilVicente
    Answered on April 06, 2011 at 01:26 AM

    Hey Chad,

    Since you embedded the form as Source instead of iframe, the form became a part of your page instead of being a page within a page (via iframe). What happened is that the form adapted whatever style is defined in your website's stylesheet for form elements.

    I found this css code in your stylesheet (style.css):

    textarea {
        backgroundnone repeat scroll 0 0 transparent;
        bordermedium none;
        font-size1em;
        height75px;
        margin-bottom11px;
        overflowauto;
        padding-left5px;
        width217px;
    }
    which renders the "Your Message" textarea invisible. If you have access to style.css in your website's files and folders, find and delete that block of css code. If you cannot access that file, try pasting this css code using the Inject Custom CSS function in the Form Builder.

     

    .form-textarea {
        border1px solid gray;
        font-size13px;
        heightauto;
        widthauto;
    }

    To inject custom css, refer to this guide - Inject Custom CSS.  Let me know if this workaround is any good. Thank you.

    Regards,
    Neil
  • Profile Image
    chadlarson
    Answered on April 06, 2011 at 01:29 AM

    <hitting my palm on forehead>

    Neil, you rule. THANK YOU.

  • Profile Image
    NeilVicente
    Answered on April 06, 2011 at 01:44 AM

    You're very much welcome. Glad to be of help.

    Neil