How to create an aligned phone number field with Text Boxes?

  • Profile Image
    Asked on September 29, 2016 at 02:35 PM
    Once last question, I had to add the title “Phone Number” in a Text box because adding this as a title above the Country code vertically misaligns Area code and Phone number boxes as they don’t need a title, is it possible to shrink the gap as shown below in the Text box to be closer to the 3 boxes? I guess this is manipulating how the Text box is aligned. Here is my test page
  • Profile Image
    Answered on September 29, 2016 at 02:45 PM

    First I would like to let you know that you may also show the three fields using the Phone Number field, simply add the Phone Number field to your form, open the field properties and turn the option to show the Country Code on. 

    Now, if you want to use the three text boxes, I would suggest you to add the labels (field's title) to the three fields, Phone Number, Area and Country Code then inject this code: 

    label#label_36, label#label_37 {

        opacity: 0;


    This way you will have the fields and title closer and will have them aligned: 

    Here is the link to my cloned form of yours, please take a look and feel free to clone it 

  • Profile Image
    Answered on September 30, 2016 at 03:46 PM
    Hi Kevin_G,

    This works great! Many thanks for the clone as well.

    Thanks again