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

    Updating Field Styling with CSS3 animation

    Asked by kauseway on December 16, 2014 at 07:52 PM

    I have a text field that gets updated based on other field selections. Everytime it updates it instantly updates. Is there a way to make it update slightly slower. (like a slow blink?). This is really just styling but would like it to update the field slightly slower.

    text field Updated Other field blink
  • Profile Image
    JotForm Support

    Answered by Charlie on December 16, 2014 at 09:00 PM

    Hi,

    You can add CSS3 animations by inject custom CSS code in the Form Designer.

    I'm not sure which of your forms and what fields you want to add effects. But I can show a demo on how I did a basic fading in my end.

    My form: http://www.jotform.com/form/43498027603962

    CSS3 animation: fades in and out twice when a dropdown is filled.

    1. First, learn CSS3 animations, you can search the web or use W3Schools as reference.

    2. I created my form with a dropdown and a text field.

    3. I want to fade in and out the text field when a dropdown is filled. This is my custom CSS3 code.

    #text_4, select[size="1"] { //#text_4 is the text field while the select is the dropdown.

        animation : blink 4s;

        -webkit-animation : blink 4s;

    }

    @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; }

        }

    4. I then navigate to Form Styles->Form Designer.

    5. Add the custom CSS code in the CSS tab of the form designer.

    6. Make sure to save the changes.

     

    The code made not be perfect but it's a good way to have an idea on how to apply CSS3 animation to your code.

    Let us know if you need more assistance on this.

    Thank you.