Grid like input in form

Hi,
Is it possible to create the following form using the fabrik?
Clicking on 'Add Another Qualification' adds another row in this grid.

upload_2018-1-26_22-52-37.png

My other question is - is it possible to build a single field from two drop downs like below

upload_2018-1-26_22-54-48.png
While opting for 2 column layout for a group, is it possible to choose fields that goes in columns 1st and 2nd?

I am trying to build a form like this http://heritage.connect4m.com/UserScreens/RegistrationFormHeritageNew.aspx

-Nikhil
 
1. Is this a repeat group? Because if not then it probably should be. (And it actually probably makes sense to have a global Add button / link for a repeat group rather than one per row.)

2. Yes - you can build a field from two dropdown's - but only by using the calc element to achieve it.

3. 2 column layout (in group) visible fields are shown grouped in pairs by order of elements in the group. If you want to start a new column 1 then you need to start a new group.
 
Thanks.
Right now the first group is appearing as below for me.

upload_2018-1-26_23-44-15.png
I would like to have first name, middle name, last name, email in first column and rest in second column.
So in this case I should create two groups. But then can i display two groups side by side in a single page?

Also could you please let me know that how can I use the calc field to achieve two drop downs for a single element. How will the fabrik build UI for this? I am assuming I will define the 'Total Experience' as element. But then how will it render two drop downs?

upload_2018-1-26_23-46-48.png
-Nikhil
 
I would like to have first name, middle name, last name, email in first column and rest in second column.
So in this case I should create two groups. But then can i display two groups side by side in a single page?
You don't need 2 groups here.
You only need to reorder your elements:
in the element list filter for your form and your group,
'activate' the sort column by clicking the header
upload_2018-1-26_19-51-37.png
the 3 dots will become black and you can drag/drop your elements
 

Attachments

  • upload_2018-1-26_19-51-16.png
    upload_2018-1-26_19-51-16.png
    15.6 KB · Views: 23
Specifically the sequence you need is:

First Name
Date of Birth
Middle Name
Gender
Surname
Nationality
Email
Marital Status
Mobile
Number of Children

However, the tab order will be as above and not down one column and then down the second column.
 
Thanks, that seemed to have worked. I have few more questions.
1. After doing the ordering, the email and number-of-children fields look out of place. As per the ordering, email should appear first and then number-of-children
upload_2018-1-27_0-37-27.png
Ordering of elements are as below.
upload_2018-1-27_0-39-4.png

2. My second question is - What would be the best option to provide a label for two columns. I want to provide 'Previous Employer 1' heading in first columns and 'Previous Employer 2' heading in second column.

upload_2018-1-27_0-46-5.png

3. In the Repeatable group, can I pre-populate the first column in first 4 rows like below? I want to display the first 4 rows with the first column pre-filled and read-only. User should be able to add additional rows.

upload_2018-1-27_0-44-53.png
 

Attachments

  • upload_2018-1-27_0-40-24.png
    upload_2018-1-27_0-40-24.png
    27.6 KB · Views: 23
  • upload_2018-1-27_0-41-33.png
    upload_2018-1-27_0-41-33.png
    35.7 KB · Views: 26
Hi,

By doing the some styling, I was able to achieve to finish off a lot of items. But I still have the following questions. Any pointers will be of great help.
My form is online and is available at http://dbpasn.com/index.php/contact-us/join-us.

- Why the elements in my group are not positioned properly in columns. Why is 'email' element at the right column and then 'number-of-children' element in next row at left column.

upload_2018-1-28_22-53-13.png

- Same with the below group. I have created a 'hidden' element so that I can push the next element 'Exact period after which you can join if selected' to the left column. I indent to hide the 'hidden' element using CSS. But then 'Exact period after which you can join if selected' element should appear in the left column first.

upload_2018-1-28_22-52-44.png


- In the following 'Repeatable' group. all the fields are mandatory. What should I do so that it displays an asterisk at the column headers.

upload_2018-1-28_22-52-17.png
 

Attachments

  • upload_2018-1-28_22-47-6.png
    upload_2018-1-28_22-47-6.png
    8.2 KB · Views: 30
We are in need of some funding.
More details.

Thank you.

Members online

Back
Top