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

    jotform within bootstrap

    Asked by robinowsley on May 21, 2014 at 11:45 AM

     

    Hi there.  I'm redesigning a site using Twitter's Bootstrap framework, to make it responsive.

     

    So now I need the jotforms on that site to look like its Bootstrap form elements and be responsive as well.

     

    I've been looking in the help files and on the forum, and as far as I've been able to determine thus far, the one and only method of doing this would be to:

     

    1.  leave the bootstrap scripts in the head and/or footer of the page as required, just like the other pages on the site

    2.  embed my form into that page situation using source code

    3.  use "custom CSS codes" to insert my Bootstrap form elements, as described here:

    http://www.jotform.com/help/117-How-to-Inject-Custom-CSS-Codes

     

    So, before I start wading around in all of that, I thought I'd just ask first, are those assumptions correct, and will that actually work?

     

    Or is there a better/more elegant/less code-intensive/easier way to get this done?

     

    Any hints or tips provided now instead of later would make my life a lot easier.  Thanks!

     

    p.s.  I actually haven't started yet, was hoping to get tips BEFORE messing about too long with this, so there is no URL to be provided.  Thanks.

    JotForm source elements site
  • Profile Image
    JotForm Support

    Answered by EltonCris on May 21, 2014 at 01:16 PM

    Hi,

    Thank you for contacting us.

    Yes, those assumptions are correct. You can use your form source code so you can integrate it with Bootstrap.

    However, if what you want is customize the fields design and make the form mobile responsive, you can do it with CSS Inject alone. Guide: http://www.jotform.com/help/117-How-to-Inject-Custom-CSS-Codes

    You can clone any of these responsive forms available in our form templates as your reference. http://www.jotform.com/form-templates/search/responsive

    Let us know should you need further assistance.

    Regards!

  • Profile Image

    Answered by robinowsley on May 21, 2014 at 01:38 PM

    Thanks for your response.

     

    However, I'm afraid I'm not understanding exactly what you meant by, "However, if what you want is customize the fields design and make the form mobile responsive, you can do it with CSS Inject alone."  I thought that was what I was already imagining I'd need to do in my original question, when I also referenced that very same help URL.

     

    Basically, I just don't understand the distinction you're making there, when you say, "However . . . you can do it with CSS inject alone."  Alone meaning . . .without what else, exactly?

     

    If you could clarify that, that'd be very helpful, thanks!

  • Profile Image
    JotForm Support

    Answered by EltonCris on May 21, 2014 at 02:24 PM

    Thanks for your reply.

    That's right, they are actually similar but in your guide you are using your form source code. This also means you are embedding the form source code on your page. Later on, if you want to update your form fields let says you want to add more fields or delete fields on the form, you have to take your form source code again in the form builder and replace the customized form source code on your page which is a little bit hassle since any changes made on the form in the form builder will not automatically reflect on the embedded form if you're using form source code method.

    My suggestion is actually optional, this is if you don't want to use form source code embedding. If what you only want is to customize the form CSS to adapt bootstrap style, you can do it with CSS Inject alone. Just inject the custom CSS codes directly on your form and then you're good to go. You can then embed the form to your page afterwards using script embed code or iframe embed code. However, if you're going to utilize the bootstrap javascript like animations & transitions, you have to use form source code.

    Hope this clarifies a bit. Thanks! :)

  • Profile Image

    Answered by lozanno on August 11, 2014 at 11:55 PM

    Hi EltonCris., I have merged my bootstrap-landing page with a jotform form and works really smooth. Is this the correct practice? Or am I doing something wrong?

    For example the ajax error messages are not working, but truly I don't need them at this point.

    link: http://www.oceankeyproperties.com/landingpage/index.html

    Just looking for comments to enhance.
    Thank you as always.

  • Profile Image

    Answered by Zuuz on August 17, 2014 at 01:41 AM

    With regards to bootstrap, instead of trying to customize the CSS from your side. I think it would be advantageous for you to provide an API key that can be embedded into the The bootstrap framework. It's a hassle to come to Jot form and try to duplicate the bootstrap CSS. What people using bootstrap are really looking for, is someone to provide the PHP. Which is what you do beautifully. I know from personal experience trying to set up PHP with my web-host is a nightmare. What I really want, is to use the form styles provided by bootstrap classes. But I still need a simple way to make forms active without going through my hosting account.