0

I have a requirement to design this type of form for a custom content type. This is one part in a large form.

At first what I did is made a Field Group called Income Information

Inside the Field Group I made new fields:

  • Age as textfield Integer
  • Sex as select list
  • Description as Long text
  • Family Income as Field Collection

Family Income field collection field would have a collection of fields like Family Member, Income, Savings and Loan.

My question is here how to present this part Family Member, Income, Savings, Loan in a table format as the picture below.

In Family Member: Father, Mother, Spouse are just listed by default. If users want to add some other then there is textbox for that, but the total family member will not increase from 5, that means no add more field button there.

Form example

5
  • Hi, jhilke bro ..just another method, you can write custom module for doing this using Drupal "form API". and theming the form.
    – shrish
    Feb 24, 2014 at 4:40
  • and how am I supposed to use the same form in my content type?
    – user12947
    Feb 24, 2014 at 4:42
  • you can add permission to that form for making accessible only for admin. In case of creating content type for your form follow this link. public-action.org/content/…
    – shrish
    Feb 24, 2014 at 4:53
  • 3
    This is really a lot of different questions, for example, formatting as a table, default values, save as draft, etc. are all their own questions. The title of the post is about formatting as a table so the questino really should just be about that. It helps others make use of any answers you get if you stick to one question per question. Also, asking a bunch of things like this (and asking how to implement a mockup) is basically asking others to do your work for you, which is also not allowed on drupal.stackexchange.
    – rooby
    Feb 24, 2014 at 12:10
  • I have formatted my question to put the focal point in my requirements. And no, I am not asking anybody to do my task, I am asking for guidance how I can make the input fields in content type look like table form.
    – user12947
    Feb 24, 2014 at 13:03

5 Answers 5

3
+25

You have multiple questions, so answering the title one: "Form with Multiple fields in table format"

You can do it with custom code by themeing the form and printing the fields in a table (I can elaborate on this if you want). One thing to note though is that if you want the user to be able to add more rows to the table this solution gets trickier.

If you do want to add more rows or if you don't want to do custom themeing for your form you you can use the field collection module along with the field collection table module.

It works pretty well, however I currently recommend using the latest dev version of the field collection table module as there are some bug fixes in there you will want.

There are also a few patches in the issue queue that you might need depending on your specific needs, so if you run into bugs (I did when I used it) try searching the issue queue for patches.

1
  • I don't think field collection table would be helpful here because it renders the field collection value in table format that is in view mode , not on node create/edit form. There are very few modules(display suite form,panel fields) available for theming forms element compare to view mode themings. Other wise theming the form is the only thing which could be done in d7.
    – kiranking
    Mar 19, 2015 at 18:09
2

This is not going to be pretty, but I've managed to achieve this before by using the '#prefix' and '#suffix' properties of the form elements.

First make sure all the form elements are in the right order, then begin by adding the table html to these properties.

Here's an example:

// This code will give you a table with two columns and two rows:
// one header row and a row with the form fields.
$form['first_form_elment'] = array(
  '#type' => 'textfield',
  '#title' => t('Can have a title'),
  '#prefix' => '
    <table id="my-table">
      <tr><th>' . t('Header 1') . '</th><th>' . t('Header 2') . '</th></tr>
      <tr><td>
       <!-- Space for this element -->
    ',
  '#suffix' => '</td>',
);

$form['second_form_elment'] = array(
  '#type' => 'textfield',
  '#title' => '', // <-- Can leave title blank.
  '#prefix' => '
      <td>
       <!-- Second element is on the same row as the first -->
    ',
  '#suffix' => '</td></tr>
    </table>
    ', // Don't forget to close the table rows, and finally the table.
);

As I said it's not a pretty solution but it gets the job done. You can apply it in a form_alter hook.

1
  • This is pretty clever!! Jan 26, 2017 at 7:21
1

I personally used Matrix field to achieve something similar but I needed to use the multi value settings module too which is still buggy and poorly maintained.

Matrix field: https://www.drupal.org/project/matrix

Multivalve settings: https://www.drupal.org/project/multivalue_settings

This is what my form looks like:

enter image description here

0

One method to achieve this is with a lot of css work.

Conceptually, each row would be a Field Collection (https://drupal.org/project/field_collection) of 4 fields, which would give you the ability to Add More as needed. If the person's Father has a lot of dependents, this 'table' could get very big.

For achieving the table appearance, I would recommend the illusion of a table. Create a Markup field with the table header (https://drupal.org/project/markup), hide the Field Collection labels with css, make everything display: inline-block; with solid 1px borders ... etc. You should then have a content type form with a table that can grow as needed. A save button for an incomplete form used to mean Required For Publishing (https://drupal.org/project/required_for_pub) but I have not had to find the Drupal 7 equivalent yet.

I doubt that you can nest field collections, so Age, Description, and Gender will need to be moved out to the Field Group.

Making the Description Requirement depend on the fields inside the field collection is not easy with php and drupal, so javascript would be the better choice for that.

0

Try this module, https://drupal.org/project/tablefield. Once you add this field in your content type, add number of rows and columns required in field settings. Look for default value settings for the field and add father, mother, spouse in it. Hope this helps ....

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.