Add a border to form

  • tcrocker
    Asked on July 30, 2017 at 5:11 PM

    Is there a way to add a border to a form? I don't want to change the page background. I just want a simple border around the form.

  • Jan
    Replied on July 30, 2017 at 5:52 PM

    I checked your web page and I can see that you already added a border to your form. However, the border is not showing if you decrease the width of the container. Please try the following steps:

    1. Insert the Mobile Responsive widget to your form. Here's a guide on How-to-Add-a-Widget-to-your-Form.

    Add a border to form Image 1 Screenshot 30

    2. Please inject this custom CSS code:

    @media screen and (max-width: 689px) {
    .jotform-form .form-all {
       width: 98% !important;
    }

    @media screen and (max-width: 767px) and (min-width: 480px) {
    .jotform-form .form-all {
       width: 98%; !important;
    }

    Here's a guide on How-to-Inject-Custom-CSS-Codes

    Here's the result:

    Add a border to form Image 2 Screenshot 41

    3. If the issue persists, please try to re-embed the form using the iFrame method. Here's a guide: https://www.jotform.com/help/148-Getting-the-form-iFrame-code.

     

     

    Hope that helps. Thank you.

  • tcrocker
    Replied on July 30, 2017 at 6:44 PM

    Many thanks for the prompt reply. Ive managed to get it working. Can you let me know how I can make it so that each input box is not pushed right up to the edge of the border. Thanks. 

  • jonathan
    Replied on July 30, 2017 at 7:30 PM

    You can fix that in the Advanced Designer>>> Form Layout

    Add a border to form Image 1 Screenshot 30

     

    set a number in the vertical and horizontal padding layout.

    Here is a comparison result.

    Add a border to form Image 2 Screenshot 41