Author

Profile Image Aytekin Tank is founder of JotForm. He currently leads the JotForm development team. He loves to hear from JotForm users. Feel free to shoot him an email at aytekin at jotform.com.


Welcome to the JotForm blog, where you can read about new JotForm features and find helpful online form tips for creating top-notch forms, user case studies, and much more.

Feel free to stay a while, drop a comment or two, laugh at our corny jokes, and make sure to share the articles you like on social media.




7 Useful JotForm Features You Probably Didn't Know About

September 08, 2011
Bet you don't know many of the features listed below! If you do know most of these then you must be a JotForm pro! For the rest of us, let's take a look at them in our path to JotForm nirvana.


1) Option Groups in Drop-Downs 

This is truly a hidden feature! It makes your dropdown questions more organized and easy to use. Here is an example of what it looks like: 


1. Create a drop-down menu,
2. Select the options tab and add some options,
3. Put double brackets at the [[ beginning and end ]] of your option groups.





2) Amazing Ways to Customize Questions Appearances

These options are for people who are obsessed with keeping things in line. Use them to make your forms neater. Try the options as we go through them. Maybe it is a small detail but you might want to give some designer’s touch to our forms, right?


Manage Distance Between Questions:
1. Go to "Setup & Embed" tab and select "Preferences"

2. Select "Field Styles" tab and then change the "Question Spacing" option to desired amount. "0" is the closest distance.


Adjust Label Alignment of Questions:
1. Go to "Setup & Embed" tab and select "Preferences",
2. Select "Field Styles" tab and then change the "Label Alignment" option to desired alignment.


Disable Highlight Color:

1. Go to "Setup & Embed" tab and select "Preferences",

2. Select "Field Styles" tab and then change the "Highlight Effect" option to "Disabled".




3) Use Form Collapse Like a Pro

Form collapse may look confusing at the first look. Understanding the basics of how it works can create miracles on your forms. Now, let's start form collapsing:
1. Add a Heading from Form Tools,
2. Add a Radio Button from Form Tools,
3. Select Survey Tools and Select Form Collapse,
4. Under the Form Collapse button place other buttons and tools etc.
5. When you click on the Form Collapse button there are 2 options on the toolbar at the top.

Status determines the Form Collapse button behaviour.


a. When "closed", viewers will have to open it manually.
b. When "open", viewers will see it open by default.

"Visibility" determines the "Form Collapse" button visibility to the viewers.


a. When visible, the viewers can see the Form Collapse button.
b. When hidden, the viewers cannot see the Form Collapse button. 

6. Here is how it looks like by default:

7. Then we click on Form Collapse to open it:

Here are some questions you might have with using Form Collapse in this example:
1. What if viewers don't open the form collapse and submit the form? 
2. How do we stop the form collapse button to show other stuff underneath it independently?

Let's follow the same example and add another Form Collapse to answer both of the questions.
1. Add Form Collapse on top of the Submit Form button.
2. Set Status to Open
3. Set Visibility to Hidden

Here is what it looks like finally:


More Tips:
The placement of "Form Collapse" button may be confusing but know that the "Form Collapse" button could either hide or show all the data below it.

A "Form Collapse" button can be used as a way to stop the form from being submitted.


4) Spice Up Your Form Design With CSS Injects

CSS Inject allows you to customize anything visual on the form from the CSS. It requires  some CSS knowledge. Let's see an example: Change background color on a form  .

You can find a RGB color generator here for choosing a nice color: 

Here is what our form looks like before applying CSS injects:

To enter any CSS rule you have to get into the Inject Custom CSS section on the Form Styles tab. To do that, first go to Setup & Embed tab and then click Preferences.

Now go to "Form Styles" and go to "Inject Custom CSS" and click to add your own CSS code.

Here are some of the CSS codes you can experiment with:

Change the header background color:

.form-header-group{
  background-color:#3366FF;
}

Change the sub header background color:

.form-subHeader{
  color:#FF9933;
}

Change the First Name and Last Name label styles:

.form-sub-label{
  color:#990000;
}

After making these changes here are what our form looks like:


5) Change the Validation Messages

Did you ever want to change one of the validation messages such as "this field is required"? It is perfectly possible. Check it out!

1. Go to Setup & Embed tab and select Preferences:

2. Go to Advanced Settings and click Edit Form Warnings:

3. Click on any warning messages and change them as you wish.

6) Share Submissions Page for a Form

You can share a form's responses with your colleagues or clients. To achieve this, go to your form's submissions page. Then follow the steps in the screenshot below:


