Change phone number form field to short text.

  • fortknoxcapital
    Asked on April 16, 2024 at 2:16 PM
  • Sidharth JotForm Support
    Replied on April 16, 2024 at 2:20 PM

    Hi David,

    Thanks for reaching out to Jotform Support. It is not possible to change the phone element to a short text element. Upon reviewing your form, I noticed that several custom CSS codes have been added to customize the form elements. This is the reason why when you add a new element, it is added at the bottom.

    You should first add the short text element to the form. After that, we can assist you with the custom CSS code to place the form element in the desired location, replacing the phone number.

    Once we hear back from you, we'll be able to help you with this.

  • fortknoxcapital
    Replied on April 16, 2024 at 2:26 PM

    Okay thank you I have completed and added that short text field.

  • Sidharth JotForm Support
    Replied on April 16, 2024 at 2:55 PM

    Hi David,

    Thanks for getting back to us. You can customize it with the help of CSS code. Let me show you how:

    1. In Form Builder, click on the Paint Roller icon at the top right corner.
    2. Click on the Styles tab.
    3. Scroll down to the Inject Custom CSS section, and paste the CSS code given below:
    li#id_4 {
      display: none;
    }
    li#id_18 {
      width: 100%;
    }
    .form-section.page-section li#id_18 {
      grid-area : phone;
    }

    Change phone number form field to short text Screenshot 30

    That's it. Check out the screenshot below to see the result:

    Change phone number form field to short text Screenshot 41

    Give it a try, and let me know if there's anything else I can help you with.

  • fortknoxcapital
    Replied on April 16, 2024 at 3:05 PM

    Thanks but its not giving the same result.


    Change phone number form field to short text Screenshot 20

  • Joseph Christian JotForm Support
    Replied on April 16, 2024 at 3:56 PM

    Hi David,

    Thanks for getting back to us. When I looked at your form, I saw that the CSS code wasn't configured correctly. Can you try to remove the code and paste it again? It's really easy, here's how:

    1. In Form Builder, click on the Paint Roller icon in the top right corner.
    2. Click on the Styles tab.
    3. Scroll down to the Inject Custom CSS section, and remove the CSS code.
    4. After removing, paste the CSS code again at the very bottom.

    Change phone number form field to short text Screenshot 30 Check out the screencast below to see the result:

    Change phone number form field to short text Screenshot 41 Give it a try and let us know how it goes.

  • fortknoxcapital
    Replied on April 16, 2024 at 4:21 PM

    Thank you that worked. Not sure why that corrected the issue but it worked.

 
Your Answer