WordPress.org

Ready to get started?Download WordPress

Forums

Form Manager
[resolved] ability to have custom css? (18 posts)

  1. ibc3
    Member
    Posted 3 years ago #

    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/

  2. hoffcamp
    Member
    Plugin Author

    Posted 3 years ago #

    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.

  3. ibc3
    Member
    Posted 3 years ago #

    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?

  4. hoffcamp
    Member
    Plugin Author

    Posted 3 years ago #

    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?

  5. hoffcamp
    Member
    Plugin Author

    Posted 3 years ago #

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

  6. gabemott
    Member
    Posted 3 years ago #

    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

  7. gabemott
    Member
    Posted 3 years ago #

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

  8. gabemott
    Member
    Posted 3 years ago #

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

  9. hoffcamp
    Member
    Plugin Author

    Posted 3 years ago #

    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.

  10. ibc3
    Member
    Posted 3 years ago #

    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!!

  11. hoffcamp
    Member
    Plugin Author

    Posted 3 years ago #

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

  12. ibc3
    Member
    Posted 3 years ago #

    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.

  13. hoffcamp
    Member
    Plugin Author

    Posted 3 years ago #

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

  14. ibc3
    Member
    Posted 3 years ago #

    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...

  15. hoffcamp
    Member
    Plugin Author

    Posted 3 years ago #

    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.

  16. hoffcamp
    Member
    Plugin Author

    Posted 3 years ago #

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

  17. ibc3
    Member
    Posted 3 years ago #

    Cool! Thanks! I'm pretty sure that maxlength has been supported by all browsers for some time now, so should be just a matter of adding it to the other attributes. So, in my case for a 5-digit zipcode, html output would look like

    <input id="text-4ddda68780cf0" type="text" style="width:50px;" maxlength="5" placeholder="" name="text-4ddda68780cf0">

    Thanks again for an awesome plug-in!

  18. ibc3
    Member
    Posted 3 years ago #

    Works great! Thanks for the addition!

Topic Closed

This topic has been closed to new replies.

About this Plugin

About this Topic