Aside from the built-in form designer, you can also customize your forms using CSS in the Form Builder. This guide contains a few examples of CSS codes that you can try or use on your forms. For applying CSS to your form, see Injecting Custom CSS Codes.
Adding a Background Image to the Page
The following CSS code allows you to add a custom background image for your form.
.supernova {
background-image: url('{image_url}');
background-repeat: no-repeat;
background-position: center top;
background-attachment: fixed;
background-size: cover;
}
body {
background: none;
}Replace {image_url} with your background image’s URL.
Note
Use a secure HTTPS address for the image URL to avoid mixed content blocking.
Making the Page Background Transparent
Useful on embedded forms, you can use the following code if you need your form to use your web page’s background.
.supernova, body {
background: none;
}Making the Form Background Transparent
The following code removes your form’s background and shadow making it flat and transparent.
.form-all {
background: none !important;
box-shadow: none;
}Removing the Spacing Above the Form
Useful on embedded forms, the following code removes the extra space above your form.
body, .form-all {
margin-top: 0;
}Changing the Heading Background Color
Use the following code to change the background color of all the Heading elements on your form.
.form-header-group, [data-type="control_head"] {
background-color: #c9daf8;
}Protip
For color-related properties, you can use this color picker to generate your color’s hex value (e.g., #a1b2c3).
Changing the Subheading Color
The following code changes the text color of all your Heading elements’ subheaders.
.form-subHeader {
color: #00b000 !important;
}Changing All the Sub Label Color
Use the following CSS code to change the color of all the sub-labels on your form.
.form-sub-label {
color: #ffb21d;
}Changing the Highlight Effect Color
You can use the following code to change the background highlight on input fields.
.form-line-active {
background: #ccffcc;
}Changing the Form Required Star Color
Red by default, the code below changes the fields’ “required” indicator.
.form-required {
color: cyan !important;
}Aligning the Form to the Left
Useful on embedded forms, you can use the following code to move your form to the left.
.form-all {
margin: 0;
}If you need help with customizing your form, feel free to contact Jotform Support.
Send Comment:
283 Comments:
Thank you very much for the reply I am designing an application on jetform to know the student's result and reached the entry of the student's ID I need to know the data that the student will reach his result through it Where will I add it Is it with a conditional equation IF or code or access The method I don't know And is entering student data done by uploading the Excel sheet or manual entry
Is there a way to change the 'Please Select' on drop down menus to different wording?
¿Qué código debo utilizar para cambiar el estilo de la fuente del título del formulario?
How do I have the back, save for later and submit buttons all on the one line?
How do I change the color of the arrow icon on the section collapse
How do I change the color of the "Please Select" text for a dropdown property.
how can i edit Factor B
How to add a dialog box to each checkbox in a multiple choice question
How can I customize the "OUTPUT" of the form? I have a PDF as the background and I need to change the font size and add text wrapping to the OUTPUT so when you submit and download the PDF is looks good. Can anyone help me???
Removing the shadow between the form and the background
.form-section.page-section {
border: none !important;
box-shadow: none !important;
}
Removing the divider below the header and above the submit button
.form-buttons-wrapper {
border-top: 0px;
}
.header-large {
border-color: #3b3e5200;
}
How do I add another box to my form? I need another box for shirt size. Is there a way to just do a drop down? XS S M L XL
I watched the video on how to reduce the line spacing between field and she mentions grabbing it from an example is CSS.
I cannot find that on here.
Id like to reduce the spacing between fields to make a shorter form.
How do I unhide a widget?
How can I align my multiple choice options Top to Bottom instead of Left to Right?
How can I wrap text in the Matrix Dynamique table fields please?
How can I add spaces to my sublabels so it's not showing as one big paragraph?
When I embed my form on website, the bottom of the rounded background gets clipped off. Is this something I can fix with CSS?
How can I add multiple pictures for user to access and choose any
How can I hide the prices for just a select few items? I see the CSS to hide *all* prices but I don't want that I want to be able to tell it which ones to hide. Thanks!
How to change the "Placeholder" color?
Hello, what do I target to get rid of the line divider between the form and the button?
How do I target the font size within a terms and conditions widget which is currently 16px when the rest of my form is 15px. I need it to be smaller (15px or lower) to match.
Have tried endless combinations of CSS selectors without any success...help! 😃
i am aunabeto upload logo of my company. when i preview it isnt visible.
Hi,
Is it possible to define a new class of questions so that I can, for example, create many rows of three numerical entries per row?
I've seen this answer: <a target='_blank' href="https://www.jotform.com/answers/4010714-how-to-align-3-fields-in-a-row" >https://www.jotform.com/answers/4010714-how-to-align-3-fields-in-a-row</a>
But it only accesses questions by ID, which won't work well if I want to have many such rows.
Thanks!
What is the css selector for the old default theme?
I am inserting a qr code in my form email for attendees to use for check in at our event. The problem that I have ran into is some of attendees are using the dark mode on their emails on their phones. Can I put a border around the qr code so it can be read by the vendor we are using to keep track of check in and check out.
Is there a way to use CSS to make your buttons different colors? I would like a blue button with gold on hover for my Submit and my Print Button to be black and go to white on hover.
I would like answers in the text box to be uppercase only, what is the CSS for this?
is there a way to use css to control how the products are sized depending on the device used? my current form in phone view shows huge pictures of the products.
Is it possible to change the subheader text size?
How can i change Header Background Color?
How do I align Form to the right?
I am changing form required star color
How can I do this?
Hi! Is it possible to have a radio selection label be the response instead of the radio button.
For example I am filling in a PDF, I have a single selection radio for the following options
- Fellowship
- License
- Ordination
I would like it to actually print the selection on the pdf instead of a button.
I tried a drop down but they don't toggle for single selection
Hi there, I've got the CSS for removing borders from textbox but it's not disappearing from my Message box.
Hi there! I'm trying to find a way to format multiple lines of text on the Bootstrap On/Off widget. I want to show a title and several lines of description with the toggle button at the bottom. It's important that all the text be included here and not in a separate long text element. Example (I'd also like to bold everything in asterisks):
*Apple Pies*
*Offering organization*: Ellen's Pie Company
*Summary*: A delicious apple pie to make your day
*Contact information*:
e****@a*******s.com
i***@a*******s.com
[toggle button]
Thanks in advance for your help!
can we set this globally so that every form looks like it's from the same org? we are doing this now with clones but is it easier to do this so that when we have our other departments create forms that look like our school?
How do I remove the shadow around the form? I'd like it to be flat.
Hello
How can i introduce a confirmation/consentement box to my form? with Css code or other way?
how to create a comment box?
Hi. I've loaded my form via IFrame on prestashop, but i've encountered a few nasty problems. First of all, the form is not mobile responsive: when displayed on mobile, the logo appears to be kind of stretched. Secondly, i've integrated logical conditions in my form, so it varies in height depending on what the user selects. Is there a way to make the form able to adapt to the correct height automatically? Thanks in advance.
Hi. I'm trying to understand the colours, borders and grid numbers for documents loaded in to the paragraph field. Some of the formatting in the inserted document is lost when (Wordhtml) transfers the code in to the source code feature.
Is there a chart of numbers for colours, borders and grids that I can refer to so that I can complete the formatting?
How do I add an image to a question
What is the CSS code for aligning my Product List to the left? When I download the source code it makes all the products aligned to the center.
What is the CSS code to make the number in the "quantity" box darker? I found this on your support page, but it didn't work.
#input_7_quantity_1000_0 {color: black !important;}
how to change and apply my font?
I have a spreadsheet widget in which the last column and the last row calculate the sums of previous columns/rows. I would like to generate an error message for the user if the totals do not match the totals calculated in another field within the same form. Do you have sample CSS codes for this process?
Hi there,
I am trying to create a confirmation email but some of the data is not showing up correctly. I have a "date" option where our members will fill out the date in which they want us to get a task done. We are using the emails as a receipt for them so that they can look back on what they submitted. However in the confirmation email where it should be the date it says "Array"
hi
I need to Align the form to the right
How can I make textbox areas without the outline?
How can I use a different font? I want to use a font that is not part of the list given.
i need to display 3 text box in one row
Please guide us
I need help adding an email to submit the form to.
Hello,
Since I write in Hebrew (Right to Left), I wonder if there is an option of aligning all fields/texts to right ?
How to create a table depending of a introduced value. For example I want to create a table of 5 clumns and variable rows, the number of rows will be define from a field.
Hi, I am wondering if it's possible to change the text box width in the configurable list widget. Since I have too many other boxes, the last box is cut off slightly from the page.
Or
I want the:
.custom-field-frame.custom-field-frame-rendered.frame-rendered.frame-xd-ready
to be the same width as
.form-input-wide div
So that none of the text is cut off when I've made the form wider.
Please can you send me more detail on how to create Two Column Layout on Shrunken Fields? I've applied the formula above to both fields - email and phone number, but they are not appearing side by side? Appreciate your help. Thanks.
Buen día! quiero ponerle color al fondo de las casillas desplegables, estoy usando el widget "auto completar" pero al desplegar la lista esta con fondo transparente y se transpone al campo que aparece abajo.
gracias!
Buenas tardes como puedo alinear unas casillas de verificacion
en horizontal o en varias columnas
Gracias por su ayuda y trabajo.
I would like to Link make my Download / Submit button to Google Drive
I would like to change the size of the iframe embedded.
My calendar isn't stretching across the widget and only the url is allowed.
I would like to change the size of the image window. Right now, you click on the preview image and it opens an enormous window with my product image centered. I would like that product image window to be the size of the image.
i’ve change the font. but when i want to fill up form, the font goes back to normal.
Alinhar o formulário à direita
How do I make the form smaller?
When my form is displayed on my website via computer/laptop, there is a lot of extra space at the bottom of the page below my form.. How do I remove the extra space..
I would like the font of the last name and first name to be bigger
I'd like to hide the address information on the credit card form since it isn't needed to process the payment.
Some of the areas in my form, like the phone number and the reason for visit, you can't see when you are typing in the information. It looks like nothing is able to be typed in that area. But when I submit the form, I can see that there is text typed there. How do I fix this?
I need a custom CSS to size the page when it opens to the form width so it does not open in a full page...
Hi
I have an Input Table in which I wish to control the width of the columns individually to avoid the user having scroll the table to the right to see the last field...
Hello, I am in need of being able to customize the colors on the multiselect grid widget. Please provide the CSS code needed in order to do so. I only know who to change the color by changing the name of the font color to the HEX code I'd want. Thank you in advance.
Hi, I'd like to add a button to my form which opens a separate URL in a separate browser window. I'd like to customize the buttom label. This is so a user can click the button to open a web page for recommendations before answering the next set of questions on my form. Thanks.
I have 11 checkboxes in one column layout. When I attempt to shrink the column, one of the checkboxes is immediately moved out of that column to a second column. I need to prevent that from happening so I can shrink that column in order to add a second column beside it with different checkboxes. Hope that makes sense. All of these checkboxes are mapped to a pdf document.
The form I have created, when inputting information is WHITE text on a WHITE background. I understand I can Inject Customer CSS code to change but what code???? Please help. Ready to send apart from this... Thanks.
Hi!... I'm trying to put BOLD in an specific label, how can I do it?... I don't want all the labels to appear bold, I just need an specific word of a label to appear in bold. My text is
"1. Payment for class impartation or payment for group accompaniment"
I want the number 1 to appear in bold and if possible in other color too. The label ID is #input_483
Is there a way I can do this?... Thank you!
I have added Square Payment to my order form. It shows the total amount of the calculated order in the window with USD at the far right side. I would like to add a dollar sign in front of the number that get calculated in there, along with a comma for any amount over $1,000 and a decimal point before any change. Is there a way to edit the css code? (ps I am a total newb when it comes to coding)
I would like to be able to hide the Producr Desciption box on my form. Is this possible?
Hello,on the free version, can we do this?There is no textarea to change the style...
When I create the form and preview as it would appear on a phone, some of the fields are missing or the format is too far to the right to be read. Can you help me adjust this?
I am looking to figure out in the CC form how to add in a company name and email address as a required field for a customer to fill out
Is there a way to add custom colors to the Rich Text Editor? I would like to allow our form builders to use our brand red rather than the generic red allowed for text color OR for fill color.
How can you make the input fields and text of the input fields larger?
I've been using the Form Calculation Widget (which is fantastic!) and I'd love to be able to keep the field visible while preventing the user from adjusting the numbers in that field.
For instance:
Item Price (filled in by user)
Quantity (filled in by user)
Subtotal (calculated from the users inputs above - BUT they can also type in a new number here)
Here's a link to my form
Thanks!
and also, i don't want a price showing on my products as i have different prices for different people. Can i hide that or at least make it not say free
can i change the background of my product?
When I select a font, it does not stay when I hit publish?
May I please have the css code to edit subheader font size?
Thank you.
Bill
On my form I set up a table. The table looks fine but when I preview it you see 2 narrow fields below it. I don't know what they are but I would like to get rid of them.
Thanks in advance,
Laura
I'd like to change the color of the section collapse header background. What is the code?
Hello, initially the form looked perfect but I have had a few dummy runs with friends and the feedback is mainly positive but on the mobile questionnaire some of the words have become misaligned, ie) drugs is now drug and the s is on the following line. Any advice would be fab. Also can you tell if the signature box is working? 1 of my friends had a problem with it. Thanks, look forward to your help. Best wishes, Carly.
Bom dia!
Na opção de layout cartão eu não consigo alterar a imagem de agredeciemento.
Como posso alterar as dimensões da imagem?
Hi,
I am using 'spreadsheet to form' but can't find a way to increase the textbox height to 42px.
It is not an option in the Advanced Designer.
Can anyone tell me the CSS code to inject? Or another way to do it?
Thanks for any help. :-)
On my jot form, I am trying to put my salon name in the body context on my covid-19 form. How do I do that?
Thank you,
Dawn
I would like to add a sub label to a widget please.
I'm not sure if this is the right place to put this question, but it seems it might be. I use collapsible sections a lot and have often wondered if there is a way to, I'm guessing using CSS, to create nested collapsible sections? I'm thinking so that they'd look something like the images here:
Further, is there a way to assign specific colors by section and/or level?
Thanks!
Please help i want my form to use a font which is not listed under the font list.
It is called Raleway
what code do i need to use to change the whole form to do this.
Regards
I changed the form's CCS code, but when previewing the form it does not change the style I coded for. Any help would be appreciated!
Thanks!
Hi, how would I add a block to the address element, for example if I wanted to add a block to ask about what parish they are located in. There seems to be no way to add it using the preset options so how could I code this in using CSS?
Thanks
Hello, I need to change the colour of the background of the column labels. Can you please advise?
Thanks!
Sugerencias para mejorar y alguna pregunta:
1º Cómo se puede cambiar fuente y tamaño de las cajas de textos donde escribe el cliente y no me refiero a estilo de las etiquetas.
2º Al duplicar cualquier campo etc. debería ponerse también su tamaño igual no dibujarlo en formulario final, con un click debiera ser suficiente.
3º Añadir páginas sueltas de formularios propios en otros sin tener que clonar todo o volver a poner campos uno a uno.
4º Poder seleccionar en panel izquierdo (diseño) para duplicar campos en grupos grandes no individualmente.
5º Ampliar los comandos de condiciones lógicas para adaptarlos a las necesidades.
Gracias
which CSS to add to the inventory widget to add options to the product?
Now there's only one quantity selection field. I want to add a text description of the product. Sometimes I want to add an option to the product.
How To change Name in one Fields?
how to validate if certain fields are filled and if some are not filled, flag.
How can I make my logo visible after creation.
Hi i want to change the size of the input fields name, email, phone number they don't look great and also they are too small hope you can help. Thank you
Hello,
How can I change the language of the Appointments Element to Portuguese (Brazil)?
Best regards
I am using the widget Narrative Fields and want to make its template text the same as my form layout which is Arial 14. What is the custom CSS Code to do this?
Hi I would like to make some field on my form, to be defaulted to an X in red (to show where the customer has to sign on a particular page). I cannot find how to do so on CSS for my form.
the field I am triyng to make it appear in a printed X red is #input_736
My form is
can you help me with this?
Best Regards
How can i customize my submit button?
Thanks
How can I change a number format to a currency format such as $###.##? I've tried the text and the number elements with no luck.
I've changed the auto response email and saved it, but it is still sending out the old one. Is there a reason for this or an option I should choose?
Hi, I need the code to create a sublabel for thsi radio button question: Are you the Onsite Event Host?
Here's the jotform:
Can I make "Label Width" different on different questions or is it all or nothing?
Can I add a picture of my product?
I am looking to be able to make numbers (dollar amounts) show the dollar sign and also the comma in the value. Thank you.
Liebe Entwickler,
Ist es möglich, die zuvor eingegebenen Formulardaten in einer Datenbank zu speichern um sie dann in ein anderes Formular einzutragen?
Danke für die tolle app, weiter so!
Beste Grüße aus Deutschland
Harald Metzler
Hello! So I'm using the Scale Rating Module on my form.
I want my clients to rate us from 1-11.
I want to put right on the side of the number "11" a smiley face.
The CSS ID for number "11" is "#input_30_11"
So... Before trying to put a smiley face I want to try other more simple stuff, like putting text-decoration declarations... You know, just for the sake of testing... So I went to my CSS section on the Form Designer Section and put some code...
And it's not working, I'm not seeing any changes... Any ideas on how could I make this happen?
Here is the code...
#input_30_11 {
text-decoration: line-through;
}
I'll be waiting for your response,
Thanks!
How can I change the color of "clear" to white under the signature-box of the signature widget? What is the code for this?
Hi! Anyway to change to word "Coupon" to "Promo"?
Hello i would like to add a custom css that if a customer selects one section for a service e.g content writing that they in turn need to attach a file for the service picked
I would like to add a "if" function to my form. For example, if the person completing RSVP is "Jack Smith" and I only have 2 RSVPs for the family of Jane Smith, I want the response to the question "How many total attending event" to have a drop down with options limited to 1 or 2. Similarly, if "Jane Doe" has maximum 4 RSVPs, then I want the total attending response to be limited to 1,2,3 or 4 only.
Hi,
I would like to change the font for my main form from black to white. What is the code for white?
Thank you.
Is there a way to use custom CSS in the Date/Time widget that will prevent people from selecting both the current date AND the next day?
I want to increase the length of the text boxes in the Dynamic text box widget. I assume it could be done via custom CSS code. Please explain the process and code for doing this.
Hello.
I've created a table to capture contact info and was hoping to have the option to check email and phone for validity. I notice there is a widget that allows for email checking but I was hoping to add the function to the existing table if possible.
Thanks
I need a widget that can give long text entry with date and can add multiple entries of long txt
So a date field, below which would be a long text window
below a plus button to add another combo of date and long text fields
How do I make the font in my text to be Lato? I've changed all fonts in Lato, put in the code too but text created are not in Lato font.
Can I get some help with a CSS code to split this checklist widget into 2 columns?
<a target='_blank' href="https://www.jotform.com/build/92894955680173" >https://www.jotform.com/build/92894955680173</a>
Hi there,
we would like to have the language choice for our form as a first window to have it more prominent for the user to be choosen.
Is that somehow possible without code? If not, do you have any documentation on such a use case?
Best
I want to remove some bottons on the form
How do I use the CSS to change the number format in a calculated field? At the moment it looks like General formatting in Excel, but I want it to show as a currency field (£)
i need to limit the date of reservation.The date picked must be minimum 3 days before the reservation date
For example. I want to book session on 16 October 2019, so i have to book on before 13 October.
I try to use widget but do not find this function.
Hope you can help me on this
Managed to do some CSS tweaks however any of the Modules, do not fall within the CSS they break the form as you cannot continue or they cover the page etc..
this is the form.
the first issue starts at i believe page 12.
there are multiple parts of the forms that use widgets. including terms and conditions that do not fall within the CSS
How a multiple choice calculation works؟
thanks
How do I change the color of a widget spreadsheet?
Hey there I was wondering is it possible to us html5 , and, css , on jotform
Hi I would like to know how to change the CSS code so I can change the date format to be dd-mm-yyyy as I am in Australia
I have 2 fields with check boxes. I would like them to all be available to check if need be. I don't know how to do this. Can you guide me plz?
Hi
I'm using the following for my radio buttons:
input[type=radio].form-radio...
I also have a multiple choice question that I would like to style the same way, can you please assist?
I uploaded an image and it just repeats down the page. How can I change the height of the image, so that it is only 1 image on the page
How do I change the color of input table itself and the font color in the table?
What is the best technique to combine 2 sections of page breaks into one?
Example:
Back and Next in this css are stacked vertically. Desired outcome is to have them side by side on this one page form in a manner like is on the card forms...
I would like to put a space between the last line of the "Email Validator" statement and the "Confirm Code" field. ( To see the statement you will need to add an email address and press "Verify Email" in the link above.
How can I make my "Take Photo" button display the same way as my "Scan Barcode"? What's the name of my Take Photo button to use in CSS?
Thank you!
What code can I used to put a think border around all input fields, and use the HEX color code to make the border a specific color?
Hi please help me out I want to add audios to the form and get review on them. I found a link but it was for an older version. Please help me out.
Hello there. In an "image choice" question, I need to make buttons bigger (2 per row) and each image to cover the whole button (edge of image falls in button edge). Is there any way to do this? Thanks
Hi, I'm having a hard time enabling teammates to enter advance CSS mode on a form. They get an unauthorized message. How do I give them rights to enter advance CSS edit mode?
Trying to style Yes/No buttons on Card form such that all the Yes Button is green, the no button is read. Can this be done with CSS code?
Hello. How do I keep the line formatting in place? Or indicate I want to start a new line?
On screen it looks fine but when I check the preview all lines have run together and is very hard to read.
Thanks
Lyn
Hello, I am trying to create a table of 6 cells across, and 20 cells down. I would like to columns to entitled:
QUANTITY - UPC# - SIZE - DESCRIPTION - UNIT PRICE - AMOUNT
Is this possible? Basically I am trying to create a form to provide to customers that will give them a quotation on the products that they are purchasing. Also, I would love to have the fields be able to multiply the quantity by the unit price, and return the answer in the amount column. There would then be Sub Total, Taxes, and Total cells at the bottom of the table.
Would love some assistance on this!
thank you,
How do I move the hover text from its default position. In its current position, it is covering my input box. The previous example is no longer available.
How do I make an answer come up in red/ green once selected?
I need the customer to know that something is dangerous or faulty in the form at a quick glance.
I want a list of questions each with a space to sign next to them, e.g.
Topic one - SIGNATURE
Topic two - SIGNATURE
etc
How best to use CSS to make this happen?
Hi,
I need space between the Field-Label and the field itself.
How can I inject this?
How can i, for example, change the options in a drop down list., such as as a time picker, where when someone clicks, it displays 24 different hours,, how would i go about taking off some of those hours?
how can i pull up the EXISTING css code and maybe just take them off manually and repaste?
jrod2036 at yah(you know the last two letters) dot kom
I want to modify my form such that it has 4 text boxes when I enter a number, say 4.
For instance, when I ask how many subjects do you want to take in the first semester?
The student answers 4, there should be 4 text boxes below it.
Please help.
Thank you.
How do I remove create job from below the form?
What is the code to change the outline color of a check box? And since I am at it, how do I change the inside color of a check box?
Thanks for any help!
Love the form!
Is there a code or way to get payment donation tiers (i.e. $5, $20) as buttons.
Hi. To integrate the form with google calendar, for the start time field I must choose datetime. To define the final time, I need a datetime field that in my form only shows time and does not date.
How to hide date and show time?
I would like to have two parts to a question. I want the second part to be of a smaller font, and indented a bit to the right (basically providing additional notes to the question above)
How do we do that?
I would like to alter my previous question "How do I make the sub labels under the questions a different colour? The code supplied only changes the colour of the sub labels under the personal information data." as I have worked out that the sub labels turn grey when I have character limits. Is there a way to keep the sub labels in my colour choice AND have character limits for answers for long text entry?
How do I make the sub labels under the questions a different colour? The code supplied only changes the colour of the sub labels under the personal information data.
Is there a way to remove the borders around a frame url that is a spreadsheet on a Iframe Embed widget?
I have a spreadsheet that I want to show the user on the form I have created and I only want to show the columns and rows.
Hi
I am trying to remove the border round my form?
I have a basic questionnaire form. It looks great on desktop but not on the mobile preview. My logo is cropped at the top and the facebook widget is cropping on mobile.
How can I get these to "fit" on the screen when someone is viewing on their mobile device?
Hi, for single choice answer, how do I make the answer "circle" larger?
Thank you.
How to make a field a required field?? I want to add the asterik and people cant submit the form without filling that field out
It would make things so much easier if the text color selector on the Text Quick Element let us choose a hex color.
Until then, how can I change that color with CSS? I do not see it explained on this page, <a target='_blank' href="https://www.jotform.com/help/75-customize-your-form-using-custom-css-codes/" >https://www.jotform.com/help/75-customize-your-form-using-custom-css-codes/</a>
Thanks!
how do i make the BMI widget bigger vertically? i got some code for just the BMI that i added and it worked, but now i'm trying to incorporate it into a bigger form and when the BMI calculates, it gets cut off because the height is too small. form is <a target='_blank' href="https://www.jotform.com/build/82957513984169" >https://www.jotform.com/build/82957513984169</a>
Hi
Can you tell me how to add codes to increase height of text fields? Not sure why they are looking so small. Thank you
Is there a way to make one multiple choice option associated with an element, such as having the option to choose a number appear in a multiple choice option? I want to use this to affect pricing, where it would be the set price times the number that is entered.
I was wondering if there was a way to take the limit off the date reservation tracker. I would like more than one person to be able to choose a date but once it is chosen the date doesn't show up again.
How do you CSS line height? Thanks
I need help please with CSS code to make the multiple choice quetions and answers appear in arial font - 12 pt. Can you help?...
How do I remove the shadow around the form? I'd like it to be flat.
I have a form with an input table, with 6 columns numeric. Is there a way to limit it to only 1 numeric number per field?
Is there a CSS code that will take a numerical entry in a "Number" field or a field that has a numerical value that comes from a conditional calculation and add the dollar sign and a two place decimal? So an entry or calculation of 234 will appear as $234.00 or 234.3 as $234.30. Thanks.
How can I make the multiple choice widget to insert numbers instead of a check mark? I'm trying to have it list number preference rather than selecting multiple options.
Olá, Tudo bom ?
Como faço para colocar as fotos do formulário no tamanho de 3x4 ?
A ferramenta que utilizo deixa as fotos no tamanho que são enviadas, mas queria que no PDF gerado pelo Jotform a foto ficasse em 3x4 para que na mesma folha de PDF houvesse várias inscrições.
Fico no aguardo.
Desde ja agradeço a atenção
I have a form that contains Input Tables.
Is it possible to use CSS to format these so that the data entered becomes 'wrapped' in the cells?
i.e. rather than text being cut off because of the limitations on width, the information would flow into another line below & the cell would effectively by double-height.
Is there a way using CSS in tables to specify the width of the text fields response?
How do I hide a column under Matrix Dynamique when form is submitted? I do not want to hide the whole field of this feature.
Hi - how do I change the question size on the radio button fields.
I don't want the question to wrap around
Example in Facilities Access Request Approval Form
Thanks
Necesito un código CSS para definir que un campo tenga un número máximo de caracteres
When I changed the place holder text color, all but 2 boxes changed colors..how do i get the other 2 place holder texts the same color as all of the other ones?
How do I make all the radio button tables the same size for the whole form?
hi do i add google geolocation, i got the css code from google but doesnt work when i fill out address it doesnt show the rest of correct address
Hi,
Not sure if CSS codes are what I should be using.
I'm looking to create a set number entry ie 1234#### where the # can be any number.
It shouldn't prompt for the 1234 but if it doesn't fit that format it should reject the entry or clear what has been entered.
SALUDOS
Como puedo filtrar respuestas de una lista desplegable a resultados especificos.
Ejemplo: Elegir una provincia y que despliegue sus municipios
Ej: Provincia Hermanas Mirabal =(Tenare, Salcedo, Villa Tapia)
Duarte = ( San Fco, Castillo, Pimentel, Las Guaranas)
I am looking to change the layout of address field to be from
#input_7_addr_line1, #input_7_addr_line2, #input_7_city, #input_7_state, #input_7_postal, #input_7_country
to
#input_7_addr_line1, #input_7_addr_line2, #input_7_city, #input_7_county, #input_7_state, #input_7_postal
How would I make that change ?
Hi, I can't see the custom CSS option in Form Designer. What am I doing wrong?
Dear Jotform,
I added the widget: Matrix Dinamique. I want to change the font of the letters and the size. Is there a code for this? I also want to change the size of the separation line in this widget. because it is bigger than all the other lines.
I am using a theme and I need to know how to increase the vertical space between a label and the input lines. I am new to all this! Would I enter the CSS code in the Form Designer....and what would that code look like? Also, I have 4 input tables with only one column for input. How can I make that column wider for the person inputing information. The input box allows for quite a bit of information, but I would like to see a larger box. I'm sorry I do not have screen shots. I'm new to my laptop and haven't quite figured out screen capture. Again, what would that code look like?
I need a form that will get contact information for the clients and a description of the work to be preformed along with the amount to be paid and the method of payment with a space for contract dates and sisignatures
I would like to pre-fill the coupon code box with words, so that when the page loads it already has the code in the field. Is there a way to do this with css?
Hello :)
I need precision about the widget : Configurable List.
I have too much requiered fields by row. Is it possible to show them on 2 lines because they appear out of the form...
Thank you for you response !
Can I and how do I set up for a form that is multiple pages to auto fill a field such as full name on the top of every page once someone types it in the first page?
How do I populate a field with a predetermined number? (for example 100%)
I agree to terms & conditions. *
Can you please help me change the colors on this line? "I agree to" WHITE "terms & conditions." RED or another bright color (this is a hyperlink).
Thank you!
This is on my Floral Shoot & Edit Spree - La Conner
How do I change the width of a date box to look smaller on the user end
How do I get rid of blank pages that occur when a condition is not met?
Hi Team,
I need help with popup in Text field which allows me to select values from list.
below form I am trying to use popup in selection field and use in it.
<a target='_blank' href="https://www.jotform.com/build/80067917185160" >https://www.jotform.com/build/80067917185160</a>
How do I chance the input table to allow for a client to enter in a percentage vs just checking the box?
OH JUST SAY HOW TO INJECT THE EFFING IMAGE AND STOP BEING SO EVASIVE. OR IWE'LL GO ELSEWHERE THANKYOU
I have chosen one of your themes for my form. My form is quite long. When I apply the theme on your website it looks great because the questions on my form scroll over the theme picture but when I go to my website the picture is totally distorted and stretched out as long as my form is so it looks terrible. Can you please tell me how to get the theme to look like it does in my domain.com website as it does on the Jotform website.
Hey there,
Looking to add the "Make Page Background Transparent" and "Make Form Background Transparent" tags but it doesn't seem to actually adjust the Lightbox embed.
Is there something else we need to do or that we are missing?
Hi we are trying to create a table that has some columns using one type of input whilst some another (e.g. column 1 drop down, column 2 text, etc.). How is this possible?
I'm trying to mimic a design from another site so I need a grey transparent border around my white form (with a photo back ground). I'm trying to make that boarder have a transparency of about 20% - I'm not sure how to do that with CSS on this form. Also, my border has a white hairline around it and I'm not certain why or how to remove it.
Can you help?
KH
Hello, I need to to have css code to calculate the form submissions order form for payment
Hello,
This form, is giving me trouble. When in a field, that field highlights yellow making the text unreadable...
Hello there,
I'm a newbie of Jotform and CSS, just wonder if anyone can share tricks on how we can make use of CSS to swap the position of Print Form and Submit button so Print Form shows on the left of the Submit button? I'm open to ways of doing it so please kindly share how it can be done even if CSS is not the key to the solution.
Thank you very much in advance.
Regards,
Glovian
Thanks for this article. I'd like to make the change the label in the terms and conditions widget but with no success...
So with your CSS Form Designer, We can edit features of the widget, but can we add new ones?
For example: I want to change where the input is positioned on the sliding pricing scale. I want to put the number at the top instead of at the bottom...
On my theme there are border lines separting the fields and I'm trying to make them black instead of white (you can't even see them on my form) Any help would be much appreciated!
Wie kann ich den Text vom "Submit" Button ändern?
Using the configurable list widget, how do I make part of the list jump down to a new line instead of being too long for the screen?
Hi, can you tell me how to change the size of the font for the saved user input in the Matrix Dynamique widget? At the moment answers displayed after they Save and Add Row are very small. I want about 14 or 16pt and #ffffff . Thanks for your help.
I am trying to change the colour of the asterisk on my form as at present it is red on a red background. I have followed the instructions and managed to change it to white but it does not save the changes.
Are you able to help?
Does anyone know how to change the list hover states of .form-autocomplete-list.
I've managed to style a few things, but I'm finding it impossible to inspect a dropdown to figure out what style sheet it belongs to.
It would be awesome if Jotform surfaced up all the hidden elements.
I have a Long Text Entry Element in my form. I want to change the background colour of THE TEXT ONLY to yellow. Please help!!
Anyone have a suggestion to target product images and force them to stay open or at a specified height in the current collapse functionality? Thanks!
Is there CSS I can use to alter the matrix found under Survey tools? I am trying to increase the size of the text box. Thanks!
Any help regarding safari css? y for is working good on chrome but when I open it in safari the field alignments got disturbed.
How I add css for safari browser? Please tell with syntax.
Very nice post you're sharing with us.
I have created a sidebar using a text box with contact info like office hours but I want to make the remainder of my contact form beside it rather than below it. How can I change this?
Hello, can I put submit button at the right side of text box ? but same level , not lower !
You guys are brilliant! Thanks for the excellent cheat sheet.
Is it possible to edit the header rows or columns in the spreadsheet widget? For example, rather than "A, B, C" along the top to rename them as "Name, Age, etc."
Hi,
What is the css to change color input fields? I would like the color to be white and text to be black.
Thank you
Hi,
I need help trying to customise a sliders with calculated result. Im trying to change the layout like the slider_handle but cant for some reason.
How do I remove all of this grey color in these boxes. I have tried but it seems to want to default to a theme. I don't want that. I want everything to be white and then my lettering to be black...
Hi I need some help with the padding and margins. After i used the designer function and added the source code into my html page as well as upload the CSS files, there's now a huge padding above my form and a margin on the left where i'd like it to be aligned with my header.
Please help!
Hey
I am trying to change the colour of individual dropdown list options based on condition. What I mean is if a problem occurs in location 3 the word "location 3" in my location dropdown list turns red to tell me where the issue is, other locations remain black text.
I need any way to differentiate a field from the populated data info and the info entered by the user.
So that once a user has visited and changed any info that filed looks different from the other fields. Don't care if its background highlight, or Box Border color, etc... THANKS!!
How to make a text box recognize currency? For example, if someone enters 50000...I need the output/result to be $50,000 or 50,000.
How to make textbox areas transparent with a line not a boxed border?
Hi,
I am using the authorize.net premade template payment form.
I would like to make a couple of changes within the form itself, but when I go to the form designer, it appears locked; I can only add fields above the form or below it (except for product fields which automatically go to the top within the form).
At the least, I would like to add text within the form (as a heading to a group of products).
At the most, I would like to add text fields - in order so that they may provide a shipping address, if different - within the form.
Is there a way to do either or both of these?
Again, I do not wish to add fields above and below the premade form - as I know this can be done - but within it.
Thank you,
Paul Zucker
I would like to place the actual form (with the headings, fields, etc) at the top of the page (so there is no background or margin above it) but have not been able to figure out how to do it with the custom css.
In other words, I would like to add my own spacing above the form after I embed it.
I want to change the colour of the radio button (from blue) in the matrix.
I would like to add multiple lines to the header.
Hi I would like to remove the postal code field from the address box. How can I do that?
How to uninstall from google drive and close account.
What is the css code for changing the unique question text? Thanks in advance! The theme and text do not match the rest of my forms.
How do I change the label sizes?
I am referring to the text box next to a radio button for example
I am simply wanting to move my text boxes closer together vertically to mimic the address quick tool. Does this have to do with the "padding" I am seeing in the design tool? If so, can I adjust the padding of specific text boxes?
As a follow-up, is there a way to apply a CSS to a selected group of fields as opposed to individually or the form as a whole?
Regards,
-Tim
Me again! I changed the background of my header but the color does not reach right across the width of the form meaning the background color of the form also makes up part of the header... Can you help?
Hi,
I entered the code above to remove the red background of the error message but it doesn't seem to have worked...
Hey there.
I have a column of many different 'Check Box' questions, each with 3 boxes to check.
When a question has an option 'checked' it naturally lights the question up yellow.
What I would like to do is keep the question lit up for as long as an option is checked. So if ten questions have boxes that are checked, all ten questions would still be lit yellow. And when/if the boxes are unchecked the question would lose its lighting.
Any help would be greatly appreciated.
...i am wondering if it is possible to change Security Code input type from text to password???
how do I change the fonts in the form to the ones in my website? My website is using this font pulled into the CSS: @import url("
How do I get the same font on my jotform?
I have developed a conference registration form and have it set to integrate with paypal for credit card payment only. I would like to have the redirect to paypal page open as a new tab on the browser so the registrant doesn't leave my website. How do I do this?
Also, I have the form set that a thank you appears when they register to pay by check, but how do they get a thank you after submitting the form if they go to paypal? Thanks so much.
How can I use the same color as the background image?
I imputed the css coding as shown above and it isnt doing anything.
how can I add a company logo to the top of the page, small gif image about 100 x 100 pics
Any attractive one available for our store Oshopindia?
Thanks
Manthan
How I wish you guys can help with having extensions for Firefox users...
I connected to Jotform on my Google Drive, but it is not appearing in my Create menu.
Is there a step that I am missing?
For everyone with questions about specific changes they want to make in the CSS:
Use a Webmaster extension for Firefox or Chrome (Firebug, Webmaster Tools, etc)- Once this is installed, view your form ON your site and right click the element you wish to change, select "Inspect Element." This will show you what CSS is being used to style the element. That is what you want to override when you inject custom CSS. You can even play with the numbers to see what you like before you make changes.
Hi, can I use the css to change the dimensions of the answer fields - I would like to make the fields bigger so they are more visible on smart phones... Thanks in advance :)
I can't get my form why?
I would like to wirte the information filled on jotform to a database. Is it possible? How can I do it?
Any way to get the excel reports more easily accessible?
Is it possible to automatically download all the attachments submitted to Jotform with this app?
Me too, I'd also like to import an existing Jotform into Google Drive. Is this possible?
Can you clarify what the app can and cannot do. For example, when installing I got the following warnings/messages about what Jotform can do
"View and manage any of your documents and files in Google Drive"
"View and manage your spreadsheets in Google Drive"
Obviously these are no-no's as is, unless technically it is only possible for forms created with Jotform.
It's a great idea, can you kindly clarify.
is very good!
Your creations are amazing! And I hope for you make sure my clients forms submitted are secured from any threats!. I love the fact how easy it is to make forms with Jotforms. Thank you!
Is there any way to take existing forms and make them appear in the GoogleDrive environment?
Can you move the form around within your Google Drive heirarchy?
Two things not covered here are how to css the form field labels, and how to css the states of the form field titles. (when you click in a field which is required the color of the text changes. Even if you target and change the color of the text it has a briefe 2 seconds where it clicks to the default color. How do you keep the text the same color regardless of :selected :active etc...?
When my application opens, you can see the outside surrounding area outside of the form.. and it is all white. It doesn't really look professional. How do I change either the size of my form or the surrounding color?
Hey,
I tried this and accomplished the desired result, but unfortunately now the question font turns gray and this color sort of blends in with my background. How do I keep the font from changing color whenever a required question is skipped? Or how do I change the color of the question text?
Thanks.
How do I change just the color of my form background? Right now it's a nasty pastel blue. :-(
Hi. I have read a thread or two about changing the color of the header background and placing an image instead, and most closely to my question, is changing the color of the SUB-header font. What's I need to do, please, is to change the color of the font on the Header itself...not sub-header. I'm using the Pastel (gray header) theme/template; the font shows up a beautiful burnt orange color when editing the form, but, when I go to view it as a user would view, ONLY the sub-header is burnt orange the rest is dark gray. Please help. :-)
Folks I insert the form embed script, save the page yet all I get is a small yellow box with the word script in it. I cannot get the form to present as it should. Please help
I have a dark background colour on my page yet when ever I click in the field it turns the form white. How do I stop this from happening with inject custom CSS?
You guys are great! I am told that the dollar sign and dollar amount (the prices) are so gray that older people and people with so-so eyesight cannot read the prices in my payment form. How can I change the size and color of the font for these?
Anyone know the CSS code for changing the color of the page break "Back" and "Next" buttons?
thanks in advance.
hello!!! so sorry to bother i still dont know how to use it... i just wanted to use my background like this..
thank you so much for the help.. :)
I Want to Center All the Fields + I want to Add A Background Image for which the above code is not working