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

    Facebook embed problem

    Asked by remaxmychoice on August 10, 2015 at 07:53 AM

    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.

    Page URL:
    http://form.jotform.me/form/52211881946458

    problem facebook embed JotForm checkbox publish label
  • Profile Image
    JotForm Support

    Answered by Charlie on August 10, 2015 at 11:23 AM

    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.

  • Profile Image

    Answered by remaxmychoice on August 11, 2015 at 06:28 AM

    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.

  • Profile Image
    JotForm Support

    Answered by Charlie on August 11, 2015 at 09:06 AM

    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.

  • Profile Image

    Answered by remaxmychoice on August 11, 2015 at 09:53 AM

    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.

  • Profile Image

    Answered by remaxmychoice on August 11, 2015 at 10:13 AM

    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;

  • Profile Image
    JotForm Support

    Answered by Charlie on August 11, 2015 at 11:52 AM

    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.

  • Profile Image

    Answered by eldare1 on August 11, 2015 at 05:01 PM

    when i try to change to https:// and my background images is gone on designer mode, and same results on facebook and preview page.

    I wonder if there is a live example that someone used an external image and embed it on facebook.

    do you have another ideas to make it work? or maybe any chance the support team can test it the integration with external background and facebook?

     

    Thanks!

  • Profile Image
    JotForm Support

    Answered by jonathan on August 11, 2015 at 09:11 PM

    @ eldare1

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

    Thanks.