WordPress.org

Ready to get started?Download WordPress

Forums

Custom Contact Forms
CSS Hooks in Form Divs (3 posts)

  1. graftedin
    Member
    Posted 1 year ago #

    I think I've asked this several times.

    This plugin wraps all form fields in a div that does not have a class. If I want to reformat the layout of the forms with css I need those divs to have a class....not the form element. Every time I download this plugin I have to go through custom-contact-forms-front.php and add class="'.$field->field_class.'" to all the div tags. I would be really nice if this modification where to get added to the next release....its a 5 minute change for the developers that would make our lives easier.

    http://wordpress.org/extend/plugins/custom-contact-forms/

  2. Rocco Freer
    Member
    Posted 1 year ago #

    I created an account just to thank you for this tip. I've been looking for a way to apply CSS to the DIV's.

  3. sgreve
    Member
    Posted 1 year ago #

    Have you considered using the nth-child css pseudo-class? It's poorly supported by older browsers, but it lets you target divs based on the order in which they appear. It's pretty easy to use.

    Let's say your form structure looks something like this:

    <div id="contact">
    <div>
    <label></label>
    <input />
    </div>
    
    <div>
    <label></label>
    <input />
    </div>
    
    <div>
    <label></label>
    <input />
    </div>
    
    </div>

    Here's the CSS you would add to your stylesheet to target the first div:

    div#contact div:nth-child(1){
    float:left;
    }

    That would make the div, and all its contents, float to the left of the container div. You can also use nth-child to target and position the label tags, like so:

    div#contact div:nth-child(1) label{
    float:left;
    }

    It's not a perfect solution, and I agree that CCF should work hooks into the divs (and the labels, come to think of it), but it'll get the job done at the moment.

Topic Closed

This topic has been closed to new replies.

About this Plugin

About this Topic

Tags

No tags yet.