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

    Typeform-like the visual options

    Asked by GBKC_Admin on June 14, 2016 at 06:55 AM

    Hi,

    You folks are doing a tremendous job. The system is flexible and customizable. Regarding customisation, I refer to the request in thread "Transform the form in a Typeform like form". I would be great if you can include the additional functionality to enable me to present the form fields and pages. I believe that this will enhance an already excellent service.

     

    p.s. I have used the custom CSS codes and the Form Designer Tool extensively in my designs.

     

    Sheldon

    visual form designer tool Typeform
  • Profile Image
    JotForm Support

    Answered by jonathan on June 14, 2016 at 09:01 AM

    Hi Sheldon,

    Thank you for your feedback and suggestion.

    As mentioned already by my colleague on the thread, Typeform approach focuses only on the front-end visual presentation and design. While JotForm has a lot more going beyond the visual design.

    If you check our Theme Store , you can see themes that have visual presentation that were similar or at least closer in concept to some of the visual theme that Typeform have.

    So what I am saying also is, the visual options that Typeform have, can be achieve as well using the JotForm Form Designer. 

    Also, I can submit a feature request to our higher team support if you can mention a specific functionality you are after that can be added to the Form Designer.

    We will wait for your response.

    Regards,

  • Profile Image

    Answered by GBKC_Admin on June 14, 2016 at 03:27 PM

    Thanks for the answer Johnathan and it is a presentation related question. I am particularly asking whether it is possible for you to enable form creators to present one or (N) fields at a time so that users can focus on the specific question(s) but visually leave hints of the previous and/or next question so that they can go to them readily.

    Also, make it easy for users to scroll through the questions using gestures, short key-strokes etc. It would also be valuable to provide easily accessible, standard, animated transitions (fade, dissolve, etc.) to the next question(s) or pages. To this degree, it might be good if some of the options I mentioned be included in the drop-down for each question or question set or even included in the toolbar.

    Hope I was clear. What do you think?

  • Profile Image
    JotForm Support

    Answered by jonathan on June 14, 2016 at 05:10 PM

    Thank you for providing the details. :-) They were clear for me.

    ... present one or (N) fields at a time so that users can focus on the specific question(s) but visually leave hints of the previous and/or next question so that they can go to them readily.

    In theory, I think this can be achieve using a customized page break or form tabs widget. Using skip page or Show/Hide condition rules will give this visual illusion on the form. The page break field can be customized to add images to it so it appear like it was visually being done instead of a button only.

    It would also be valuable to provide easily accessible, standard, animated transitions (fade, dissolve, etc.) to the next question(s) or pages. 

    There is no out-of-the-box option for this. But advance CSS codes can also achieve the same using the Form Designer. You are right though, it is not easily access if you are not a CSS coder.

    --

    Can you also share to us an example Typeform you were looking at wherein we can also see the functionality/features you mentioned applied?

    It will help our developer understand easily which specific features they can work on once I submitted a feature request ticket for this. I meant if I have an image, I can easily take a screenshot of it and point-out the feature you just mentioned.

    Regards,

     

  • Profile Image
    JotForm Support

    Answered by jonathan on June 14, 2016 at 06:43 PM

    I apologize if multiple response were sent on your side. I had Cloudflare delay related issue that causes my response to be repeatedly sent. 

    Regards

  • Profile Image

    Answered by GBKC_Admin on June 14, 2016 at 08:22 PM

    No problem

  • Profile Image

    Answered by GBKC_Admin on June 14, 2016 at 08:24 PM

    Great but just for your information, I know that some of the features can be achieved using CSS. The issues are simplicity, speed and ease-of-use.

    The link to an example form is https://www.typeform.com/examples/#Registration

     

    The screenshot is shown below:

  • Profile Image
    JotForm Support

    Answered by liyam on June 14, 2016 at 11:32 PM

    Hello Sheldon,

    I also believe it is possible to do by using Custom CSS, and for such reason that we allow such flexibility to alter forms on the form builder.  Currently, something similar is what runs now on JotForm's form builder, although what it does is focuses a highlight on the specific focus on the form, unlike on the screenshot which in general is faded and it clears in when the field is focused.

     

    So with some adjustments on the CSS it may work out like the way you intend it to be. Here is a sample CSS code which I have created:

    .form-line {
       opacity: .25;
    }

    .form-line-active {
       opacity: 1;
       transition: opacity .25s ease-in-out;
       -moz-transition: opacity .25s ease-in-out;
       -webkit-transition: opacity .25s ease-in-out;
    }

    This is how it looks like with using the said CSS code:

     

    Please let us know if you have further concerns.