Support » Plugin: Form Manager » [Plugin: WordPress Form Manager] ability to have custom css?

  • Resolved ibc3

    (@ibc3)


    Hi! First, I love your plug-in! It has the best functionality and usability than several of the other popular plug-ins I have evaluated.

    I have the need to adjust the style on a few elements, as well as add a few classes of my own. Is there a place for me to do that without editing your style.css, which gets overwritten with each new release? Sorry if I missed this.

    http://wordpress.org/extend/plugins/wordpress-form-manager/

Viewing 15 replies - 1 through 15 (of 17 total)
  • Plugin Author hoffcamp

    (@hoffcamp)

    There is a way to do that, but I didn’t add it to the FAQ yet. Let me explain.

    First I would examine templates/fm-form-default.php, which is used to display forms by default. Here is the basic rundown: The <form> tag has the class “fm-form” and the form is displayed within a “fieldset” if the option to show borders is set. The items are listed with a “ul”, and each item has the id “fm-item-(nickname)” if you set a nickname for that item. I was hoping this would be enough to get at the form elements via CSS, but if there is something missing in this setup, let me know and I’ll spice it up. I’m not much of a designer, just a coder. If you really need to change the way forms are displayed, you can edit fm-form-default.php and save your changes to another file name – my plugin stores the files in the templates/ directory in the database so they persist across updates, but anything named fm-form-default.php will be overwritten by the new version.

    Yes, I can easily identify & modify the elements via css, but every time I apply updates, I have to re-apply changes in the css b/c style.css gets overwritten. I can put the style inline in the templates I created if necessary, but I was just trying to keep the style in the css if I could. That make sense?

    Do you think that a stylesheet could be added as a template, too, to override the one that comes with the plug-in?

    Plugin Author hoffcamp

    (@hoffcamp)

    You could add the CSS to your theme’s stylesheet, or maybe a child theme. That was what I had in mind when adding the CSS classes to the display template – my logic was that the changes would likely be to make the form fit a particular theme. But then, I’m not really a designer, so maybe this doesn’t make sense?

    Also, any files in the /templates directory are preserved across uploads, so you could put anything in there that you want, but if you are going to have a stylesheet in that directory, why not just inline it in the template?

    Plugin Author hoffcamp

    (@hoffcamp)

    I should add, any files in /templates are preserved, except for the default templates that come with the plugin.

    Thanks, this is great. Wondering if I can ask some specific questions:
    1. How would I change the color of the submit button?
    2. Can I make the text box NOT resizable?
    Thanks

    I changed the submit button in the custom.css code (using thesis):
    .custom input.submit { color: #FFF;
    background-color: #155717;
    }

    Still wondering if it’s possible to make the text box not resizable (the lower right corner “tab” that drags to increase size).

    Plugin Author hoffcamp

    (@hoffcamp)

    1. You could do the following, but this would apply to every form on your site:

    .fm-form .submit{
    //stuff for the button
    }

    If you want it to be specific to a particular form, you need to know your form’s ID number, say ‘1’, and use the following:

    #fm-form-1 .submit{
    background-color:#FF0000;
    }

    This should be done by either ID # or form slug, but for now it will only work for ID #.

    2. You have to give the textarea a nickname in ‘advanced’, and put this in your stylesheet somewhere:

    #fm-item-(nickname) textarea{
    resize: none;
    }

    Hope that helps.

    That’s fine on the inline or addressing in the custom template. I just like to try to keep it separate if I can for a clean separation. Really, the biggest thing I’m trying to over-ride is the float on the submit button.

    Another idea… Is there an ability to set a max-length to input fields that I missed somewhere?

    Thanks!!

    Plugin Author hoffcamp

    (@hoffcamp)

    Its not in there as an option, but you could make a new validator to keep the length down.

    Well, I did make a validator, but that only validates after the data is entered and submitted, right? It would be nice to keep users from entering in too many characters at the time of entry.

    Plugin Author hoffcamp

    (@hoffcamp)

    The validators are only user side javascript. If they aren’t working user side then there is a problem…

    Oh, the validators are working just fine. I’m saying that if we had the ability to assign a maxlength to a field, it would prevent the user from entering too many characters before clicking submit & hitting the validator code. It would work just like the width field on the form element, except it would be maxlength to prevent extra characters from being entered. Just an idea….

    For my purposes, I could just hard code the field on the template, but it would be nice to have this as part of the generated code…

    Plugin Author hoffcamp

    (@hoffcamp)

    Okay I see what you mean now, you want to prevent too many characters outright, rather than telling the user after they click ‘submit’. I think this is a feature of HTML5 inputs, though I would have to write some javascript to simulate the behavior in browsers that don’t support it. Even so I take your point, this is a reasonable thing to want to do, and will only require a single text field in the editor. I’m trying to keep it simple and intuitive, but this should be fine. I’ll add this in.

    Plugin Author hoffcamp

    (@hoffcamp)

    Its not even HTML5, but normal HTML. Should be up in an hour or so.

Viewing 15 replies - 1 through 15 (of 17 total)
  • The topic ‘[Plugin: WordPress Form Manager] ability to have custom css?’ is closed to new replies.