How to create a form with 4-column grid?

  • CLE2020
    Asked on September 21, 2019 at 10:30 PM

    Hi, First, I'd like to say that I LOVE JotForm!!! I've created three fill-in forms for our website and one interactive map and everyone's sooooo happy with them!

    What I'm trying to do now is replicate a Lecture Grid that we use. Here's the one we used for our February 2019 event: https://consciouslifeexpo.com/lecture-schedule/

    Is there a way that I can create that in a JotForm? The tricky part is that the middle line (the title of their lecture) needs to be a link to their personal page, so I'll need to be able to hyperlink the title.

    The other part is that each box needs three lines:

    SPEAKER NAME

    TITLE (Italicized and hyperlinked)

    ROOM NAME


    And, here's one of the forms I created using JotForm: https://consciouslifeexpo.com/lecture-information-input/

    It might look a little amateurish, but it's my first one and I'm sooo happy with it!

    Thanks for any assistance you can provide toward creating my 2020 new lecture grid.

    Best regards,

    Tee Celise 

  • jherwin
    Replied on September 22, 2019 at 12:14 AM

    Thank you for the kind feedback. Also, your webpage really looks professional so I don't think it was created by an amateur :)

    Can you please check if you want to create a form something like this: https://form.jotform.com/92640442458964

    I used a text field to list the options and then maximized the width of the form.
    1569125455styles Screenshot 10
    Please check and let us know if you are referring to something else.

  • CLE2020
    Replied on September 23, 2019 at 2:39 AM
    Thanks so much! That's very close to what I need!!!
    I do need the green boxes to be uniform sizes. I also need the text within
    the box to be centered. And instruction as to how I can make four boxes
    across and numerous rows. Finally, will the middle line, the title of the
    lecture, be able to be hyperlinked?
    Thank you again for your instant reply and your kind words!
    Tee
    ...
  • AndrewHag
    Replied on September 23, 2019 at 6:26 AM

    I believe you are looking for something like this: https://form.jotform.com/92653047600958

    You can also clone the form and check it.

    Here is the guide: How-to-Clone-an-Existing-Form-from-a-URL

  • CLE2020
    Replied on September 24, 2019 at 5:13 AM
    HI Andrew!
    Yes, this is exactly what I'm trying to do, but I don't know how to
    recreate what you've shown me. Is that a widget used to make 4 text boxes?
    Would you please assist me by providing me with the specific steps to
    recreate what you've shown to me?
    Thanks so much!
    Tee Celise
    ...
  • AndrewHag
    Replied on September 24, 2019 at 5:42 AM

    You can use a normal text field to create each textbox.

    1569317528The Easiest Online Form Builde Screenshot 10

    First, increase the form width by following the instruction provided by my colleague in the previous replay.

    Then, add a text field to the form and enable the Shrink option under the Advanced tab.

    1569317666The Easiest Online Form Builde Screenshot 21

    Then open the text field and write all the text that you wish to display. You can click on the Hyperlink icon to add the link. 

    1569317906The Easiest Online Form Builde Screenshot 32

    Finally, you can add the CSS code below to adjust the width and background color:

    p {

        background: #95c07b;

        min-height: 100px;

        min-width: 250px;

    }

    1569317997The Easiest Online Form Builde Screenshot 43

    But, I suggest you to clone the form that I shared before. Once you clone the form, you can just duplicate the fields that I already created and change the text as per your wish so you don't need to create everything from the scratch.

    1569318127The Easiest Online Form Builde Screenshot 54