Telephone number in different fields

I need the phone number in different fields.
 
Ex.
TEL. (787)730-2303
1. Field 1 - Area Code (787)
2. Field 2 - Prefix (730)
3. Field Three - Subscriber (2303)

I did it in separate fields but remain far apart. Is there any way to do this or need CSS to reduce margins.

If CSS can explain how to apply to the specific fields of the phone.

Adding this code to your form should adjust the phone number fields properly:

#id_16, #id_17, #id_18, #id_19, #id_21, #id_22, #id_23 {
    Padding-left : 10px !important;
    Padding-right : 10px !important;
}

#id_19 {
    margin-right : 200px;
}

#id_21 {
    margin-left : 96px;
}

I should line up both sets as well.  Here is my test form with the code added:

https://form.jotform.com/61825655556970

You can clone it to your account if you would like:

http://www.jotform.com/help/42-How-to-Clone-an-Existing-Form-from-a-URL

Perfect, Thank you David!

Very welcome!  If there is anything else we  can assist you with, let us know and we will be happy to help.