Lost Formatting

Maria Galka · June 2014

The form (donation and event) loses its formatting when imbedded on agency website.

Matthew Garbarino · June 2014

Hi Maria. Can you give me a little more information or specific examples about what types of formatting are being lost? Since the forms are embedded on your website, they will inherit your sites styling.

Maria Galka · June 2014

It probably is an issue with our website, but I don't know how to overcome it. We are currently working on a new website, but I'd like to be able to use the forms on this one until then.

Here is a screen shot.

Brandon Granger · June 2014

Hi Maria,

If you add the following snippet of HTML just below your form, it will left align all of your form fields and give the form a little padding. Hopefully, that's help a lot.

<style>

#mongo-form {padding: 15px 15px 15px 25px;}

.BBFormFieldContainer {text-align: left;}

</style>

Maria Galka · June 2014

Thanks so much for your continued help. I would be tickled pink if my form looked like the one above on our website. Unfortunately, it doesn't. And my event form looks pretty sad as well. The code did help align the fields, but all the other formatting is lost, even buttons versus a list of suggested donations. Is there any snippet of code I can apply prior to the forms that will override whatever formatting issues our website is creating?

Brandon Granger · June 2014

Hey Maria,

One tweak to that code snipped above. You probably want to use "bbox-root" instead of "mongo-form" like this below:

<style>

#bbox-root {padding: 15px 15px 15px 25px;}

.BBFormFieldContainer {text-align: left;}

</style>

Regarding losing your formatting, you may want to have a colleague look at your form from their computer. I think something is going on with your browser as the screenshot above is from your actual website. ;-) I just tweak the code using Google Chrome Inspector.

Maria Galka · June 2014

You are right - looks just fine on someone else's. Thanks so much for your help.

Lars Carlson · June 2014

I'm also losing formatting as I try to embed the form on our site. I have selected a specific font in the editor in RE, rather than "inherited", and I see other elements changing such as border design. But the font size specifically is not working. I know our site uses CSS, and I assume it's something there. I also embed some forms from Adobe Forms Central however, and they format fine on our site. So apparently they have a way to strip out the CSS formatting to ensure things look as designed. Is there a way to do that for the OLX forms? Is the code you posted above designed to do that?

Lars

Brandon Granger · June 2014

Hi Lars,

The code posted above was specific to Maria's website. Let me do some investigation on your new Youth Haven donation form and I'll reach out soon.

BG

Lars Carlson · June 2014

Brandon Granger:
Hi Lars,

The code posted above was specific to Maria's website. Let me do some investigation on your new Youth Haven donation form and I'll reach out soon.

BG

Great. If you send me an email using my email on file with BB, I can send you a link where you can see the page in its test form. It's not live yet as we just signed up for OLX. Love to get this all figured out so we can get it up and running! Thanks for getting back to me.

Lost Formatting

Comments

Categories