Why is Embed different from Source?

  • Bakamoo
    Asked on July 15, 2015 at 10:50 AM

    3. Why is Embed different from Source? No personal CSS styles have been applied.

    Embed (secure) - http://mphrealty.com/jot/wab.php

    Source - http://mphrealty.com/jot/wab2.php

  • KadeJM
    Replied on July 15, 2015 at 11:23 AM

    The source from the formbuilder toolbar is just a standardized JS Script to simplify embedding your form quickly onto a site with everything else hosted here with us on JotForm and it is the most common method of embedding a form onto a website.

    The alternative to that is the various Embed Options which offer different ways to embed your form depending on where you want to embed it as some work better than others depending on the webhost and also if you have existing scripts running.

    Now if you meant the form's full source code then that is different as it is more intended for embedding everything from your form onto your website mainly for enhancements such as customizations you'd like to make to it outside of JotForm.

    Additionally, since you have mentioned CSS I would like to point out that we do offer two ways to customize your form. You can inject css as mentioned in this guide https://www.jotform.com/help/117-How-to-Inject-Custom-CSS-Codes or there is also adding it to your forms through our form designer found here https://www.jotform.com/form-designer.

  • Bakamoo
    Replied on July 15, 2015 at 11:43 AM

    Thanks kade, I found the answer actually on a previous post. Was expecting a different answer.

    The wab.php is the full source (embed)

    wab2.php is using the shortcut link (source)

    Main difference is that wab2.php is inside an iframe which caused this to center the form in the website.

  • Ashwin JotForm Support
    Replied on July 15, 2015 at 1:18 PM

    Hello Bakamoo,

    I am not sure if you are missing some code including css code in "wab.php" page. If you are not missing any code the look & feel of your embedded form (source or script or iframe) will be same.

    In your embedded form, the background color of the form collapse is not being displayed. Please check the screenshot below:

    Why is Embed different from Source? Image 1 Screenshot 20

     

    Can you please download your form's full source code and use it in your webpage and see if that works fine. The following guide should help how to grab your form's full source code:  http://www.jotform.com/help/104-How-to-get-the-Full-Source-Code-of-your-Form 

    Thank you!

  • Bakamoo
    Replied on July 15, 2015 at 9:08 PM

    Oh sorry, I was editing my forms while this was unanswered yet. It is more of why the wab page is not-centered as opposed to the wab2 page which is centered.

     

    WAB

    Why is Embed different from Source? Image 1 Screenshot 30

     

     

     

     

    WAB2 

    Why is Embed different from Source? Image 2 Screenshot 41

  • Ashwin JotForm Support
    Replied on July 16, 2015 at 12:10 AM

    Hello Bakamoo,

    I do see the issue now. There seems to be some issue with form cover when the form is embedded with source code. But it seems to work as expected when embedded with form's full source code including .cs & .js files.

    Let me do further tests and get back to you on this.

    Thank you! 

  • Bakamoo
    Replied on July 17, 2015 at 9:20 AM

    Ok, please do note that I added a new page. http://mphrealty.com/jot/wab3.php

     

    This one is generated by clicking embed form -> source -> here. It also does not center align.

    Why is Embed different from Source? Image 1 Screenshot 20 

  • Mike_G JotForm Support
    Replied on July 17, 2015 at 12:14 PM

    I have done some testing and here's what I found out. 

    First the web page that has the Form's Source Code: http://mphrealty.com/jot/wab.php

    Why is Embed different from Source? Image 1 Screenshot 100

    I have inspected it and here's what I have found out: 

    Why is Embed different from Source? Image 2 Screenshot 111

    The Form element holds the form. This is the same with the additional website you have provided: http://mphrealty.com/jot/wab3.php

    Why is Embed different from Source? Image 3 Screenshot 122

    Why is Embed different from Source? Image 4 Screenshot 133

    As for the website that has the Embedded script: http://mphrealty.com/jot/wab2.php

    Why is Embed different from Source? Image 5 Screenshot 144

    I have inspected it and here's what I found out. 

    Why is Embed different from Source? Image 6 Screenshot 155

    Having all above mentioned, we can now refer to this website: http://www.w3schools.com/tags/att_iframe_align.asp

    Is says there that:

    Why is Embed different from Source? Image 7 Screenshot 166

    And it is stated on this reference: http://www.w3schools.com/html/html_blocks.asp

    that:

    Why is Embed different from Source? Image 8 Screenshot 177

    and, on the other hand, 

    Why is Embed different from Source? Image 9 Screenshot 188

    I hope this helps. Let us know if you need any further assistance. Thank you.

  • Bakamoo
    Replied on July 17, 2015 at 10:32 PM

    Alright, thanks a lot!

  • Ashwin JotForm Support
    Replied on July 18, 2015 at 2:30 AM

    Hello Bakamoo,

    On behalf of my colleague, you are welcome.

    Do get back to us if you have any questions.

    Thank you!