-
fortknoxcapitalAsked on April 16, 2024 at 2:16 PM
Thank you. Need advise on correcting this form as well.
https://www.loom.com/share/48a06f5097d64283b41f26652e6398ea?sid=ea82afec-1e55-47ba-b672-c8afee15c396
-
Sidharth JotForm SupportReplied 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.
-
fortknoxcapitalReplied on April 16, 2024 at 2:26 PM
Okay thank you I have completed and added that short text field.
-
Sidharth JotForm SupportReplied 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:
- In Form Builder, click on the Paint Roller icon at the top right corner.
- Click on the Styles tab.
- 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;
}
That's it. Check out the screenshot below to see the result:
Give it a try, and let me know if there's anything else I can help you with.
-
fortknoxcapitalReplied on April 16, 2024 at 3:05 PM
Thanks but its not giving the same result.
-
Joseph Christian JotForm SupportReplied 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:
- In Form Builder, click on the Paint Roller icon in the top right corner.
- Click on the Styles tab.
- Scroll down to the Inject Custom CSS section, and remove the CSS code.
- After removing, paste the CSS code again at the very bottom.
Check out the screencast below to see the result:
Give it a try and let us know how it goes.
-
fortknoxcapitalReplied on April 16, 2024 at 4:21 PM
Thank you that worked. Not sure why that corrected the issue but it worked.