Our support has moved to: here

@import CSS into forms

stu's Avatar

stu

27 Aug, 2013 03:57 PM

I would like to be able to include a CSS file on my forms. Ideally, I'd like to be able to put any custom code onto a form, and so be able to put {link} tags, as well as custom JS. However, an easier thing to do (for you) might be to allow people to @import the external CSS - we could do this using the existing CSS textarea, except that @import rules have to come first, and the forms currently output rules for body and form.form before the custom CSS is allowed. Maybe you could just put the custom CSS before that, so that the @import fires.

Thanks!
Stu Basden

  1. 1 Posted by stu on 27 Aug, 2013 04:48 PM

    stu's Avatar

    Also, if this is possible, I'd like to be able to get more control over the styling of the page. Is there any way the BODY or HTML tag could have an extra class added, maybe something like ".spectate-form" or something?

  2. Support Staff 2 Posted by Bradley on 27 Aug, 2013 05:14 PM

    Bradley's Avatar

    Thanks for the suggestions Stu. We've included the custom CSS after the default CSS to allow users to override specific styles. We'll certainly consider other ways of integrating 3rd-party styles though.

  3. 3 Posted by stu on 27 Aug, 2013 05:16 PM

    stu's Avatar

    Do you have any idea of timeline on these kinds of things? How quickly do they go through?

    The other alternative, to allow @import to work, is just to separate the custom CSS into it's own <style> tag, so there would be one <style> tag for the font etc, and another for the custom CSS. Does that make sense?

  4. Support Staff 4 Posted by Bradley on 27 Aug, 2013 06:01 PM

    Bradley's Avatar

    We typically incorporate features when they makes sense for at least 80% of our current and future customers We're always evaluating new functionality and are able to move quickly to get something implemented once we've decided on the scope.

    Can you explain a bit more of your use case for this functionality?

  5. 5 Posted by stu on 27 Aug, 2013 06:26 PM

    stu's Avatar

    Sure.

    When I'm connecting my forms into cascade, I want them all to look the same, and I want them to match my site.

    You can see my test page here:
    http://pending.slc.edu/ce/children/test.html
    Compare that with the current form we have (which isn't using spectate):
    http://pending.slc.edu/ce/children/mailing-list.html
    I'm actually hoping to get it looking something like this: http://d.pr/i/Ln68 (which I've done by using JS in the console to pull in this CSS: http://pending.slc.edu/core/v5.0/css/a/spectate.css )

    You can see that several of the fields are inline with each other, and are different widths. Obviously, this is possible to do with spectate by putting the CSS code into the textarea when editing the form. However, this would have to be done with every form I have in spectate. I'm hoping to use spectate to host all ~60 forms on my site. If I wanted to edit the styling for all the forms, I'd have to edit every single form and change the CSS manually for each. That's an unacceptable level of maintenance, and is currently completely stopping me from using spectate in this way.

    However, if I were able to simply @import an external CSS file for each form, then I would only have to edit that single file in order to change every form. This would make it much more maintainable.

    Does that make sense? It's the difference of me using spectate, and not using spectate. And it would be a very small change on your end to allow it to happen.

    Thanks!

  6. Support Staff 6 Posted by Bradley on 27 Aug, 2013 09:30 PM

    Bradley's Avatar

    Are your users going to be creating the forms using Spectate's form builder? If not, have you considered authoring your own form and just using Spectate as a form handler? Sometimes, when you reach a certain level of customization such as wanting to write your own JavaScript, it makes sense to go this route and just leverage Spectate to capture the data, fire off notification emails, etc.

    Offhand, I do not foresee us allowing users to specify their own JavaScript to use on these forms.

    I'm not sure about adding additional fields for specifying CSS files to import.

    We have a somewhat similar suggestion for reusing CSS across many forms that I'm more inclined towards at this point. Would this meet your needs?

  7. 7 Posted by stu on 27 Aug, 2013 09:50 PM

    stu's Avatar

    Although the JS would be nice (and we've utilized it elsewhere), we really want to be able to use the basic connectors. We don't need JS. But we do need maintainable CSS.

    Reusable CSS would be nice. But it just seems like such a simple change to put the custom CSS in it's own tag. It would be nice to be able to keep all my CSS in one place.

    I think the code for the forms you end would go from something like:

    <style>
      <% code to output font etc %>
      <% code to output custom CSS %>
    </style>
    

    to

    <style>
      <% code to output font etc %>
    </style>
    <style>
      <% code to output custom CSS %>
    </style>
    

    Such a change would have no other implications for any of your users (it wouldn't affect CSS order or anything), except to allow for the use of @import within the custom CSS. Does that make sense?

  8. Support Staff 8 Posted by Bradley on 27 Aug, 2013 10:18 PM

    Bradley's Avatar

    Thanks Stu.

    I think I'm following so let me talk this through to make sure :-)

    Is the only thing preventing you from using @import the fact that we're appending your custom CSS to some of our own CSS in the rendered form?

        <link rel="stylesheet" type="text/css" href="http://my.spectate.com/s.css?ver=2" /> 
        <style type="text/css">
    /** Our CSS */
      body { 
        
        
        font-family: Arial;
      }
      form.form {
        
        
        font-family: Arial;
      }
    /** Your custom CSS */
    </style>
    

    If that's it, let me see if there is a good reason why we're keeping all of that CSS in the same <style> tag and if not, I'm up for changing that.

  9. Support Staff 9 Posted by Bradley on 27 Aug, 2013 10:59 PM

    Bradley's Avatar

    Stu,

    I've modified Spectate to output your custom CSS in its own element following the font styles. Please let me know if this resolves the issue you were running into.

    Thanks!
    Bradley

  10. Bradley closed this discussion on 27 Aug, 2013 11:00 PM.

  11. stu re-opened this discussion on 28 Aug, 2013 01:11 PM

  12. 10 Posted by stu on 28 Aug, 2013 01:11 PM

    stu's Avatar

    Yes! That's perfect, thanks!

    You can see it here: http://goo.gl/NyRL3P

    It allows me to do this: http://d.pr/i/QOE3 which outputs this:

    <style type="text/css">
    @import url(http://pending.slc.edu/core/v5.0/css/a/spectate.css);
    </style>
    

    You've made me very happy! Thanks! :)

  13. stu closed this discussion on 28 Aug, 2013 01:11 PM.

  14. Bradley re-opened this discussion on 28 Aug, 2013 01:58 PM

  15. Support Staff 11 Posted by Bradley on 28 Aug, 2013 01:58 PM

    Bradley's Avatar

    Glad to hear it, Stu! Sorry for the back and forth. I was misunderstanding the issue at first.

  16. Bradley closed this discussion on 28 Aug, 2013 01:58 PM.

  17. stu re-opened this discussion on 28 Aug, 2013 03:25 PM

  18. 12 Posted by stu on 28 Aug, 2013 03:25 PM

    stu's Avatar

    No problem at all. I was asking for far too much initially (JS!), but once I realized how simple it was to meet my need, you responded amazingly quickly. I expected to have to wait a week or a month, so getting it resolved same-day is truly impressive! :)

  19. stu closed this discussion on 28 Aug, 2013 03:25 PM.

Comments are currently closed for this discussion. You can start a new one.

Keyboard shortcuts

Generic

? Show this help
ESC Blurs the current field

Comment Form

r Focus the comment reply box
^ + ↩ Submit the comment

You can use Command ⌘ instead of Control ^ on Mac