Embed form error - 'submit' button off screen

API & Customization Ask Developers
1

Hi, I have embedded a form onto our Wordpress website.

It all works perfectly, but for some reason the 'submit' button and 'Powered by Knack' text is displayed alongside the side of the form rather that at the bottom, meaning users have to fill in the form then scroll back up to click submit.

The screenshot shows what I mean.

Any suggestions?

Thanks

Michael

2

Genius! Worked perfectly - thanks so much Tim!

3

Those two elements are supposed to be at the bottom of the form, correct?

In the inspector, it works by adding 'clear: both;' to kn-submit class.

Try to add that in your Builder. I have no idea if it will work.

Go to Settings Gear > API & Code > CSS

Paste this and Save CSS.

.kn-submit {
clear: both;
}

4

Sorry sharing the link would have been the easiest thing in the first place!

https://www.glasgowdisabledscouts.org/training2019/

Many thanks

Michael

5

Is there a live page to look at?

Would need to see the Styles section. Would be a lot easier live.

See right side of my screenshot.

eEpXPOSlWmRv8zg-PubsCw.png993×1140

6

Thanks very much for replying Tim.

I guessed it maybe had something to do with the CSS on my website too, but I couldn't figure out what - I'm not an expert at this I'm afraid!

I've attached a screenshot of what the inspector brings up - any clues in there that I should be doing something with?

Thanks again

Michael

oGcvANxu6q_PtWFGvOnDww.png898×577

7

I'm guessing the CSS of your website is overriding something in Knack. I would use the inspector on the browser to check what is dictating the position of those elements. Though I'm not sure how you could get the Knack CSS to take last priority and override the website.

I would also check the form not embedded, just on its own and make your screen the same size as it appears on your site. If the problem exists there, then it is something funky with Knack. In that case, you could override it with custom CSS in your Knack Builder.