Why is this embedded form forced into a single column?

I am creating a site for a friend who is a wedding planner, and I am embedding a contact form from a site she uses called Aisle Planner. When I test the embed code in VS Code it has two columns like the attached screenshot. However, in webflow it is condensed into one column. Does anyone know a way to prevent this from happening?

Issue number two is that I thought I would be able to style the labels, input boxes etc. by adding CSS, but that doesn’t work even with !important. I suppose because the CSS that is part of the embedded code is loading afterwards. Does anyone know of a fix for this? Thank you in advance!

Here is my site Read-Only: Webflow - BBE Form Test

Published site: https://bbe-form-test.webflow.io/

1 Like

Hi @foundationjosh the simple answer is that component doesn’t have enough space to show two columns and that’s why is switching two elements under each other as they will be shown on mobile. When you delete huge image on the left side it will display 2 columns as expected.

Hi @Stan, I really appreciate the response. I had tried that before, but it looks like I just needed to also set the width of the html embed element to 100%.

Any ideas about the styling?

Thank you!

hi @foundationjosh you need to check form in DevTools to see what is rendered in DOM and then style (overwrite) the way you need. I have found that form will transform to one column on tablet width (cca 768px) so you need change this behaviour. I was checking the form provider website (Aisle Planner) but I didn’t find any API documentation provided.

There should be at least some articles about how to style their embed form. So check again if you will find any documentation to help you out (I have checked their site just briefly) otherwise it is on your skills to mangle style they provided.

Sorry I cant help further as mangle their form behaviour without any documentation will be time consuming mean write custom media-queries.

If you do not have coding experience I will recommend rid of image from side (for now) and If this image have to be there just place it on top.

Hi @Stan, thank you so much for taking the time to get back to me! I’ll see what I can figure out.

1 Like