How to have border showing in embedded form?

  • Profile Image
    staceyvaughan
    Asked on November 10, 2017 at 09:54 AM

    Hello! 

    I have a thin border around a form that I wanted to keep when added to my website but for some reason it seems to dissapear. Is there something I can do to keep the border when integrated on my site?

    Thanks!

    https://www.jotform.com/build/72917999901171

    https://www.rsvppaperco.com/pages/custom-holiday-cards

  • Profile Image
    Nik_C
    Answered on November 10, 2017 at 11:08 AM

    I was able to make it work in your form, this is what I did:

    1) I removed this code from your Custom CSS Field:

    1510329943Screen Shot 2017-11-10 at 5.07

    2) And I added this code to your Custom CSS Field:

    .form-section {

        outline : 1px solid black!important;

        outline-offset : 30px;

    }

    And that should work for you.

    1510330084Screen Shot 2017-11-10 at 5.11

    Let us know if that works for you.

    Thank you!

  • Profile Image
    staceyvaughan
    Answered on November 10, 2017 at 11:09 AM

    Thank you so very much for the help! One last question...is it possible to have the border offset a few pixels so it isn't right on top of the form? Thank you so much again!

  • Profile Image
    Nik_C
    Answered on November 10, 2017 at 11:35 AM

    You're welcome!

    That is actually related to div where the form is embedded. So to resolve, please insert this CSS into your website's CSS:

    .page-wrap {

        max-width: 1320px!important;

    }

    That should show the form properly according to tests I did.

    Let us know how it worked.

    Thank you!

  • Profile Image
    staceyvaughan
    Answered on November 10, 2017 at 12:02 PM

    Shoot for some reason I cannot get the line to show up! I amy have done something in the css...would you mind taking a look? Thank you so very much again for all the help!

  • Profile Image
    Nik_C
    Answered on November 10, 2017 at 12:18 PM

    I checked your website, but I don't see that the page-wrap class is set as I advised above. From your code, I understand you're embedding your form on Shopify? 

    So this guide might help: https://www.envision.io/blogs/ecommerce-pulse/28829889-how-to-edit-the-css-of-your-shopify-theme

    Let us know if you manage to make it work.

    Thank you!