Integration help with styles and pagination

Question

I am testing integration of Cognito Forms for my website which has multiple forms. I have registered with free version and tried to integrate it on my site. But I am now facing these issues:

1. Is it possible to change / update animation when we go to next step?

   Currently it scrolls to the top and slides the next step in.

   Can we use just use fade effect or no effect on forms and just scroll on top?

2. Is there any way to make form labels coming on left instead of above fields?

3. Is there any ability to add link as part of label?

   I need this for the checkbox I use to agree terms and conditions.

4. Is there any ability to add text on right side of the field?

   Eg. I have a field for a Travel. So I need Field Label in first column then Field and then unit text "kms" next to the fields?

I really like all other features that Cognito Forms has but just found above restriction on customizing forms on my website.

It will be good if you can update me with possible options to resolve this so I can upgrade my account and start integrating more forms.

Answer 1

Cognito Forms provides a ton of flexibility for customizing the layout and appearance of forms. At the same time, the forms are designed to be easy to build, easy to maintain, and work responsively on a variety of devices. This is why we do not overwhelm users with field layout options, or try to recreate paper forms, as the goal is a bit different.

That being said, here are some possible ways to answer your formatting needs:

1. Disable Animations

   In your seamless embed code, change:

   Cognito.load("forms", { id: "*your form number*" });
   

   to:

   Cognito.load("forms", { id: "*your form number*" }, 
   { success: function() { ExoJQuery.fx.off = true; }});`
   

2. Align Labels with Custom CSS

   Add custom CSS alongside your embedded form, such as:

       .cognito .c-label {
           width: 80px;
       }
       .cognito .c-editor {
           width: calc(100% - 80px);
           display: inline-block;
       }
   

3. Add Content Fields to Insert Links

   Add a content field adjacent to the checkbox field. Insert a link in the content field linking to the terms and conditions.

4. Helptext to Right of Field

   a. Add a content field to the right of the field and enter the help text, or

   b. Use CSS to right align the existing field helptext .c-helptext, or

   c. Our upcoming placeholder text feature will also help provide new user prompt options