Once your client visits the public submissions page URL, they will have instant access to all information submitted by users. You can also password protect this page and give them the password.



7) Use reCapthca Instead of the Default Captcha

reCAPTCHA is hard to beat. Because the images of words that optical character recognition (OCR) software has not been able to read. 

"The subscribing websites (whose purposes are generally unrelated to the book digitization project) present these images for humans to decipher as CAPTCHA words, as part of their normal validation procedures. They then return the results to the reCAPTCHA service, which sends the results to the digitization projects. It means that you are helping digitize text books while protecting websites from bots attempting to access restricted areas."

Go ahead and contribute to the digitization process!

1. Select Captcha from Power Tools.
2. Click on reCaptcha from the toolbar at the top.

It will instantly change to reCaptca:

Save your form and help them digitize some more books. 


We hope that you found something useful in this list. If you have any favorite hidden feature on JotForm please share it with others in the comments below!



17 Comments...


   
seniaku (September 08, 2011 at 09:34 PM)

wow!!!


   
acboon (September 09, 2011 at 06:33 AM)

Great Tips Aytekin. Thanks.


   
shaunnaylor (September 09, 2011 at 08:13 AM)

changing the header colour doesn't seem to work with the template codes on your example

View Answer


   
Aurelien79 (September 09, 2011 at 02:41 PM)

I love it already, I'm thinking of a thousand ways to use Jot Forms... ;-)


   
cseconcurrence (September 10, 2011 at 05:39 AM)

Really Amazing, Love it


   
Jenneh (September 10, 2011 at 09:02 PM)

Wow! Great.! But does anyone know how to make a website looks real like facebook or hotmail or even yahoo?

View Answer


   
ibcoordinator (September 11, 2011 at 08:34 AM)

Excellent!!!! Thanks I will definitely make use of these :)

Thanks


   
alephino (September 14, 2011 at 12:50 PM)

Siete mitici! Se passate a Firenze vi offro una pizza!


   
lindar (September 21, 2011 at 12:42 PM)

I can't get #6 (make submissions page public) to work. I visit the 'public' URL in a different browser than where my Jotform account is active, enter the password as I set it up, and all it shows is a blank 'submissions' looking page, with no submissions present - though there are over 400 new ones for the specific form I made 'public'. Help? Thanks!

View Answer


   
olatunde (October 12, 2011 at 11:32 AM)

hello

please help...
can i use jotform to create airline booking forms with calender? if i can, please point me in the right direction. thanks!

View Answer


   
LorraineEsposito (October 30, 2011 at 05:20 AM)

Love the tips -- I want more! So great!

Questions:
How can I redirect a follow=-up form to automatically send to a client based on the answer to a questions?

Example:
Question: Are you interested in "A" or "B"?

Based on the answer, I would like to send a unique sign-up form automatically.

Example:
Values assessment with clients requires "halving" a master list over and over to hone in to the top 10 personal values. I would like to have a new list populate with only the value words selected by the client and send out automatically.

I can't wait to hear how to do this!

Thanks a million!

View Answer


   
Mich (October 31, 2011 at 02:58 AM)

it's great...


   
indexbear (November 02, 2011 at 11:32 AM)

I am wondering when do you have built in support for google analytics goal and eCommerce tracking features?

View Answer


   
jamcs (January 18, 2012 at 08:46 AM)

WOW thats awesome.... Love the features, what I wanted to know also, if in Jotforms there is the ability to have 3 fields where 2 have numbers and the 3rd field is an autosum of the first 2. For example if field 1 has 10 and the second field in another text box has 20 the third box will automatically show 30... Would love to have that feature !!! Thanks so much

JAMCS

View Answer


   
Phillip LeConte (January 27, 2012 at 03:28 PM)

Jotforms is pretty amazing. Great job!


   
GErickson (September 02, 2013 at 10:57 PM)

There is something wrong at http://www.jotform.com/answers/54222-I-am-wondering-when-do-you-have-built-in-support-for-google-analytics-g, which is the View Answer link to indexbear's comment of 18 Jan 2012. It seems to redirect to http://www.jotform.com/answers/54222, and just keeps trying to redraw the page. I've tried it using 3 browsers. Feel free to remove this comment when the link or target page is fixed.

View Answer


   
sanaullahrais (April 03, 2014 at 01:16 PM)

please add customize you drop down menu it,s not a beautiful and radio buttons are not beatiful,if we want to add radio button using your widgets then logic conditions are not working

View Answer


Send Comment