How to reduce width of the Configurable List widget, which gets wider the more fields are being added

the more fields you define, the bigger width of the widget. If you don't want it to be too wide, try to narrow its elements with "Custom CSS" Tab

How I can do? for adjust fields suitable for page

I believe you are referring to the Configurable List widget, which you are using on the linked form.

Yes, the more individual fields you add to the Configurable List widget, the more horizontal space this widget will need in order to display all the questions. This is because the widget is intended to have a variable number of rows users can insert/fill out, so it cannot have a huge number of individual fields in each row.

We can use some custom CSS to narrow down your fields inside the Configurable List widget, or to force its fields display in multiple rows, but the Configurable List widget should preferably not be used with a very large number of individual questions.

In the Custom CSS of each widget, we will have to set the label for each of the form fields. Here is the custom CSS you can use on your first configurable list widget of your form:

.checkbox, .radio {
margin: 3px 0;
min-width: 70px;
}

th { display: none; }
td {
    float: left;
    margin: 0;
    display: block;
    min-height: 50px;
    box-sizing: border-box;
    padding-right: 2%
}
input[type="text"], select, .stepper-wrap input.stepper { width: 100%; }
span select { width: 30%; }

td:before { display:block; }
td.col1:before { content: "กิจกรรม"; }
td.col2:before { content: "เป้าหมาย"; }
td.col3:before { content: "ผลลัพธ์"; }
td.col4:before { content: "พท.(กว้าง) เมตร"; }
td.col5:before { content: "พท.(ยาว) เมตร"; }
td.col6:before { content: "พท.(ลึก) เมตร"; }
td.col7:before { content: "พท.ปริมาณพท.(ตารางเมตร)"; }
td.col8:before { content: "ระยะทาง(เมตร)"; }
td.col9:before { content: "ระยะทาง(กิโลเมตร)"; }
td.col10:before { content: "ระยะทาง (ตารางกิโลเมตร)"; }
td.col11:before { content: "อำเภอ"; }
td.col12:before { content: "ตำบล"; }
td.col13:before { content: "หมู่บ้าน"; }
td.col14:before { content: "วันดำเนินการ"; }
td.col15:before { content: "ผู้เข้าร่วมกิจกรรม"; }
td.col16:before { content: "จำนวนวันทำงาน"; }
td.col17:before { content: "ประชาชนได้รับประโยชน์"; }
td.col18:before { content: "งบประมาณที่เบิกจ่าย"; }
td.col19:before { content: "หน่วยงานที่ดำเนินงาน"; }
td.col20:before { content: "หมายเหตุ"; }
td.col1 { width: 33%; }
td.col2 { width: 33%; }
td.col3 { width: 33%; }
td.col4 { width: 33%; clear: left; }
td.col5 { width: 33%; }
td.col6 { width: 33%; }
td.col7 { width: 33%; clear: left; }
td.col8 { width: 33%; }
td.col9 { width: 33%; }
td.col10 { width: 33%; clear: left; }
td.col11 { width: 33%; }
td.col12 { width: 33%; }
td.col13 { width: 33%; clear: left; }
td.col14 { width: 33%; }
td.col15 { width: 33%; }
td.col16 { width: 33%; clear: left; }
td.col17 { width: 33%; }
td.col18 { width: 33%; }
td.col19 { width: 33%; clear: left; }
td.col20 { width: 33%; }

Adding it to your first Configurable List widget would make it appear like this:

To apply the CSS code to your Configurable List widget, simply click on its wand-shaped icon. Once its wizard opens, click on the Custom CSS tab, and paste the code there:

You can apply the same kind of custom CSS to your other Configurable List widgets, just please make sure to adjust the "content" part of each field with what you want to display as that fields label. This means that for other Configurable List widgets, you will need to adjust the labels marked in red on the above provided CSS.

Please try it out and let us know should you need any further assistance.

thank your very much for your kindness 😍😘😘
2016-07-04 14:49 GMT+07:00 JotForm :
...

You are most welcome, and if there is anything else we can assist you with regarding your forms, please don't hesitate opening another support thread anytime. We'll be happy to help.