setting height and width values to embed the form on Xara

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.

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.

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

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

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. 

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

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.

HI

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

kish

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