Title: Multi columns, possible?
Last modified: August 21, 2016

---

# Multi columns, possible?

 *  Resolved [sallam](https://wordpress.org/support/users/sallam/)
 * (@sallam)
 * [12 years, 4 months ago](https://wordpress.org/support/topic/multi-columns-possible/)
 * Greetings
 * Is it possible to arrange the form fields in 2 or more columns please?
    For example,
   I’m trying to build a form that calculates the cost of a recipe, where the user
   would put the price of 1 kg of each ingredient, then the weight in grams used
   from that ingredient. Instead of showing them in separate rows, can each 2 fields
   show next to each other in 2 columns? If so, how can that be done please? If 
   it can be done using CSS, please give an example, as I’m a CSS newbie.
 * Many thanks.
 * [https://wordpress.org/plugins/calculated-fields-form/](https://wordpress.org/plugins/calculated-fields-form/)

Viewing 10 replies - 1 through 10 (of 10 total)

 *  Thread Starter [sallam](https://wordpress.org/support/users/sallam/)
 * (@sallam)
 * [12 years, 4 months ago](https://wordpress.org/support/topic/multi-columns-possible/#post-4972243)
 * I’ve looked up your answers in the FAQ and now I know how to use 2, 3 or 4 columns..
 * > Is there a way to format the form in a table structure (various fields in the
   > same line) ?
   >  Into the form editor click a field and into its settings there
   > is one field named “Add Css Layout Keywords”. Into that field you can put the
   > name of a CSS class that will be applied to the field.
   > There are some pre-defined CSS classes to use align two, three or four fields
   > into the same line. The CSS classes are named:
   > column2
   >  column3 column4 For example if you want to put two fields into the
   > same line then specify for both fields the class name “column2”.
 * Great! worked like a charm!
    But I noticed that the cursor focus goes to the 
   first field at the left side, even if that field is not fieldname1. Because I
   build Arabic forms, I’ve arranged the fields so that fieldname1 shows at the 
   right side, and fieldname2 at the left side.
 * Is there a way I can make the cursor focus on fieldname1, regardless of its position
   in the table? and same for the tab button too please?
 *  Plugin Author [codepeople](https://wordpress.org/support/users/codepeople/)
 * (@codepeople)
 * [12 years, 4 months ago](https://wordpress.org/support/topic/multi-columns-possible/#post-4972256)
 * Hi,
 * If you want set the focus in the second field, each time you move to a different
   page in a multipage form, you should edit the fbuilder-pro-public.jquery.js file,
   located in “/wp-content/plugins/calculated-fields-form/js/fbuilder-pro-public.
   jquery.js”.
 * Please, open the file in the text editor your choice, and go to the line of code:
 * $(“#fieldlist”+identifier+” .pb”+page).find(“.field”)[0].focus();
 * If you want set the focus in the second field, modify the previous line like 
   follow:
 * $(“#fieldlist”+identifier+” .pb”+page).find(“.field:eq(1)”)[0].focus();
 * And that’s all.
    Best regards.
 *  Thread Starter [sallam](https://wordpress.org/support/users/sallam/)
 * (@sallam)
 * [12 years, 4 months ago](https://wordpress.org/support/topic/multi-columns-possible/#post-4972260)
 * Its not a multipage form. Its a single page, but the fields are 2 in each line.
   I want it to focus on fieldname1, which in my form is located at the right side,
   not the left side.
    And I wanted to make it so the focus is set to fieldname1,
   instead of the first field to the left.
 * I do not want it to permanetly focus on the second field, because some forums
   would have 1 column in each line, and in that case it would skip the first line.
 *  Plugin Author [codepeople](https://wordpress.org/support/users/codepeople/)
 * (@codepeople)
 * [12 years, 4 months ago](https://wordpress.org/support/topic/multi-columns-possible/#post-4972303)
 * Hi,
 * Could you send me a link to your page to check the issue in detail, please?
 * Best regards.
 *  Thread Starter [sallam](https://wordpress.org/support/users/sallam/)
 * (@sallam)
 * [12 years, 4 months ago](https://wordpress.org/support/topic/multi-columns-possible/#post-4972306)
 * Sure, here is the link:
    [http://my2cents.gawaher.com/2027/%D8%AD%D8%B3%D8%A7%D8%A8-%D8%AA%D9%83%D9%84%D9%81%D8%A9-%D8%A3%D9%89-%D8%B5%D9%86%D9%81-%D8%A3%D9%83%D9%84-%D9%88%D9%85%D9%82%D8%AF%D8%A7%D8%B1-%D8%A7%D9%84%D9%88%D9%81%D8%B1-%D9%85%D9%82%D8%A7%D8%B1.html/2](http://my2cents.gawaher.com/2027/%D8%AD%D8%B3%D8%A7%D8%A8-%D8%AA%D9%83%D9%84%D9%81%D8%A9-%D8%A3%D9%89-%D8%B5%D9%86%D9%81-%D8%A3%D9%83%D9%84-%D9%88%D9%85%D9%82%D8%AF%D8%A7%D8%B1-%D8%A7%D9%84%D9%88%D9%81%D8%B1-%D9%85%D9%82%D8%A7%D8%B1.html/2)
 * You’ll notice that I’ve arranged the form so that the first field at the left
   is fieldname3, then to the right is fieldname2 (because in Arabic everything 
   starts at the right side)
    It seems that your script focuses on the first field
   it finds at the top left. That is why the focus goes to fieldname3, but I want
   it to focus on the the lowest numbered field, in this case: fieldname2, not the
   first field it finds at the left side.
 * Alternatively, it could perhaps focus on the first field it finds at the right
   side, and the tab goes from right to left in each line? (or from the lowest numbered
   fieldname to the higher ones?)
 *  Plugin Author [codepeople](https://wordpress.org/support/users/codepeople/)
 * (@codepeople)
 * [12 years, 4 months ago](https://wordpress.org/support/topic/multi-columns-possible/#post-4972328)
 * Hi,
 * Could you send me the WordPress access to implement a solution in your copy of
   plugin, please? If the solution is definitive, I will publish an update of plugin
   to make it available for all users.
 * For send us sensitive information, use our support page:
 * [http://wordpress.dwbooster.com/support](http://wordpress.dwbooster.com/support)
 * Best regards.
 *  Thread Starter [sallam](https://wordpress.org/support/users/sallam/)
 * (@sallam)
 * [12 years, 4 months ago](https://wordpress.org/support/topic/multi-columns-possible/#post-4972330)
 * Can you please type here what files to edit and what lines to be changed or edited
   and I’ll do it myself please?
    If you want me to try several times its ok, I’ll
   repeat as much as you want me to.
 *  Plugin Author [codepeople](https://wordpress.org/support/users/codepeople/)
 * (@codepeople)
 * [12 years, 4 months ago](https://wordpress.org/support/topic/multi-columns-possible/#post-4972332)
 * Hi,
 * Follow the steps below, but please let me know the results:
 * 1. Create a backup of fbuilder-pro-public.jquery.js file.
 * 2. Open the fbuilder-pro-public.jquery.js file in the text editor your choice.
 * 3. Go to the snippet of code:
 * $(“#fieldlist”+opt.identifier+” .pb”+page).append(items[i].show());
 * and replace by the following code:
 * tap_count = ( typeof tap_count != ‘undefined’ ) ? tap_count : 100;
    var _e = 
   $( items[i].show() ); _e.find( ‘.field’ ).attr( ‘tabindex’, ++tap_count ); $(“#
   fieldlist”+opt.identifier+” .pb”+page).append( _e );
 * Best regards.
 *  Thread Starter [sallam](https://wordpress.org/support/users/sallam/)
 * (@sallam)
 * [12 years, 4 months ago](https://wordpress.org/support/topic/multi-columns-possible/#post-4972334)
 * Did exactly as you said, but nothing changed.
    [http://my2cents.gawaher.com/2027/%D8%AD%D8%B3%D8%A7%D8%A8-%D8%AA%D9%83%D9%84%D9%81%D8%A9-%D8%A3%D9%89-%D8%B5%D9%86%D9%81-%D8%A3%D9%83%D9%84-%D9%88%D9%85%D9%82%D8%AF%D8%A7%D8%B1-%D8%A7%D9%84%D9%88%D9%81%D8%B1-%D9%85%D9%82%D8%A7%D8%B1.html/2](http://my2cents.gawaher.com/2027/%D8%AD%D8%B3%D8%A7%D8%A8-%D8%AA%D9%83%D9%84%D9%81%D8%A9-%D8%A3%D9%89-%D8%B5%D9%86%D9%81-%D8%A3%D9%83%D9%84-%D9%88%D9%85%D9%82%D8%AF%D8%A7%D8%B1-%D8%A7%D9%84%D9%88%D9%81%D8%B1-%D9%85%D9%82%D8%A7%D8%B1.html/2)
 *  Plugin Author [codepeople](https://wordpress.org/support/users/codepeople/)
 * (@codepeople)
 * [12 years, 4 months ago](https://wordpress.org/support/topic/multi-columns-possible/#post-4972407)
 * Hi,
 * Could you contact me through the support page, to try solve the issue in your
   website by myself, please?
 * [http://wordpress.dwbooster.com/support](http://wordpress.dwbooster.com/support)
 * Best regards.

Viewing 10 replies - 1 through 10 (of 10 total)

 The topic ‘Multi columns, possible?’ is closed to new replies.

 * ![](https://ps.w.org/calculated-fields-form/assets/icon-256x256.jpg?rev=1734377)
 * [Calculated Fields Form - AI Form Builder for WordPress - Contact, Payment, Quote, Quiz & More](https://wordpress.org/plugins/calculated-fields-form/)
 * [Frequently Asked Questions](https://wordpress.org/plugins/calculated-fields-form/#faq)
 * [Support Threads](https://wordpress.org/support/plugin/calculated-fields-form/)
 * [Active Topics](https://wordpress.org/support/plugin/calculated-fields-form/active/)
 * [Unresolved Topics](https://wordpress.org/support/plugin/calculated-fields-form/unresolved/)
 * [Reviews](https://wordpress.org/support/plugin/calculated-fields-form/reviews/)

 * 10 replies
 * 2 participants
 * Last reply from: [codepeople](https://wordpress.org/support/users/codepeople/)
 * Last activity: [12 years, 4 months ago](https://wordpress.org/support/topic/multi-columns-possible/#post-4972407)
 * Status: resolved