How to create a form with 4-column grid?

  • Profile Image
    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:

    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:


    TITLE (Italicized and hyperlinked)


    And, here's one of the forms I created using Jotform:

    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 

  • Profile Image
    Answered 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:

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

  • Profile Image
    Answered on September 23, 2019 at 02: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!
  • Profile Image
    Answered on September 23, 2019 at 06:26 AM

    I believe you are looking for something like this:

    You can also clone the form and check it.

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

  • Profile Image
    Answered on September 24, 2019 at 05: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
  • Profile Image
    Answered on September 24, 2019 at 05:42 AM

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

    1569317528The Easiest Online Form Builde

    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

    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

    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

    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