How to center a wbv Standard donation form?

Candy Reichert

I would like to add coding along with the html for the NXT donation form so the form lays Centered on the page.
Can someone share how to do that?

Vote for this in the Idea Bank:

Thank you for submitting your idea:RENXT-I-7492 Add Justification options to NXT donation form Javascript When putting the JavaScript for NXT Donation forms on my webpage, it automatically Left justifies the whole thing. I need get my IT department to add Script for css so the form is centered on the page. Please add the necessary coding to be included along with the Javascript so the NXT donation form will lay Centered on the page, within the section. Thank you,

View idea

Christine Robertson

@Candy Reichert Based on what you're saying, I'm not sure if you would do this in RE NXT or if it is done by the person who embeds the Java script into your webpage.

Candy Reichert

@Christine Robertson Thanks. I figured it out. I had my IT give me the Script to center the donation form. Not sure why BB doesn't include the ability to inlcude this with the NXT forms. the Online Express forms center themselves and don't require extra css coding

Christine Robertson

@Candy Reichert Glad you were able to get this fixed at least!!

Austen Brown

@Candy Reichert - I encourage you to visit the RE NXT Idea Bank and make sure this is represented. BB Developers look to the idea banks for areas to improve within the system.

Samantha McGuin

@Candy Reichert

Hi Candy,

If you're embedding the form on your website the form is automatically centered in the container you put it in. As you've found, there are some things your web developer can do to adjust the container itself within your web page template.

The elements within the form are all left aligned.

If you have more specifics about what you're looking to achieve definitely post them here or the suggestion of adding to the Ideas Bank is a great one as well!

Samantha McGuin
Principal Product Manager
Blackbaud

Candy Reichert

@Samantha McGuin, @Austen Brown
On our website I have to add the Donation Form javascript directly into the Source Code. This means any extra coding must be included with it.

I have added the suggestion into the RE NXT Ideas area for Donation Forms. Thank you for all your help.

Samantha McGuin

@Candy Reichert can you share a link to your donation form (here or email to me at samantha.mcguin@blackbaud.com.) I'd love to take a closer look at your exact scenario within your webpage!

Thanks!

Candy Reichert

Blackbaud is watching Idea bank to see how many votes this get. Please vote for my idea.

Here is the style code that I include with my donation form javascript to make it centered. When adding this make sure to change the donation form ID to match your donation form.

<style>

div#blackbaud-donation-form_0d570f76-xxxx-4c97-80d6-557d4ca87520 {

display: flex;

justify-content: center;

}

</style>

Hope this is helpful.