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

    setting height and width values to embed the form on Xara

    Asked by kranai on February 17, 2016 at 12:58 PM
    3. I am also confused with size of the form. In Xara I have a placeholder where I paste the jotform code to display my form on my webpage. The placeholder has a size width and height. Now your form has a form width option but I cannot seem to see the form height option in Designer. Then in the iframe code I can see a iframe height but width=100%.  Can u please let me know how all these are connected? Each  time I paste the code on my webpage I don't seem to get it right either part of it is hidden and part can be seen. I have to adjust several times to get the full view. My question is do I have to match the placeholder size in Xara webpage to that of the iframe values or match to the frame values (as seen in designer option)  to get it right.
  • Profile Image
    JotForm Support

    Answered by david on February 17, 2016 at 04:45 PM

    If the forms width is set to 100% in the iFrame code, it will try to fit the width of the space you set in Xara.  Increasing the size of placeholder in Xara will increase the maximum space the form can take up.  The width can be set to a specific value, same as the height value in the iFrame code.  Instead of "100%", you would use a value like "800px".  You should be trying to match the the space for your placeholder to the width shown in the designer, and since the overall height is not shown in the designer, you would match the height of the placeholder to your iFrame height.

  • Profile Image

    Answered by kranai on February 17, 2016 at 08:56 PM

    Hi David

    Thanks for the clarification. I did what you suggested. I matched my Xara placeholder dimensions as follows: height of placeholder match with iframe height which is 539px. The width of my placeholder match the designer's form width which is 300px. So my Xara placeholder is 539x300.

    Next I copy the iframe code from the publish screen and pasted in my Xara placeholder. I also temporarily changed my form background in designer to cyan so that we can see the difference.

    It still doesn't work exactly what you say. If you were to go my production website

    www.insight-acad.com you will this form at the bottom of the page.

    Question:

    1. you will see the form fits the width accurately BUT the height of placeholder is 539px but height of actual form is shorter and that is why we see the cyan rectangle below. I need to get the exact height of the form (in yellow) so that I can size this to my placeholder. How to do this?

    2. The view you see of my form on my website is the same view you see in builder BUT this is not what I want. I want the view of my form on my website to be the same as shown in the designer. How do I get this view?

    The form in question is titled "Insight Academy Customer Loop".

    Appreciate your help. I want to sort this and understand this correctly so that I don't get this same problem of sizing when I create the next few forms.

    Best Rgds

    Kish

  • Profile Image

    Answered by kranai on February 17, 2016 at 09:13 PM

    Hi David

    Soon after submitting my reply above I noticed my form view in builder and in designer looks the same. At one point I had as I described to you in my earlier reply. Anyway my point is why is my final view of my form on my website different to what I see  in Builder or Designer? On my website the input field boxes are stretched causing to take additional lines.

    rgds

     

    kish

  • Profile Image
    JotForm Support

    Answered by BJoanna on February 18, 2016 at 06:17 AM

    Fields of your form are stretched, because theme of you form has CSS code that will make form to be responsive.

     

    @media CSS code that is added inside of theme of your form is changing style of your form, when form width is 480px or less. 

    If you set width of your iFrame code to bee 481px embedded form will look same as your standalone form. 

    Hope this will help. Let us know if you need further assistance. 

  • Profile Image

    Answered by kranai on February 18, 2016 at 07:40 AM

    Hi

     

    I changed the frame width to 481px in designer and also the place holder on web age in Xara to 481px. Now problem is resolved of the stretched input boxes, BUT you have this huge cyan border all around the form which I do not want. How do set the background frame size to be the same as the form (or may 3mm border all around)  than the form? If can get that then this form is done.

    Please see form in www.insight-acad.com

    rgds

    kish

  • Profile Image
    JotForm Support

    Answered by BJoanna on February 18, 2016 at 11:34 AM

    If I understood you correctly, you want to remove sky blue background of your form. You can do this inside of your form Designer. Open Color Scheme tab and inside Background dropdown menu scroll transparency all the way to the left. 

    After  you make this change your embedded form should look like this. 

    You can also add this CSS code to make your form transparent:

    .supernova {  

        background-color: transparent!important;

    }

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

    Hope this will help. Let us know if you need further assistance.

  • Profile Image

    Answered by kranai on February 18, 2016 at 12:15 PM

    HI

    I just changed the background to transparent in designer. Now I have just 2 minor adjustment to make on this form.

    1. Is there a way I can increase the font size of the labels (Full Name, Email and Phone Number) slightly without affecting the current look? Since there is so much space between the label and input boxes.

    2. the phone number input box currently allows 8 digits to be visible is there a way to increase the box width so that 10 digits are visible?

    3. The two red buttons submit and reset...shouldnt it have a mouse-over effect? meaning shouldn't it change colour when I place the cursor over it? It does when u view the form in builder but not my website? 

    You can see the changes I have made from website www.insight-acad.com

    Thanks alot

    kish

  • Profile Image
    JotForm Support

    Answered by david on February 18, 2016 at 01:18 PM

    Since your new requests are unrelated to the original, I have moved them to a thread of their own.  I will address the new request in the following thread shortly:

    http://www.jotform.com/answers/775664