Add a graphic border to the bottom of each page

  • Profile Image
    purocleanforms
    Asked on July 30, 2019 at 02:55 PM

    Hi I have a background image that I would like to add to the bottom of each page of my form. Is this possible? I've attached the graphic

    Screenshot
  • Profile Image
    JohnRex
    Answered on July 30, 2019 at 03:13 PM

    You can do it by manually adding an Image field that will display the said picture. And then create duplicates of it on each page. Here's a quick demo:

    1564513830graphic bar.gif

  • Profile Image
    purocleanforms
    Answered on July 30, 2019 at 03:30 PM

    The graphic shows up above the next and previous buttons. I would like it to act as a border at the very bottom of each page.

  • Profile Image
    JohnRex
    Answered on July 30, 2019 at 04:32 PM

    Unfortunately, there's no way we can use an image as a bottom border. However, we can use it as a border for a whole page. 

    Please use the code below and inject it to your form:

    .form-section {

        border-width : 10px;

        border-style : solid;

        border-image : url(https://i.imgur.com/Zk3JenX.png) 25% round;

    }

    Here's how it looks:

    1564518660border.PNG


  • Profile Image
    purocleanforms
    Answered on July 30, 2019 at 05:12 PM

    Thanks for leading me in the right direction! 

    What you provided wouldn't work because the border was being applied to the entire page.

     

    I actually got it by using the following... 

    .page-section {

        padding-bottom : 3px;

        border-bottom-right-radius: 4px;

        border-bottom-left-radius: 4px;

        background : url(PATH TO IMAGE) no-repeat 0% 100%;

    }

    This is what it looks like.

    1564668375form-footer.png