Why part of the form was cut when integrated to an external site?

  • Profile Image
    craftlabph
    Asked on November 16, 2017 at 09:21 PM

    Hello,

    I integrated my form in my website. However, the date pop-up below in my form was cut and the hover message does not appear. Is there any way to fix it?

    1510885222screenshot.JPG

    Thanks!

  • Profile Image
    Nik_C
    Answered on November 17, 2017 at 01:26 AM

    I tested your form, but I wasn't able to replicate any issue with it: 

    1510899917Screen Shot 2017-11-17 at 7.26

    I tested on phone as well, and the form is not cut off.

    Are you still able to replicate this issue?

    Thank you!

  • Profile Image
    craftlabph
    Answered on November 17, 2017 at 03:26 AM

    Hello Nik_C, 

    I'm using my mobile phone right now. Here's a screenshot of my form straight from my website.

    https://www.craftlabph.com/pages/invitation-quotation-form

    1510907088Screenshot_2017-11-17-16-21-07


  • Profile Image
    Jim_R
    Answered on November 17, 2017 at 04:20 AM

    If that's the only page where you're having issues with, you can add a bit of margin to the last element on that page (which is the PAGE BREAK) to adjust the height of the form.

    Just inject the following CSS codes to your Form Builder:

    #cid_125 {

        margin-bottom: 70px;

    }

    Complete guide: How-to-Inject-Custom-CSS-Codes

    Result:

  • Profile Image
    craftlabph
    Answered on November 17, 2017 at 08:47 PM

    That worked, Jim_R! Thank you!

    While were at it, is there a way to adjust the margin in left and bottom side of the form? Just like the top and right side? Thanks again!

  • Profile Image
    Jim_R
    Answered on November 18, 2017 at 03:00 AM

    Glad that helped - If this should be applied to the entire form, use the following CSS codes:

    .form-all {

        margin: 10px auto !important;

    }

  • Profile Image
    craftlabph
    Answered on November 18, 2017 at 05:58 PM

    It worked! Thanks again, Jim_R!