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

    How can we duplicate the form style and functionality of some form?

    Asked by give2kids on April 14, 2016 at 12:39 PM

    Hello,

    Here is my form so far:

    https://form.jotform.com/61017766317153

    I would like to duplicate the look and function of this form...

    http://www.kars4kids.org/

    ...in these two specific ways:

    1. Make the text and drop-down fields laid-out
    as in the Kars4Kids form (adjacent and neater looking).

    2.
    When a person clicks on the "Donate" button, I would like
    the form to change into another form, which includes the
    name, address, email address and phone fields (if you test the 
    Kars form, you will see what I mean).

    Thank you in advance for any help / directions you can give me to
    accomplish the above.

    Alex

    Page URL:
    https://form.jotform.com/61017766317153

    clone clone form duplicate form
  • Profile Image
    JotForm Support

    Answered by EltonCris on April 14, 2016 at 01:59 PM

    1. Inject this CSS codes to your form, this should expand and align them properly.

    .form-col-1,

    .form-col-2,

    .form-col-3{

        width:33.3%;

    }

    .form-line-column .form-textbox,

    .form-line-column .form-dropdown{

        width: 100% !important;

        padding:6px 8px;

        box-sizing:border-box;

            box-shadow: inset 0 1px 1px rgba(0,0,0,0.075);

        border:1px solid #ccc;

    }

    .form-input-wide{

        width:100% !important;

    }

    .form-submit-button {

        box-shadow: none;

     

    }

    Guide: https://www.jotform.com/help/117-How-to-Inject-Custom-CSS-Codes (paste it at the bottom part if you have existing CSS codes in your form)

    Result:

    2. Clicking the submit button will submit the form and we cannot change that. If what you want is to move to the next page with another set of fields, I suggest to show the next button in your pagebreak field OR advise your users to use the tabs.

    If you need further assistance, let us know.

  • Profile Image

    Answered by give2kids on April 18, 2016 at 01:11 PM

    Hello EltonCris,  Thank you for doing the above.

  • Profile Image

    Answered by Ben on April 18, 2016 at 03:06 PM

    In my colleague's name you are welcome.

    Now to make the form look like that you should open your form:

    https://form.jotform.com/61017766317153

    and follow the steps mentioned by my colleague. As you do, you will have the form looking as he mentioned it in the email.

    This is the link to the thread if you wish to check it out: https://www.jotform.com/answers/818572

    Of course, let us know if you have any questions and we would be happy to answer them.

  • Profile Image

    Answered by give2kids on April 18, 2016 at 03:25 PM

    Hello Ben, Thanks for your response.

    Unfortunately, this didn't work for me.

    I injected CSS exactly as described, but boxes are still in various sizes:

    https://form.jotform.com/61017766317153

    Am I missing something? Please advise.

  • Profile Image

    Answered by Ben on April 18, 2016 at 04:52 PM

    I took a look at your form, but I see that you have made additional changes to it - which is why it does not look the same as on the image screenshot of my colleague.

    If you add this CSS:

    [data-type="control_fullname"], [data-type="control_phone"] {
        width: 48%;
    }
    [data-type="control_fullname"] .form-sub-label-container, [data-type="control_phone"] .form-sub-label-container {
        width: 50%;
    }
    #id_35, #id_34 {
        width: 50%;
    }
    #id_24, #id_3, #id_26 {
        width: 33%;
    }
    #id_38, #id_40 {
        width: 50%;
    }

    to the current form, it will look like this:

    You can add the CSS to your form by following these steps: Inject Custom CSS Codes

  • Profile Image

    Answered by give2kids on April 18, 2016 at 05:15 PM

    Thanks again Ben.

    Yes I made changes, but that was after discovering the CSS was not working.

    Anyway, I will move forward from here.

    I appreciate your help.

     

  • Profile Image
    JotForm Support

    Answered by Kevin_G on April 18, 2016 at 06:34 PM

    I checked your form and noticed that you have not added the code provided by Ben, I went ahead and cloned your form, injected the code and I noticed that the result is not the same like the one on the screenshot on my colleague's reply above, this is because seems like you have removed and re-added a field to your form, or the ID is not correct, please try with this CSS code: 

    [data-type="control_fullname"], [data-type="control_phone"] {

        width: 48%;

    }

    [data-type="control_fullname"] .form-sub-label-container, [data-type="control_phone"] .form-sub-label-container {

        width: 50%;

    }

    #id_35, #id_34, #id_43 {

        width: 50%;

    }

    #id_24, #id_3, #id_26 {

        width: 33%;

    }

    #id_38, #id_40 {

        width: 50%;

    }

     This should display your form as you want, here is the link to my cloned form where this code was applied: https://form.jotform.com/61087305969970

     

  • Profile Image

    Answered by give2kids on April 18, 2016 at 07:45 PM

    Hello Keven,

    Thanks for your assistance with this.

    On another matter: I'm not sure what I did to the tabs -- they no longer work correctly (even in your cloned version you provided).

    I already opened another ticket for that issue.

  • Profile Image
    JotForm Support

    Answered by Chriistian on April 18, 2016 at 11:08 PM

    On behalf of my colleagues, you are most welcome. I understand that you have already opened another thread regarding the issue with the tabs. It appears that my colleague has responded to that thread so you can check that thread by following this link: https://www.jotform.com/answers/821492

    If you have any other concerns, feel free to contact us again. Cheers. :)