How to design a dynamic form with fields that are taken from the database?

Question

My team is working on this particular Order Request project that would require a design to support the application form. The fields would be generated based on the database. Here is a static mock up of the application form:

However, in the actual product we'd like to make it a dynamic form meaning that each section will depend on the value provided by the user from the previous section. Say, if you live in another province, you might be asked for something else after Location Information rather than Contact information.

The problem here is that there might be changes to the database and that might screw up the design of how the form is presented to the user. The Contact name might get longer so the user will need a longer text field to enter so where would DSL Number field be placed?

We have considered a number of approaches and one of them is that we'd define fields into groups and each group would has its only partial view. When the application is being filled, the next section is appended to the form based on the value provided by the user.

I'm wondering if it's the right approach for this problem. What's the common approach that can be taken to design this dynamic field. I understand that this problem can be hard to understand and I'm trying my best to explain. But if there's anything unclear, please feel free to ask.

Scenario

A user wants to place an order request and the first thing he's required to do is select the service he wants, which he will be presented with this section:

After making the selection of service from the drop down, the user is presented with the Location Information section to fill out. This Location Information is generated from the database based on which service the user selected. If the user selected another service, he would get another section instead of Location Information. The user completes the Location Information and completes the form.

Answer 1

Setting a max length for the fields would be advisable rather than changing the size depending upon the longest entry in a database. For instance, the "Contact name" field can be set to a maximum size of 200 characters. This would help stabilize the alignment of the form that you set. However, if that is not possible, you can use the, "one field per row" layout.

Option 1 - Dynamically increase the text box height based on the input and keep the width constant.

Option 2 - Hide text if it is larger than the text box (This approach would be preferred when "input being larger than the predicted size" is a rare case)

Varying lengths of the fields doesn't hamper the layout here.