Donation Widget

<div class="donation-box donation-box--inactive">
    <div class="donation-box__inner">
        <h2 class="donation-box__name">Fund development on 30+ open source extras</h2>
        <p class="donation-box__description">We take pride in our work and always strive to deliver quality tools out of the box, no matter if we sell them as premium extras or release them as open source. <br />
            <br />
            With MODX3 and PHP8, many of our open source extras that have been feature complete and &quot;just worked&quot; for years have recently been updated, or will be receiving an update soon. <br />
            <br />
            Your donation helps us prioritize development time for open source maintenance and development.
        </p>

        <div class="donation-box__progress">
            <div class="donation-box__progress-bar">
                <div class="donation-box__progress-bar__inner" style="width: 0%">&nbsp;</div>
            </div>
            <p class="donation-box__progress-goal">
                Raised €0
                of €1,250 goal
                this year,
                €0 total (all-time)
            </p>
        </div>

        <form action="" method="post">
            <input type="hidden" name="donate" value="1">
            <input type="hidden" name="cause" value="1">

            <h3>Support this project</h3>
            <div class="donation-box__amounts">

                <div class="donation-box__amount">
                    <input type="radio" name="amount" value="5" id="donate-1-5">
                    <label for="donate-1-5">
                        €5
                    </label>
                </div>
                <div class="donation-box__amount">
                    <input type="radio" name="amount" value="10" id="donate-1-10">
                    <label for="donate-1-10">
                        €10
                    </label>
                </div>
                <div class="donation-box__amount">
                    <input type="radio" name="amount" value="20" id="donate-1-20">
                    <label for="donate-1-20">
                        €20
                    </label>
                </div>
                <div class="donation-box__amount">
                    <input type="radio" name="amount" value="40" id="donate-1-40">
                    <label for="donate-1-40">
                        €40
                    </label>
                </div>
                <div class="donation-box__amount">
                    <input type="radio" name="amount" value="80" id="donate-1-80">
                    <label for="donate-1-80">
                        €80
                    </label>
                </div>
                <div class="donation-box__amount">
                    <input type="radio" name="amount" value="150" id="donate-1-150">
                    <label for="donate-1-150">
                        €150
                    </label>
                </div>
                <div class="donation-box__amount">
                    <input type="radio" name="amount" value="250" id="donate-1-250">
                    <label for="donate-1-250">
                        €250
                    </label>
                </div>
                <div class="donation-box__amount">
                    <input type="radio" name="amount" value="1250" id="donate-1-1250">
                    <label for="donate-1-1250">
                        €1,250
                    </label>
                </div>

                <div class="donation-box__amount donation-box__amount--custom">
                    <input type="radio" name="amount" value="custom" id="donate-1-custom" onfocus="document.getElementById('donate-1-custom-amount').focus()">
                    <label for="donate-1-custom" aria-label="Enter custom amount">
                        <span>Custom amount:</span>
                        <input name="amount_custom" type="number" min="1" step="1" placeholder="Custom amount" onfocus="document.getElementById('donate-1-custom').checked = true;" id="donate-1-custom-amount" class="donation-box__amount--custom__input">
                    </label>
                </div>
            </div>
            <div class="donation-box__details">
                <div class="donation-box__info donation-box__info--public">
                    <label for="donate-1-public">
                        <input type="checkbox" name="donor_public" id="donate-1-public" class="donation-box__info--public__input" checked>
                        Show my donation
                    </label>
                </div>
                <div class="donation-box__info donation-box__info--name">
                    <label for="donate-1-name">
                        Name
                        <br>
                        <span>(public, optional)</span>
                    </label>
                    <input type="text" name="donor_name" id="donate-1-note">
                </div>
                <div class="donation-box__info donation-box__info--note">
                    <label for="donate-1-note">
                        Personal note
                        <br>
                        <span>(public, optional)</span>
                    </label>
                    <textarea name="donor_note" id="donate-1-note"></textarea>
                </div>
            </div>
            <div class="donation-box__action">
                <button type="submit" class="donation-box__submit">Add donation to cart</button>
            </div>
        </form>
    </div>
</div>