Facebook embed problem

hello jotform,

just start to use jotform and its great and simple!

I have problem when I try to publish my form in facebook.

when I design the form on jotform designer its look like this:

jotform-designer

and after I publish it on facebook its look like this:

facebook

this is the code i use:

.form-textbox {
    text-align : right;
    color : red;
}

.form-line {

}

#id_5 {

}

.form-section.page-section {

}

.form-all {
    background : url('http://oi60.tinypic.com/izp9ox.jpg') no-repeat;
    float : left;
    padding-left : 49px;
    padding-top : 0px !important;
    padding-bottom : 0px;
    width : 480px;
    height : 578px;
}

#id_3 {

}

.form-checkbox {
    margin-top : 8px;
    margin-left : 5px;
    margin-right : 5px;
    float : right;
}

.form-checkbox-item label {
    margin-top : 1px;
    margin-left : -63px;
    margin-right : 5px;
    float : right;
}

.form-checkbox-item {
    float : right;
}

.form-buttons-wrapper {

}

.form-submit-button {
    margin-left : -53px;
}

#52211881946458 div.form-all {

}

#input_2 {

}

Why is not show the same results on facebook, how can i fix it??

Thanks.

Hi,

It seems like you have some conflict with your styling which causes the problem.

I cloned your form for testing purposes, you can check it here: http://form.jotformpro.com/form/52214154275954. Here's a guide on how to clone my clone form: https://www.jotform.com/help/42-How-to-Clone-an-Existing-Form-from-a-URL.

Check my custom CSS code there and see if embedding it to Facebook will display a better layout.

Do let us know if that works.

Thanks for quick respond,

I cloned this form and still same results. now its just show me a white form with all text label

with no design.

http://oi60.tinypic.com/6593eh.jpg

there is any way to use iframe for this form in facebook?

or maybe anoter solution?

Thanks.

Hi again,

It looks more like a design and formatting issue.

You could try following this guide: https://www.jotform.com/help/82-Adding-Form-to-Facebook-Custom-iFrame-App-. See if that one works better.

We'll wait for you response.

same results..

I tried using Iframe(static html) with my original form and your clone form.

with my form it show the background

and the clone its only show a white page

original form

http://oi62.tinypic.com/9a5xfs.jpg

clone form

http://oi61.tinypic.com/2ry4xhw.jpg

have you ever seen this problem before? any chance to fix it ?

its great if i can keep the form with the design I made.

Thanks.

trying to do another test with another form..

on designer mode:

http://oi59.tinypic.com/2qapo2v.jpg

on facebook:

http://oi62.tinypic.com/rjebdk.jpg

its look better then before, its look like facebook or the designer cant embed the external background from another website.

on designer mode i can see the envelop, and on preview and facebook its gone.

    background : url('https://cms.jotform.com/uploads/image_upload/image_upload/global/6332_bg_envelope.png') no-repeat;

It seems like the images and other resources were not showing because they are not using https:// protocol.

Could you try changing the URLs in  your CSS from http:// to https://

.form-all {

background : url('https://oi60.tinypic.com/izp9ox.jpg') no-repeat;

}

If you have other links to your images, just changed the URL protocol (https://). That should work.

Let us know if that resolves the problem.

Thanks!

@ eldare1

We will resolve your issue here http://www.jotform.com/answers/635820

Thanks.