Is there a good excel style form available?

  • Profile Image
    NYSCoordinator
    Asked on February 09, 2013 at 05:40 PM

    I need to make a form that looks like this attached image, but non that are available have thefull collumns and rows that I need.

  • Profile Image
    EltonCris
    Answered on February 09, 2013 at 09:19 PM

    Hi,

    That might be possible with Custom CSS Injection. I'll provide you an example to clone later today. Hopefully I could mimic exactly as shown on your example *cross finger* :)

  • Profile Image
    NYSCoordinator
    Answered on February 09, 2013 at 09:22 PM

    That would be so awesome.  This is hugely important to me as I use it to get the availability of my soccer referees each season.

     

    Thank you so much,

    Peter

  • Profile Image
    EltonCris
    Answered on February 10, 2013 at 03:26 AM

    Hi Peter,

    Sorry for the delay, I have a bit trouble aligning and getting them work on all browsers but it's fine now hopefully. Check this one: http://www.jotform.me/form/30401000112423. You can clone this form to your account so you can add extra fields. Check this guide: How to Clone a Form from a Web Page

    --

    Since our Matrix tool has its limit when it comes to styles formatting as of now, I have used our Custom CSS Injection feature to spice it up a bit. Feel free to check the CSS Codes injected to that form for further changes.

    Hope this helps. Thanks!

  • Profile Image
    NYSCoordinator
    Answered on February 10, 2013 at 10:29 AM

    That is so awesome, thank you very much,I will show you what it looks like, once I'm done.  

    Again thank you, this will take so much time and effort out of my work each year.
    Peter
  • Profile Image
    NYSCoordinator
    Answered on February 10, 2013 at 10:58 AM

    I just edited some of my questions, but I can't figure out my third question.

    I do have two more questions

    1) is there a way to put fields side by side?  Please see attatched I highlighted the section of the two fields I'm referring to. **I just figured this 1st question out - I forgot that I could use HTML

    2) Also right below that where you see the black and blue badges, is there a way of placing images next to text.  I would like to get this form as close to what I have attached. Again, I can use HTML

    3) Can I intergrate a one of the power tools into the HTML field? So I want to put a name date, name, email and Date fields to the left of the yellow box with text.  Can this be done? 

  • Profile Image
    EduardoMendez
    Answered on February 10, 2013 at 06:50 PM

    Hi there, 

    To answer your questions:

    1) is there a way to put fields side by side?  Please see attatched I highlighted the section of the two fields I'm referring to. **I just figured this 1st question out - I forgot that I could use HTML

    You can place fields side by side by shrinking two fields.  here is a guide to hel[p you:

    Field positioning is essential in designing your forms matching to your website structure. There are times that you want to keep two or more fields on the same line, side by side, as well as keep other fields in their own line. Luckily, JotForm provides different functions to manipulate the position of form fields.

    First we should know how to shrink a field to allow positioning next to another field.

    Shrinking a Form Field:

    Right-click on a form field and click "Shrink" to shrink a form field.

    The shrinking takes only the actual space it needs instead of a whole line. Look at Example1 below:

    Example1

     

    vs

    3) Can I intergrate a one of the power tools into the HTML field? So I want to put a name date, name, email and Date fields to the left of the yellow box with text.  Can this be done? 

    Unfortunately, this is not possible at this time.

    However with the shrinkingof a field and injecting some CSS you can place them side by side.

    Here is a clone of your form:

     http://form.jotformpro.com/form/30406661506953?

    You can clone it and see the added CSS code:

    .form-line{padding-top:2px; padding-bottom:2px;}  This can change the vertical padding to bring the fields closer together.

    You can also adjust that by following this guide.

    #id_10,#id_25,#id_11,#id_14,#id_12,#id_17,#id_13,#id_18{width:320px;} This distributes the fields evenly in the width of the form.

    #id_25{float:right;} This places the HTML field to the right of the other fields.

  • Profile Image
    NYSCoordinator
    Answered on February 11, 2013 at 04:06 AM
    Thank you, but the form was deleted by you, so I can't save it or preview it from my forms. And I don't know how to view the css code.
    Peter Varitimos
    NYS Board of Directors
    NYS Intramural Referee Coordinator
    (h) 781-769-4067
    (c) 781-724-0612
    referees@norwoodsoccer.com
  • Profile Image
    EltonCris
    Answered on February 11, 2013 at 06:56 AM

    Hi Peter,

    Form Not Found error has been fixed already. Kindly check your form now. Clear your browser's cache if the form still displays that error on your end.

    Thank you!