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

    Design Jotform similiar to form on a website

    Asked by Bilal on April 26, 2016 at 10:26 AM

    I want to make a Jotform form exactly like this:

    http://www.getbizsuccess.com/hum/#contact

     

    I want to be able to just put that javascript code from jotform to my website and it should like the current for. Can you guide me how to do that?

     

    Thanks

    Page URL:
    http://www.getbizsuccess.com/hum/#contact

    design form style form copy form
  • Profile Image
    JotForm Support

    Answered by BDAVID on April 26, 2016 at 11:39 AM

    You can clone the form, but it will not bring you the style, only the fields: https://www.jotform.com/help/42-How-to-Clone-an-Existing-Form-from-a-URL 

    However, you can further customize it using the form designer tool: https://www.jotform.com/help/300-Form-Designer-Tutorial-Let-s-create-fantastic-forms- 

    On regards of adding or injecting JavaScript code to your form, it is not possible to do it in the builder, for that, you will have to download the full source code of your form, and add the script there: https://www.jotform.com/help/104-How-to-get-the-Full-Source-Code-of-your-Form 

    Let us know if you have more questions, we will be glad to assist you.

  • Profile Image

    Answered by emailc123 on April 26, 2016 at 11:48 AM

    So how do I do so that the form you see on my website is basically a Jotform?

  • Profile Image
    JotForm Support

    Answered by BDAVID on April 26, 2016 at 12:35 PM

    You need to basically create it from the scratch, and customize it by using the Designer tool, and injecting custom CSS code to accomplish the desired design, you might need to hire  designer for that purpose.

    I have gone ahead and created the form similar to the one in that website(similar not the same), here it is: https://form.jotform.co/61164126572856 

     

    If you like it, you can clone it in your account: http://www.jotform.com/help/42-How-to-Clone-an-Existing-Form-from-a-URL, and if you need to further customization, you can ask us for help, we will do our best to accomplish the desired design in our free time.

  • Profile Image

    Answered by emailc123 on April 26, 2016 at 12:43 PM

    That looks good but I want transparent background because the background is in my website already. There is another thing on that form that is when you click any area to type it shows weird outer boundary. Just click on the any input are and see it for yourself.

  • Profile Image
    JotForm Support

    Answered by KadeJM on April 26, 2016 at 01:59 PM

    Okay thank you for the update about this.

    When you mention the "weird outer boundary" do you maybe mean the highlight effect?

    Please confirm or correct me.

  • Profile Image

    Answered by emailc123 on April 26, 2016 at 02:50 PM

    Yes you are absolutely right. Can you remove that?

  • Profile Image
    JotForm Support

    Answered by Mike on April 26, 2016 at 05:20 PM

    Here is David's form with removed highlight effect, transparent background and a few other style fixes.

    http://form.jotformpro.com/form/61166477447969

    You can clone it to your JotForm account.

    How to Clone an Existing Form from a URL

    Then, embed the JS form code to your web page.

    Adding a Form to a Web Page

  • Profile Image

    Answered by emailc123 on April 30, 2016 at 06:24 PM

    Thanks a lot. One last thing, the form size is small. How can I get the form in this size here:

    http://www.getbizsuccess.com/hum/

    Your form looks like this:

    http://www.getbizsuccess.com

    Also is there a way I can decrease form top margin?

    Thanks

  • Profile Image
    JotForm Support

    Answered by EltonCris on April 30, 2016 at 10:37 PM

    Inject this CSS codes to your form to remove the top margin.

    .jotform-form {

        padding: 0;

    }

    -

    If you want to increase the form width, you can do it in the form designer under form layout. I check the form on your website and the form width is 1110px, which is also the width of the text area.

    Anyway, here's my modified version with that changes. Feel free to clone it in your account. I have corrected some CSS to make it fully mobile responsive.

    https://form.jotformpro.com/form/61208905251955

    Hope this helps!

  • Profile Image

    Answered by emailc123 on May 01, 2016 at 04:42 PM

    Thanks a lot. One last thing. Do you know how do I make the form load if someone scroll down to contact section? I don't want the form to be loaded once the page is loading to increase page speed. If somebody scroll down to contact section then the form should load.

    The reason because without the form my page loads in under a second. With the form it loads in more then 2 seconds.

    Thanks in advance.

  • Profile Image
    JotForm Support

    Answered by EltonCris on May 01, 2016 at 06:12 PM

    @emailc123 

    We will answer that question here https://www.jotform.com/answers/830415.