Styles from Wordpress theme overwrite Form CSS.

  • Profile Image
    barq
    Asked on July 21, 2011 at 11:11 AM

     

    Hi,

     

    I'm trying to embed a form into a Wordpress site. However I have some problems with JotForm's styles being overwritten.

     

    When embedding with iFrames, the labels on the form aren't text-replaced with Cufon as they should.

    When embedding with Embed code, the form disappears when it has been loaded (in FireFox 5).

    When embedding the source, all the styles in the form are rewritten by the ones in my Wordpress stylesheet. And I haven't been able to reset this using reset styles. 

     

     

    My code lie inside two nested #content #colLeft divs. 

     

    This is the css code from my Wordpress style.css file, that overrides JotForm's CSS:

    -------

    #content #colLeft ul li, #content #colLeft ol li  {

    padding:5px 0 5px 20px;

    background:url(images/bullet_list.png) 0 8px no-repeat;

    }

     

    #content #colLeft ul {

    margin:0 0 15px 15px;

    }

    -------

     

    Unfortunately I'm not able to link to the site because it's local on my computer, but I hope the above makes sense?

     

    Any ideas?

  • Profile Image
    NeilVicente
    Answered on July 22, 2011 at 03:57 AM

    Hi,

    Using iframe codes will isolate the form from all other elements in your page, including the css style defined for the page so it will be able to retain its own css properties. However, since it it essentially an external page within a page, it cannot be accessed by other elements or scripts in your page, thus the inability to change fonts using the cufon plugin.

    Using the source code to embed your form opens it to other elements such as the css, that is why its own css styling is affected.

    You would have to re-define the form's css so that it will not be affected by your site's style.css

    We can probably help with changing the form's css but we would need to take a look at the page itself.


    Neil

  • Profile Image
    allanftd
    Answered on July 22, 2011 at 03:57 AM

    Hi Barq,

    Thank you for your message. My suggestion for you is to create a new blank page but with the Cufon font in place. Then paste your form using the embed code of your choice (except Iframe). Save this page. Then in the webpage where you originally want to embed the form, introduce an iframe containing the new page you just created.

    Please let us know if it works for you or not. Thank you for using JotForm!

    JOTFORM SUPPORT

  • Profile Image
    barq
    Answered on July 23, 2011 at 07:40 AM

    Hi Neil and Allan,

    Thanks for your answers. Appreciate it! The only solution I found was to insert the source, and then manually reset all the messed up form styles, by putting reset code in CSS Inject of JotForm. Maybe this is what you (Neil) is referring to?

    This works, but unfortunately it means that I have to manually the re-insert the complete JotForm code on all my pages again, whenever I make a change in JotForm.

    Not really optimal. Could be nice having only a short Embed code on my webpages, instead of the complete source, so only one central place needs to be updated when tweaking the form style (style.css of my Wordpress theme).

    Allan regarding nesting the embed within another iFrame that has Cufon enabled, it would mean that I would have to make to separate CSS files, with some of the same content in. Then I would have to update both whenever I wanted to tweak my Cufon code, which wouldn't be a practical solution for this site. It would require lots of extra work when updating and tweaking the site (and it will keep being tweaked a long time).

    Will have to think about how I can give you access to the source.

    All the best

    Anders

  • Profile Image
    NeilVicente
    Answered on July 23, 2011 at 11:56 AM

    Hi Anders,

    The css reset codes is exactly what I was talking about. Glad that you were able to successfully incorporate it into your embedded forms.

    Yes, you have to manually re-embed the form when you make changes to it in our Form Builder. That is one of the disadvantages of using the source code. Unfortunately, I could not think of a way to embed codes just once and still being able to use cufon replacement on the embedded form.

    The script embed method generates iframe codes on purpose, and that is to prevent the form from being affected by the stylesheet of the page it is embedded on. If the script embed method gives out the full source code instead, it would cause a lot of headaches not only to our users but also to our support team members.

    Hope I was able to shed some light into this issue. Feel free to contact us again if you have other questions. Thanks!


    To your success,
    Neil

  • Profile Image
    barq
    Answered on July 26, 2011 at 05:16 AM

    Hi Neil,

    I was to quick to say my solution worked. The css-reset worked fine, but unfortunately applying CSS to the specific form elements only works half the time. Many of the changes are overwritten by jotformcssgz.

    I can of course edit the values of jotformcssgz in Firebug to test which ones should be changed, but if I add the values to the injected CSS they are just overwritten by jotformcssgz. Any idea how to fix that?

    Allan, regarding your solution, I don't think it would work with Cufon (and my skills). Cufon requires some code in header.php of the Wordpress theme, and if I make an iFrame with an embed code, the Jotform page wouldn't be able to see that code. I can of course make a copy of the cufon code in the new iframe, but in the Cufon code I have in my theme PHP is involved, which makes things too complicated. So I would have to convert the code, or make the iFrame a PHP file as part of Wordpress... I don't think I would be able to make this work.

  • Profile Image
    barq
    Answered on July 26, 2011 at 05:34 AM

    As a followup, I think that the reason styles from jotformcssgz overwrite the injected CSS is that some of the styles in there has an "!important" style applied to them. Like in .form-submit-button-img.

     

    So there's really no way to overwrite these then?

     

     

  • Profile Image
    allanftd
    Answered on July 26, 2011 at 05:50 AM

    Hi barq,

    Thanks for the update. Its a shame my suggestion wouldn't work for you. But my colleague Neil should come up with answers to your questions regarding his solution, and hope that it will eventually work for your benefit.

    We appreciate your patience and your support for JotForm!

    JOTFORM SUPPORT

  • Profile Image
    aytekin
    Answered on July 26, 2011 at 09:09 AM

    Try adding an !important to your own CSS injects as well. It may or may not work. The only way to see is to try it.

    If it does not work, you can download the full source code and edit the the CSS files. Here is how you can get the form source code. Open the form on the Form Builder:
    1. Open "Setup & Share" tab on toolbar,
    2. Click on "Embed Form"
    3. Click on "Source Code" and download the code provided by clicking on the link.

  • Profile Image
    barq
    Answered on July 26, 2011 at 11:19 AM

    Thanks for your answer! I've tried using adding !important declarations, but they still don't change anything.

     

    Isn't there any way to edit fix this without having to insert the complete source code?

  • Profile Image
    aytekin
    Answered on July 27, 2011 at 07:26 AM

    No, there is no way for you to edit this from your end. You will need to use the complete source code to the the CSS/JS files for the form.