How to center a wbv Standard donation form?

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

Comments

  • Christine Robertson
    Christine Robertson Community All-Star
    Kudos 5 Name Dropper Participant First Anniversary

    @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.

  • @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
    Christine Robertson Community All-Star
    Kudos 5 Name Dropper Participant First Anniversary

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

  • Austen Brown
    Austen Brown Community All-Star
    Ninth Anniversary Kudos 5 PowerUp Challenge: Product Update Briefing Feedback Task 3 bbcon 2025 Attendee Badge

    @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
    Samantha McGuin Blackbaud Employee
    Tenth Anniversary Kudos 5 Name Dropper Participant

    @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

  • @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
    Samantha McGuin Blackbaud Employee
    Tenth Anniversary Kudos 5 Name Dropper Participant

    @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!

  • 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.