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 to achieve a form design as shown on screenshot?

    Asked by wonda on August 06, 2015 at 02:40 PM

    Hi Jotform Support

    I was hoping you could help me I wish to design a simple design form but I need some expertise help.

    I have attached a screenshot.

    kind regards 

    Roy

    form url : https://secure.jotformeu.com/form/5217560

    Page URL:
    https://secure.jotformeu.com/form/52175600712346

    Screenshot
  • Profile Image

    Answered by Ben on August 06, 2015 at 03:43 PM

    You can achieve this by adding the following CSS code Roy:

    #id_1 {
        float: left;
        height: 64px;
        margin: 0;
        padding: 0;
        width: 245px;
    }
    li#id_2 {
        clear: none;
        float: left;
        margin: 0 !important;
        padding: 0;
        width: 30px;
    }
    div.form-buttons-wrapper {
        margin: 0 !important;
    }
    ul.form-section {
        height: 70px;
        width: 400px;
    }
    #id_1 > label {
        display: none;
    }
    #cid_1, #cid_1 input {
        box-sizing: border-box;
        height: 100%;
        margin: 0;
        padding: 0;
        width: 100%;
    }
    div.form-buttons-wrapper {
        left: -6px;
        margin: 0 !important;
        position: relative;
        width: 50px;
    }

    #cid_1, #cid_1 input {
        box-sizing: border-box;
        height: 100%;
        margin: 0;
        padding: 0;
        width: 100%;
    }
    #input_1 {
        background-color: #666390;
        border: medium none;
        border-radius: 0;
        position: relative;
        top: 1px;
    }

    The only part that is missing is the icon of the email to the left, which you should add to your form, and we can then help you align it with the rest of the elements, but this is how it should look after this code is added:

  • Profile Image

    Answered by wonda on August 06, 2015 at 04:04 PM
    Thank you very very much, I appreciate you help and speed
    ...
  • Profile Image

    Answered by Ben on August 06, 2015 at 04:16 PM

    You are welcome Roy and as mentioned, once you have the icon that should go there and if you need us to help you with it, just let us know and we would be happy to help you with the layout :)

  • Profile Image

    Answered by wonda on August 06, 2015 at 04:54 PM
    Hi: Ben not sure how to add the email icon?
    kind regards
    ...
  • Profile Image

    Answered by wonda on August 06, 2015 at 05:04 PM
    Hi I have embedded the code but it change the navigation bar height.😵
    http://betatests.weebly.com/
    Kind regards
    ...
  • Profile Image
    JotForm Support

    Answered by BDAVID on August 06, 2015 at 06:53 PM

    Please make sure to reduce the iframe height and width to adjust it:

     

  • Profile Image

    Answered by wonda on August 06, 2015 at 07:13 PM

    Hi BDavid the iframe code was auto generated it not part of the html code if know what I mean, I thinking is the code generated due to jotform=form (height and width).

     

    Kind Regards

  • Profile Image
    JotForm Support

    Answered by Charlie on August 07, 2015 at 03:08 AM

    To confirm, the embed code was generated by us, is that correct? If you are using the iFrame embed code, please check our guide here: https://www.jotform.com/help/148-Getting-the-Form-iFrame-Code. Please do take note that when you are embedding using the iFrame, you'll need to set a specific height in "px". Which means the height of your form will be fixed.

    Here's a guide on how to embed your form to Weebly: https://www.jotform.com/help/215-Adding-a-Form-to-Weebly 

    Let us know if that works.