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.


  • Profile Image

    How to animate fields (for conditional fields)?

    Asked by anthonylovesashley on March 05, 2016 at 06:59 PM

    Wondering if and how this can be done.

    1. Animate reveal of wrong person by a smooth slide

    2. When entering the correct user that's on the guest list (Stephenie Batterton), the field that appears below it would slide out (instead of just appearing), the same would happen in reverse. If they said NO to something the sliding would occur to either reveal or hide the fields that's being controlled by the conditional actions. 

     

    https://form.jotform.com/60607739339161

     

     

    slide out css animation css transform css transition ease in ease out
  • Profile Image
    JotForm Support

    Answered by jonathan on March 06, 2016 at 08:12 AM

    You will need to apply custom CSS codes to add animated styles on the form.

    Here is an example form theme that have animation https://www.jotform.com/theme-store/theme/north-pole

    You can also send a Request for a specific custom theme using the Request button in the Theme Store page.

     

    Let us know how we can be of further assistance.

  • Profile Image

    Answered by anthonylovesashley on March 09, 2016 at 11:35 AM

    actually, I'm looking to do something more like this. https://css-tricks.com/exposing-form-fields-radio-button-css/.  I want when you enter a name, the error or fields that appear (jane heart) will show a transition ease effect. Same thing when any form is revealed. I haven't seen this done really on any of the forms I've seen so far. 

    https://form.jotform.com/60607739339161 

  • Profile Image
    JotForm Support

    Answered by KadeJM on March 09, 2016 at 12:56 PM

    Thank you for providing us with the additional information and the example of what you are seeking to do as well.

    It seems to me that based on the demo you want to display your fields and errors similarly so that they fade in and out smoothly with the exposed transitions.

    Currently I see two potential problems because that particular example requires SCSS which is basically an extended version of css and to my current knowledge we don't currently support it within our jotform system. To top that off there's also jquery functions and that could also cause issues with your forms functionality.

    I'm not 100% about it but it may be possible to create something similar with just transitions using current supported css though it would be a bit tedious. With that said please allow us some time to look into this some more to see if we can maybe come up with something that might work with the form for this and we'll respond to you about it again as soon as we can.

  • Profile Image

    Answered by anthonylovesashley on March 10, 2016 at 10:38 AM

    there should be a way to target those fields w/ just pure css. Can't that be the case?

  • Profile Image
    JotForm Support

    Answered by KadeJM on March 10, 2016 at 11:37 AM

    I'm still exploring options to try to assist you with this better and yes you can target certain fields with css.

  • Profile Image
    JotForm Support

    Answered by KadeJM on March 10, 2016 at 12:40 PM

    I believe I may have found something of interest to you or at least it should help get you going in the right direction hopefully.

    What I've done is created a full keyframed animation using only css to generate a fade-in effect.

    Here's the Demo Form:  https://form.jotform.com/60694234026958   [Clone Me!]

    And here's a link to the Full Injected & Animated CSS Code for it to make it easier to look at and use since it's a bit long to post here on your forum thread. 

    To apply it either clone my demo form and modify it from there or you can the css code via injected css or through the form designer's css helper.

    Please note that depending on what you wish to animate on your form you may need to change the field id from " .form-checkbox-item " to whatever you wish to animate. Also, be sure to leave ":active" after the field id otherwise it won't work.

    Also, feel free to modify it more if you want to update or extend the css keyframes.

    Something else you may want to take a look at aside from this if you don't like the above method would be to look at our Spoiler Widgets that you might find useful.

  • Profile Image

    Answered by anthonylovesashley on March 11, 2016 at 11:39 AM

    Although that kinda of close, I was thinking for something that would affect all of the input fields when they're revealed. Also what about the size of the box as it stretches vertically to show those newly appeared fields? Wanted to make that some sort of transition/animation in which it eases as it's opening. 

  • Profile Image
    JotForm Support

    Answered by BJoanna on March 11, 2016 at 12:58 PM

    Do you want to achieve something like this?

    https://form.jotform.com/60704619895971 

    This is the CSS code I added to my test form:

    #id_3,#id_6 , select[size="1"] {

        animation : blink 2s;

        -webkit-animation : blink 2s;

    }

    @keyframes blink {0% { opacity: 0.0; }50% { opacity: 1.0; }75% { opacity: 0.0; }100% { opacity: 1.0; }}

    @-webkit-keyframes blink {0% { opacity: 0.0; }50% { opacity: 1.0; }75% { opacity: 0.0; }100% { opacity: 1.0; }}

    Also text box fields are hidden with conditional logic. They will only be shown once check box option is selected.

    Feel free to clone my form.

    Hope this will help. Let us know if you need further assistance. 

  • Profile Image

    Answered by anthonylovesashley on March 12, 2016 at 08:31 AM

    Hi BJoanna, 

    That's close! how about when the entire outer box expands, is there a way to make that slow ease as it grows (instead of just snapping open) and then make the boxes appear and the reverse? I like the slowly fade in part so making that a part of the process too. 

  • Profile Image
    JotForm Support

    Answered by Jan on March 12, 2016 at 11:41 AM

    Please try adding these CSS declarations inside the selector #id_3,#id_6 , select[size="1"] that BJoanna provided above.

    animation-timing-function: ease-in;
    animation-duration: 5s; 
    animation-delay: 2s;
    -webkit-animation-timing-function: ease-in;
    -webkit-animation-duration: 5s; 
    -webkit-animation-delay: 2s;

    So it should look like this:

    #id_3,#id_6 , select[size="1"] {
    animation : blink 2s;
    -webkit-animation : blink 2s;
    animation-timing-function: ease-in;
    animation-duration: 5s; 
    animation-delay: 2s;
    -webkit-animation-timing-function: ease-in;
    -webkit-animation-duration: 5s; 
    -webkit-animation-delay: 2s;
    }

    This make the 2 fields slow instead of just snapping. Here's a GIF animation:

    Hope that helps. Thank you.