how i can build quick field like phone number merging two text fileds

I need two text fields combined in the above manner and I have to change the lengths of the text fields as per my requirement.

To solve that issue quickly, you can add the phone number field no your form and you can change the labels and sub labels as you see below:

You can also change the width of your text field by adding the CSS code below easily from the designer.

#input_25_phone {

    width : 200px !important;

}

#input_25_area {

    width : 200px !important;

}

If you have any question or issues, please do not hesitate contacting us. We will be glad to assist you.

Can you please explain me how to restrict the filed string lengths for eg. say my phone number should have exactly 10 charecters and my country code should be min of 1 digit and max of 3 digits in a  filed like above.

To set a max of allowed characters , you need to use a text-box field, and set the max size. Looks like you have already done it: