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

    I need css help

    Asked by tabukpaws on June 10, 2016 at 07:15 AM

    HI I have just made a form but need help with one section - I used a configurable matrix widget but am having trouble with the spacing and I need to make the '+' button to say 'add more cats'

     

    Please can you help asap?

     

    Many thanks

    Page URL:
    https://form.jotform.me/tabukpaws/please-help-me-sterilise-my-cat

    section thanks and configurable
  • Profile Image

    Answered by testbens on June 10, 2016 at 10:36 AM

    Hello tabukpaws,

    You can change the '+' button in the Configurable List Wizard. Please try the following steps below:


    1. Select the Configurable List widget field and then click the 'Wand' icon.

    2. The wizard will open, please scroll down and you'll see the 'Label for Add' option. Here you can replace the '+' to 'Add more cats'.

     3. Click the 'Update widget' button when you're done.

     

    May I know what is the problem with the spacing? I checked your form and I can see that the Configurable List are not arranged by columns, instead it is arranged by rows.  I am not sure if this is intentional or not but you can apply custom CSS on that widget.

    I also noticed that you are using a 'Textarea' in the Cat Name. You can try the 'Text' field type so that it'll look more professional.

    You can put space between the Cat Name label and the text box by adding custom CSS on the widget. Here's a guide:

    1. Select the Configurable List widget field and then click the 'Wand' icon.
    2. In the wizard, go to the 'Custom CSS' tab and paste this CSS code:

    td.col1:before {

        margin-right: 20px !important;

    }

    Here's a reference guide: https://www.jotform.com/help/282-How-to-Set-Up-the-Configurable-List-Widget.

    I hope that helps. Cheers!
    -Fellow JotForm User

  • Profile Image

    Answered by tabukpaws on June 10, 2016 at 10:51 AM

    Awesome! Thanks so much testbens! The spacing is between the bold titles, eg after 'cat name' I'd like a space underneath before I have 'cat sex', after 'cat sex' and before 'cat age'

     

    Also I changed the textarea to text, thanks. How do I now get a space between 'cat name' and the box?

     

    Many thanks!

     

    Kind regards

  • Profile Image

    Answered by testbens on June 10, 2016 at 11:26 AM

    In order to adjust the space between the fields vertically, you need to increase the bottom margin of each field. Please go to the Configurable List wizard again and click the 'Custom CSS' tab.

    Please insert this CSS code: 

    td.col1, td.col2, td.col3, td.col4, td.col5, td.col6, td.col7, td.col8 {

    margin-bottom: 10px !important;

    }

    If you want to increase the space between the label Cat Name and the text box, please add this CSS code:

    td.col1:before {

    margin-right: 20px !important;

    }

     

    I hope that works. 

     

  • Profile Image

    Answered by tabukpaws on June 10, 2016 at 11:55 AM

    Hi testbens

     

    I added the margin-bottom: 10px !important 

     

    but where shall I add the other line?

     

    Here's what I have, I butchered it from the original code I copy and pasted. It's no doubt very ugly! :)

     

    .checkbox, .radio {

     

    margin: 6px 0;

     

    min-width: 70px;

     

    }

     

    .d {

     

    display:none;

    }

     

    .col1 [type="text"] {

     

     

     

    }

     

     

     

     

    tr {

     

    display: block;

     

    }

     

    td.col1 {

     

        display: block;

     

        position: relative;

     

       

     

    }

    td.col2 {

     

        display: block;

     

        position: left;

     

       

    }

     

    td.col3 {

     

        display: block;

     

        position: left;

     

     

     

    }

    td.col4 {

     

        display: block;

     

        position: left;

     

       

     

    }

     

     

     

    td.col5 {

     

        display: block;

     

        position: left;

     

        

     

    }

     

     

     

    td.col6 {

     

        display: block;

     

        position: left;

     

     

     

    }

     

     

     

    td.col7 {

     

        display: block;

     

        position: left;

     

     

     

    }

     

     

     

    th {

     

        display: none;

     

    }

     

    .col1:before, .col2:before, .col3:before, .col4:before, .col5:before, .col5:before, .col6:before, .col7:before .col8:before .col9:before{

     margin-bottom: 10px !important;

        font-weight: bold;

     

    }

     

    td.col1:before {

     

        content:"Cat Name";

        font-weight: bold;

    }

     

    td.col2:before {

     

        content:"Cat Sex";

        font-weight: bold;

    }

     

    td.col3:before {

     

        content:"Cat Age";

        font-weight: bold;

    }

     

    td.col4:before {

     

        content:"How long have you had the cat?";

        font-weight: bold;

    display: block;

     

    }

     

    td.col5:before {

     

        content:"Where did you get the cat from?";

        font-weight: bold;

    display: block;

     

    }

     

    td.col6:before {

     

        content:"Do you need vaccinations?";

        font-weight: bold;

    display: block;

     

    }

     

    td.col7:before {

     

        content:"Do you need a microchip?";

        font-weight: bold;

    display: block;

     

    }

     

    td.col8:before {

     

        content:"Is the cat friendly?";

        font-weight: bold;

    display: block;

     

    }

     

    td.col9:before {

     

        content:"Does the cat need to be trapped?";

        font-weight: bold;

    display: block;

     

    }

     

    Thanks once again!

  • Profile Image

    Answered by testbens on June 10, 2016 at 12:34 PM

    Please paste this whole CSS code (highlighted in blue) in the widget. You can just put it at the top of your codes. 

    td.col1, td.col2, td.col3, td.col4, td.col5, td.col6, td.col7, td.col8 {

    margin-bottom: 10px !important;

    }

    td.col1:before {

    margin-right: 20px !important;

    }

    Here's a screenshot:

    I hope this helps. Cheers!