What is JotForm?
JotForm is a free online form builder which helps you create online forms without writing a single line of code. No sign-up required.
At JotForm, we want to make sure that you’re getting the online form builder help that you need. Our friendly customer support team is available 24/7.
We believe that if one user has a question, there could be more users who may have the same question. This is why many of our support forum threads are public and available to be searched and viewed. If you’d like help immediately, feel free to search for a similar question, or submit your question or concern.
Is there an option to change the design of text box field?Asked by michael751 on December 15, 2014 at 01:51 PM
I have 2 fields : Course name and date , that I'm going to pre populated those fields with values from the URL.
and I want to change the design to be unlike the other fields.
first important design change is to remove the frame of the field , I need it to be displayed as one row as much as I can.
for example: Course name : Advanced Eden operation.
and this change should be only for those 2 fields.
Is it possible to do it in your wizard?
Thank you very much.
text box form designer custom styles
To change the specific CSS of a single field, open the form designer, select "CSS" in the top right:
Then double click the field you wish to specifically change. This will show you the options for that field and allow you to change only the CSS associated with that field. You can removed the boarders in the same manner by selecting the boarder options.
Let us know if you have any further questions and we will be happy to help.
Looks good , just can you pls explain , how did you get to this screen?
Thanks on your quick reply!
The Form Designer can be accessed from a Form Style tab.
Also, there is a link to related video guides.
I dont know why , but , I've just tried to change the border of the 2 first fields, but all the design of the form was changed ,
how it was changed ?
Is there an option to reset the design changes?
I've spent a lot of time with try to remove the border of the 2 first fields:
Selected scheduled time:
If you can help me with this it will be great!
( refer to this form : http://www.jotform.com//?formID=43492238260959 )
I definitely can see design issue with your jotform http://www.jotformpro.com/form/43492238260959
either the form width is too narrow or you need to make the width of fields/elements on the form to be less than the form width to have a better looking form.
You can fix that by increasing the cover width using the designer
from what I can see on the form, you seems to have removed already the border of the 2 mentioned fields.
Please let us know if there are still issue.
thank you very much on your detailed answer ,
I am just wondered if the design issue that I can see in the site , is related to this setting , or , it something that related to the settings in the page in the site:
Pls let me know.
The forms fields seems to be responsive and the width changes to 100% in embedded form.
The issue seems to be related to the custom css injected in your form. I did come changes to your custom css code. Please click on the following URL to get the updated css code and replace the existing css code which is injected in your form: http://pastie.org/9793569 The following guide should help you on how to inject css code in form: http://www.jotform.com/help/117-How-to-Inject-Custom-CSS-Codes
I believe the width of your form is still narrow as pointed out by my colleague above. I would suggest you to share the web page URL where you have embedded your form, we will take a look and help you solve it.
We will wait for your response.
I did replace the css code, with the code that you’ve gave me , but unfortunately it’s still looks incorrect.
I cannot share with you because as long as it’s not complete , I cannot upload it to production , and it’s exist only in the internal dev env.
It’s very strange . because when I click on ‘Preview’ – the form is displayed correctly:
But in the site , it’s displayed very bad:
We are with delay with upload it to the site , your help is very urgent.
Thanks in advance.
Please share the web page URL where you have embedded your form and we will take a look.
We will wait for your response.