Removing the border of embedded form in Wordpress website

  • bridgerjones
    Asked on August 1, 2016 at 10:37 AM
    Hi, Can you tell us how you fixed it on the WordPress side? Thanks
  • Jan
    Replied on August 1, 2016 at 1:08 PM

    Please provide or share the URL of the webpage where the form is embedded so that we can take a look on how to remove the border. It could be within Wordpress or within JotForm.

    We'll wait for your reply. Thank you.

  • bridgerjones
    Replied on August 2, 2016 at 11:05 AM

    Hi Jan,

    Thanks. Here is the form on a webpage. As you can see, the form has ugly borders. I know that the form embeds nicely on other WordPress themes, and I cannot find how to solve the problem on the WordPress side with CSS.

    https://bridger-jones.com/

     

    Thanks,

     

  • Support_Management Jotform Support
    Replied on August 2, 2016 at 12:45 PM

    Thanks for that. I inspected how you installed the form on your website and found out you used the oEmbed method.

    Removing the border of embedded form in Wordpress website Image 1 Screenshot 40

    The iframe on oEmbed doesn't have the styling you would normally get when using our Embed Form Plugin instead.

    Compared with what I showed above, this is how the iframe will be rendered with the Embed Form plugin:

    Removing the border of embedded form in Wordpress website Image 2 Screenshot 51

    You'll notice that it automatically removes the borders for you, and added some nice styling to the iframe as well so it won't look odd on your website.

    You can get the plugin from this page https://wordpress.org/plugins/embed-form/ or just follow our quick guide on how to install it (and use it) here [GUIDE: Embed-JotForm-in-Wordpress-using-the-Embed-Form-Plugin

    To sum it up, here's how you will use it - Just go to the page/post where you want the form to appear > click the PENCIL icon > select your form from the list > Update the page/post and that's it :)

    Removing the border of embedded form in Wordpress website Image 3 Screenshot 62

    Please give it a spin and let us know how it goes. If you're still seeing the borders even after using the Embed Form plugin, don't hesitate to get back to us.

  • bridgerjones
    Replied on August 2, 2016 at 12:48 PM

    Hi Jim R,

    Thanks,

    I am using wordpress.com so I cannot use plugins. I used the embed code specified for wordpress.com.

     

    Any thoughts?

     

  • BJoanna
    Replied on August 2, 2016 at 3:15 PM

    Can you please try to re-embed your form with iFrame code. Inside of this guide you can find how to get iFrame code of your form: https://www.jotform.com/help/148-Getting-the-form-iFrame-code 

  • bridgerjones
    Replied on August 2, 2016 at 11:48 PM

    Many thanks for your emails guys,

    This piece of css worked:

    .embed-jotform iframe {
    border: 0 !important;
    }

    Fantastic support! :-)