Hatchbuck Form Design

  • Resolved nchorp

    (@nchorp)


    7 years, 11 months ago

    Hi, I appreciate your Hatchbuck WordPress plugin! It’s the only way I can use forms within my WordPress Jupiter site.

    My question is about changing the formatting of the form. When I insert the code for the simple form, there is a great deal of space at the bottom after the form. Because I do not know html, I’m at a loss for what to do to understand the code behind the form.

    It’s using iFrame for WP.

    <iframe frameborder=’0′ style=’width: 100%;’ src=’https://app.hatchbuck.com/OnlineForm/62775759741&#8242; scrolling=’auto’ onload=’this.height=screen.height;’></iframe>

    Is there an easy way to make the page content continue right after the form rather than having to scroll? I really want this form to be at the top of the page but can’t have all the blank space right after it.

    Here’s the page I’m referring to: https://www.corpfugees.com/5-step-practically-painless-business-plan-kit/

Viewing 4 replies - 1 through 4 (of 4 total)

  • Try using this iframe code instead:

    <iframe frameborder='0' style='width: 100%;' src='https://app.hatchbuck.com/OnlineForm/62775759741' scrolling='no' height='450px'></iframe>

    Those changes explicitly set the height to the size of your form and remove the scrolling.

    – Sam

    Thread Starter nchorp

    (@nchorp)

    Thanks very much!

    Any idea why this form won’t show up in mobile?

    It looks like there’s an issue with the way it’s embedded on the page. It’s inside the same <p> tag as the image, which is floated to the left. It’s actually existing in the padding of the container and has a width of 0 pixels:

    No width, only padding

    There’s no actual mobile responsiveness on the container, which causes some weird stuff in general at some screen sizes:

    Odd text wrapping

    You may need to create a new column on the page template itself to hold the form, or it might be simpler to just move the form beneath the image. This is sort of a template-specific issue, and general advice won’t be terribly helpful.

    You might just have to play around with the location of the form code. Sorry I don’t have anything more concrete regarding the problem. The form code itself isn’t what’s causing it though, so you should have all the necessary tools available to you in the page builder widget.

    Plugin Contributor Viktor Nagornyy

    (@viktorix)

    Thanks for jumping in Sam.

    Nancy, were you able to resolve this? I noticed the current form on your landing page is using Gravity Forms.

    I usually recommend using HTML/CSS option when embedding forms, it’s easier to work with on a WP site and the form can take on your theme’s styling (colors, fonts, etc.).

Viewing 4 replies - 1 through 4 (of 4 total)
  • The topic ‘Hatchbuck Form Design’ is closed to new replies.