dividing a div in to more then 1 columns

Question

I am using Contact Forms 7 to create contact form in wordpress installation. the form created is located here

Contact Form extension is free, flexible and easy to use..but issue is, whatever number of fields a form contains, it always creates only one div and thus page length goes long ( see my form created)

I dig up the code and ended in contact-form-7\includes\classes.php. the code responsible for generating html of the form is

/* Generating Form HTML */

function form_html() {
    global $wpcf7;

    $form = '<div class="wpcf7" id="' . $this->unit_tag . '">';

    $url = wpcf7_get_request_uri();

    if ( $frag = strstr( $url, '#' ) )
        $url = substr( $url, 0, -strlen( $frag ) );

    $url .= '#' . $this->unit_tag;

    $url = apply_filters( 'wpcf7_form_action_url', $url );

    $class = 'wpcf7-form';

    if ( $this->is_posted() ) {
        if ( empty( $wpcf7->result['valid'] ) )
            $class .= ' invalid';
        elseif ( ! empty( $wpcf7->result['spam'] ) )
            $class .= ' spam';
        elseif ( ! empty( $wpcf7->result['mail_sent'] ) )
            $class .= ' sent';
        else
            $class .= ' failed';
    }

    $class = apply_filters( 'wpcf7_form_class_attr', $class );

    $enctype = apply_filters( 'wpcf7_form_enctype', '' );

    $form .= '<form action="' . esc_url_raw( $url ) . '" method="post"'
        . ' class="' . esc_attr( $class ) . '"' . $enctype . '>' . "\n";

    $form .= $this->form_hidden_fields();

    $form .= $this->form_elements();

    if ( ! $this->responses_count )
        $form .= $this->form_response_output();

    $form .= '</form>';

    $form .= '</div>';

    return $form;
}

I am looking for some way so that I can

• divide <div class="wpcf7" into 3 divs containing approximately same No of fields

• or inserting <div> in between <form action="somewhere so that I can expand my form horizontally in approximately (not totally) equal div's

My other form, whose format I want to follow is located here

upadate:

• I am using Eunoia theme and short codes like [one_third first] to apply the CSS and page structure are not working, to me, it make sense as the plugin use the same '[ tag ]' structure
• I tried adding div elements in form code, but still nothing happens, although in source code of page, these div tag appears...

An other Question rose in mind My theme codes are like [some theme code] they dont work and simply output on the page...any suggestion I can make use of it??

can somebody suggest me a way out to do this? some rough ideas, some guide line, so that I can try to code that...

thanks..

Answer 1

If you can get your fields into a zero indexed array, this will do the trick (phpFiddle):

$fields=array('F1','F2','F3','F4','F5','F6','F7','F8');
$fieldCount=count($fields);
$column=0;
$columnCount=3;
//All columns have this many fields
$perColumn=floor($fieldCount/$columnCount);
//This many fields left over (to be distributed over the first columns)
$extras=$fieldCount - $perColumn*$columnCount;
$i=0; //All fields iterator
$j=0; //Column fields iterator
$columnFieldCount=$perColumn;
if($extras>$column)$columnFieldCount++;
echo '
<style>.column{float:left; width:25%;}</style>
<div class="column">';
for($i=0; $i<$fieldCount;$i++)
{
    echo '
<p>'.$fields[$i].'</p>';
    $j++;
    if($j>=$columnFieldCount)
    {
        $j=0;
        $column++;
        $columnFieldCount=$perColumn;
        if($extras>$column)$columnFieldCount++;
        echo '
</div><div class="column">';
    }
}
echo '
</div>';