Malin / form.html

<form id="donate-form-non-widget" class="simple_form embedded-form" novalidate="novalidate" action="/embeds/f2fa829f-a278-4610-b94d-9f2dd46537c0/donate" accept-charset="UTF-8" data-remote="true" method="post"><input type="hidden" name="authenticity_token" value="1yt1jZmI9YhyiIivjG_FlqdEaMQGoRF6u_gHuxZ57NCQXwIc7uqQjT34E9VEwGpHQG3Pb6lUPjueaQ6V3Y3PZA" autocomplete="off"> <input type="hidden" name="stripe_gateway" id="stripe_gateway" value="true" autocomplete="off"> <input type="hidden" name="id" id="id" value="f2fa829f-a278-4610-b94d-9f2dd46537c0" autocomplete="off"> <input type="hidden" name="ref" id="ref" autocomplete="off"> <input type="hidden" name="embedded" id="embedded" value="true" autocomplete="off"> <input type="hidden" name="full_form" id="full_form" value="true" autocomplete="off"> <input type="hidden" name="currency_symbol" id="currency_symbol" value="$" autocomplete="off"> <input type="hidden" name="collect_address" id="collect_address" value="false" autocomplete="off"> <span id="captcha-v3-site-key" data-captcha-v3-site-key="6Lcj4bspAAAAAIhgp4akofL9Oe53WYOCdZj-yuze"></span> <div class="step-wrapper" style="opacity: 1; margin-top: 0px;"> <div class="infoCard clearfix full-form"> <div class="kfl-close-btn" onclick="closeModal();"> </div> <div class="mobile-grid-100 grid-100"> <img style="height: 38px; width: 38px; display: block; margin: 15px auto 0;" src="https://assets-kindful-com.s3.amazonaws.com/uploads/organization/profile_image/9615/standard_Logo_Mark_Only_COLOR.jpg?AWSAccessKeyId=AKIAJDYHWVU4NFT74ADA&amp;Signature=trRW1wvfqzZDGLqkFgbTmBikzqo%3D&amp;Expires=1754235656"> </div> <div class="mobile-grid-100 grid-100"> <h6 class="center" style=" margin-bottom: -5px; margin-top: 15px;">Creators Space</h6> </div> <div class="form-wrapper" id="step1" style=""> <div class="mobile-grid-100 grid-100"> <h5 class="center choose-amount">Choose your Amount</h5> <ul class="reset"> <fieldset> <li class="payment-option count_4"> <input type="radio" name="amount" id="amount_25" value="25" checked="checked"> <label for="amount_25" class="selected"> <div class="credit-card-info"> $25 </div> </label> </li> <li class="payment-option count_4"> <input type="radio" name="amount" id="amount_50" value="50"> <label for="amount_50"> <div class="credit-card-info"> $50 </div> </label> </li> <li class="payment-option count_4"> <input type="radio" name="amount" id="amount_100" value="100"> <label for="amount_100"> <div class="credit-card-info"> $100 </div> </label> </li> <li class="payment-option count_4" id="other-label"> <input type="radio" name="amount" id="amount_other" value="other"> <label for="amount_other"> <div class="credit-card-info"> Other </div> </label> </li> </fieldset> </ul> <div class="other-amount-wrapper" style="display: none;"> <span class="dollar">$</span> <span id="other-amount-input"></span> </div> </div> <div class="input-wrapper mobile-grid-100 tablet-grid-100 grid-100"> <div class="switch"> <input id="cover_transaction_fee" class="cmn-toggle cmn-toggle-round" type="checkbox" value="1" name="cover_transaction_fee"> <label for="cover_transaction_fee" id="cover-transaction-fee-label" class="selected"><span class="visuallyhidden">cover processing fee</span></label> <span for="cover_transaction_fee" id="pseudo-label"></span> <span class="cover_transaction_fee_prompt" data-currency-symbol="$"> I'll cover the <span class="cover_transaction_amount">$0.73</span> processing fee. </span> </div> <input type="hidden" id="embed_percent_to_cover_transaction_fee" value="2.9"> <div class="input-wrapper"> <ul class="reset"> <fieldset> <li class="recurrence-option"> <input type="radio" name="frequency" id="frequency_One_Time_Donation" value="One Time Donation" checked="checked"> <label class="selected" for="frequency_One_Time_Donation"> <div class="credit-card-info"> One Time </div> </label> </li> <li class="recurrence-option"> <input type="radio" name="frequency" id="frequency_17" value="17"> <label for="frequency_17"> <div class="credit-card-info"> Monthly </div> </label> </li> </fieldset> </ul> </div><!-- .form-wrapper --> <a class="step-btn kf-level-6-margin-top">Continue <i class="fa fa-chevron-right" aria-hidden="true"></i></a> <div id="powered-by"><small><i class="fa fa-lock"></i>Securely processed by <a target="_blank" href="https://www.kindful.com/"><img alt="Kindful" src="/assets/kindful-small-62b7e418cb145236c38d0e5f2b81f267a9138157692e77dfe16d949268035fee.png"></a></small></div> </div><!-- .infoCard --> </div> <!-- step 2 --> <div class="form-wrapper" id="step2" style="display: none;"> <span class="back-btn" data-step="2"><i class="fa fa-chevron-left" aria-hidden="true"></i></span> <br> <h5 class="center">Additional Information</h5> <div class="mobile-grid-100 tablet-grid-100 grid-100 kf-level-6-padding-bottom kf-level-3-padding-top"> </div> <div class="mobile-grid-100 tablet-grid-100 grid-100"> <a class="step-btn">Continue <i class="fa fa-chevron-right" aria-hidden="true"></i></a> <div id="powered-by"><small><i class="fa fa-lock"></i>Securely processed by <a target="_blank" href="https://www.kindful.com/"><img alt="Kindful" src="/assets/kindful-small-62b7e418cb145236c38d0e5f2b81f267a9138157692e77dfe16d949268035fee.png"></a></small></div> </div> </div> <!-- step 3 --> <div class="hex-theme" id="step3" style="display: none; opacity: 1;"> <div class="form-wrapper"> <span class="back-btn" data-step="3"><i class="fa fa-chevron-left" aria-hidden="true"></i></span> <br> <div class="payment-method-hidden" style="display: none; visibility: hidden;"> <ul class="no-margin pull-left" style="margin-bottom:15px;"> <input type="radio" name="payment_method" class="payment_method hidden-radio" value="credit_card" checked=""> </ul> </div> <h5 class="center"><b>Enter your payment method</b></h5> <div class="mobile-grid-100 tablet-grid-100 grid-100 text-center"> <ul class="reset"> <fieldset> <li class="payment-method"> <input type="radio" name="payment_method" id="payment_method_credit_card" value="credit_card" checked="checked"> <label class="selected" for="payment_method_credit_card"> <div class="debit-card-info"> Debit Card </div> </label> </li> <li class="payment-method"> <input type="radio" name="payment_method" id="payment_method_credit_card" value="credit_card"> <label for="payment_method_credit_card"> <div class="credit-card-info"> Credit Card </div> </label> </li> <li class="payment-method"> <input type="radio" name="payment_method" id="payment_method_bank_account" value="bank_account"> <label for="payment_method_bank_account"> <div class="credit-card-info"> Bank Account </div> </label> </li> </fieldset> </ul> </div> <div class="authorize-credit-card-fields" style="display: none;"> <div class="input-wrapper credit-card-details"> <div class="mobile-grid-100 tablet-grid-100 grid-100"> <label for="credit_card_number" class="visuallyhidden">credit card number</label> <div id="credit_card_number_div" data-placeholder-text="Card Number"></div> <i class="fa fa-credit-card" aria-hidden="true"></i> </div> <div class="expiration-wrapper-month input-wrapper mobile-grid-30 tablet-grid-30 grid-30"> <label for="credit_card_month" class="visuallyhidden">expiration month</label> <input type="text" name="credit_card[month]" id="credit_card_month" placeholder="MM" maxlength="2" pattern="[0-9]*" class=""> <i class="fa fa-calendar-o" aria-hidden="true"></i> <span class="expiration-divider">/</span> </div> <div class="expiration-wrapper-year input-wrapper mobile-grid-30 tablet-grid-30 grid-30"> <label for="credit_card_year" class="visuallyhidden">expiration year</label> <input type="text" name="credit_card[year]" id="credit_card_year" placeholder="YYYY" maxlength="4" pattern="[0-9]*" class=""> </div> <div class="input-wrapper mobile-grid-40 tablet-grid-40 grid-40"> <label for="credit_card_cvv" class="visuallyhidden">cvv</label> <div id="cvv_number_div" data-placeholder-text="CVV"></div> <i class="fa fa-lock" aria-hidden="true"></i> </div> </div> <div class="input-wrapper mobile-grid-100 tablet-grid-100 grid-100"> <label for="billing_address_postal_code" class="visuallyhidden">postal code</label> <input type="text" name="billing_address[postal_code]" id="billing_address_postal_code" placeholder="Postal Code" class=""> <i class="fa fa-map-marker" aria-hidden="true"></i> </div> </div> <div class="bank-account-details" style="display:none"> <div class="section-heading grid-100"> <h2 class="kf-level-3-margin-top">Bank Account Details</h2> </div> <div class="input-wrapper mobile-grid-100 tablet-grid-100 grid-100"> <label for="bank_account_account_type" class="visuallyhidden">account type</label> <select name="bank_account[account_type]" id="bank_account_account_type" class="needsclick"><option value="">Account Type</option><option value="savings">Savings</option> <option value="checking">Checking</option></select> <i class="fa fa-university " aria-hidden="true"></i> </div> <input type="hidden" name="bank_account_name" id="bank_account_name" autocomplete="off"> <div class="input-wrapper mobile-grid-100 tablet-grid-100 grid-100"> <label for="bank_account_routing_number" class="visuallyhidden">routing number</label> <input type="text" name="bank_account[routing_number]" id="bank_account_routing_number" placeholder="Routing Number"> <i class="fa fa-university " aria-hidden="true"></i> </div> <div class="input-wrapper mobile-grid-100 tablet-grid-100 grid-100"> <label for="bank_account_account_number" class="visuallyhidden">account number</label> <input type="text" name="bank_account[account_number]" id="bank_account_account_number" placeholder="Account Number"> <i class="fa fa-university " aria-hidden="true"></i> </div> <!-- Used to display form errors --> <div id="bank-account-errors" role="alert" class="text-danger kf-level-3-margin-left"></div> </div> <div class="input-wrapper mobile-grid-100 tablet-grid-100 grid-100 stripe-credit-card-fields kf-level-6-margin-bottom" id="credit_card"> <div id="card-element" class="StripeElement StripeElement--empty"><div class="__PrivateStripeElement" style="margin: 0px !important; padding: 0px !important; border: none !important; display: block !important; background: transparent !important; position: relative !important; opacity: 1 !important;"><iframe name="__privateStripeFrame8163" frameborder="0" allowtransparency="true" scrolling="no" role="presentation" allow="payment *" src="https://js.stripe.com/v3/elements-inner-card-7e72c1ef656a9ea106956852ef336207.html#wait=false&amp;mids[guid]=NA&amp;mids[muid]=NA&amp;mids[sid]=NA&amp;hidePostalCode=true&amp;style[base][iconColor]=%23F99A52&amp;style[base][color]=%2332315E&amp;style[base][fontWeight]=400&amp;style[base][fontFamily]=%22Helvetica+Neue%22%2C+%22Helvetica%22%2C+sans-serif&amp;style[base][fontSize]=15px&amp;style[base][::placeholder][color]=%23CFD7DF&amp;rtl=false&amp;componentName=card&amp;keyMode=live&amp;apiKey=pk_live_iZYXFefCkt380zu63aqUIo7y&amp;referrer=https%3A%2F%2Fcreatorsspace-bloom.kindful.com%2Fembeds%2Ff2fa829f-a278-4610-b94d-9f2dd46537c0%3Fp%3Dhttps%3A%26embedded%3Dtrue%26full_form%3Dtrue&amp;controllerId=__privateStripeController8161" title="Secure card payment input frame" style="border: 0px !important; margin: 0px !important; padding: 0px !important; width: 1px !important; min-width: 100% !important; overflow: hidden !important; display: block !important; user-select: none !important; transform: translate(0px) !important; color-scheme: light only !important; height: 18px;"></iframe><input class="__PrivateStripeElement-input" aria-hidden="true" aria-label=" " autocomplete="false" maxlength="1" style="border: none !important; display: block !important; position: absolute !important; height: 1px !important; top: -1px !important; left: 0px !important; padding: 0px !important; margin: 0px !important; width: 100% !important; opacity: 0 !important; background: transparent !important; pointer-events: none !important; font-size: 16px !important;"><div style="display: block !important; position: absolute !important; top: 50% !important; right: 0px !important; width: 0px !important; margin: 0px !important; padding: 0px !important; border: 0px !important; background: none !important; opacity: 1 !important; overflow: hidden !important; pointer-events: auto !important; transition: none 0s ease 0s !important;"><iframe name="cardButton8164" frameborder="0" allowtransparency="true" scrolling="no" src="https://js.stripe.com/v3/elements-inner-link-button-for-card-4e91e54fd6bd173ea9f2a4e752ebbe32.html#locale=en&amp;style[foregroundColor]=%2332315E&amp;frameId=__privateStripeFrame8163&amp;publishableKey=pk_live_iZYXFefCkt380zu63aqUIo7y&amp;stripeJsId=fee4e9b2-f3a5-4fb4-bbb7-8a5367fcafe0&amp;controllerId=__privateStripeController8161&amp;mids[guid]=NA&amp;mids[muid]=NA&amp;mids[sid]=NA&amp;component=card" style="margin: 0px !important; user-select: none !important; transform: translate(0px) !important; color-scheme: light only !important; display: block !important; position: absolute !important; top: 0px !important; right: 0px !important; height: 0px !important; width: var(--stripeElementWidth) !important; padding: 0px !important; border: 0px !important; overflow: hidden !important; opacity: 1 !important;"></iframe></div></div></div> </div> <div class="contact-type-hidden" style="display: none; visibility: hidden;"> <ul class="no-margin pull-left" style="margin-bottom:15px;"> <input type="radio" name="contact_type" class="contact-type hidden-radio" value="person" checked=""> </ul> </div> <h5 class="center"><strong>Billing details</strong></h5> <div class="mobile-grid-100 tablet-grid-100 grid-100 text-center"> <ul class="reset"> <fieldset> <li class="contact-type"> <input type="radio" name="donor_type" id="donor_type_Person" value="Person" checked="checked"> <label class="selected" for="contact_type_"> <div class="person"> Individual </div> </label> </li> <li class="contact-type"> <input type="radio" name="donor_type" id="donor_type_Organization" value="Organization"> <label for="contact_type_"> <div class="organization"> Organization </div> </label> </li> </fieldset> </ul> </div> <div class="organization-details" style="display:none"> <div class="input-wrapper mobile-grid-100 tablet-grid-100 grid-100"> <label for="organization_name" class="visuallyhidden">organization name</label> <input type="text" name="organization_name" id="organization_name" maxlength="127" placeholder="Organization Name" class=""> <i class="fa fa-user-o" aria-hidden="true"></i> </div> <div class="input-wrapper mobile-grid-100 tablet-grid-100 grid-100"> <label for="contact_info" class="visuallyhidden">primary contact</label> <input type="text" name="contact_info" id="contact_info" maxlength="127" placeholder="Primary Contact" class=""> <i class="fa fa-user-o" aria-hidden="true"></i> </div> </div> <div class="person-details"> <div class="input-wrapper credit-card-billing-details clearfix"> <div class="mobile-grid-50 tablet-grid-50 grid-50 user-field"> <label for="credit_card_first_name" class="visuallyhidden">first name</label> <input type="text" name="credit_card[first_name]" id="credit_card_first_name" maxlength="64" placeholder="First Name" class=""> <i class="fa fa-user-o" aria-hidden="true"></i> </div> <div class="mobile-grid-50 tablet-grid-50 grid-50 %> user-field"> <label for="credit_card_last_name" class="visuallyhidden">last name</label> <input type="text" name="credit_card[last_name]" id="credit_card_last_name" maxlength="64" placeholder="Last Name" class=""> <i class="fa fa-user-o" aria-hidden="true"></i> </div> </div> </div> <div class="input-wrapper mobile-grid-100 tablet-grid-100 grid-100 kf-level-3-margin-bottom"> <label for="email" class="visuallyhidden">email</label> <input type="text" name="email" id="email" placeholder="Email" maxlength="255" class=""> <i class="fa fa-envelope-o" aria-hidden="true"></i> </div> <div class="recaptcha-3-wrapper mobile-grid-100 tablet-grid-100 grid-100 kf-level-2-margin-left" id="recaptcha-text"> This site is protected by reCAPTCHA. The Google <a href="https://policies.google.com/privacy">Privacy Policy</a> and <a href="https://policies.google.com/terms">Terms of Service</a> apply. </div> <div class="captcha-wrapper input-wrapper mobile-grid-100 tablet-grid-100 grid-100 text-center"> <script src="https://www.google.com/recaptcha/api.js?render=explicit&amp;hl=en"></script> <div id="captcha" data-site-key="6Ld0IRgTAAAAAJFGH6tvzEzZYZEBHt9YXeHJ00W7"> </div> </div> <div class="input-wrapper mobile-grid-100 tablet-grid-100 grid-100 embed_email_opt_in hide"> <label for="email_opt_in" style="font-weight: normal; margin-left: 5px;" class="center-label-mobile"><input type="checkbox" name="email_opt_in" id="email_opt_in" value="true" style="float: left; width: 10px; display: inline-block; margin: 3px 10px 0 0;">Join our email list.</label> </div> <input type="hidden" name="non_widget_donate" id="non_widget_donate" value="true" autocomplete="off"> <input type="hidden" name="locale" id="locale" value="en" autocomplete="off"> <div class="mobile-grid-100 tablet-grid-100 grid-100 text-center"> <div class="gateway-submit" data-button-text="Donate"> <label for="submit" class="visuallyhidden">submit</label> <button name="button" type="submit" class="button" data-disable-with="Please wait..."> <i class="fa fa-lock fa-reverse"></i> <span class="submit-button-text">Donate</span> </button> <div id="authorization-text"> <p id="non-recurring-credit-card" style="display: none;"> <small> By clicking the button above I agree to submitting payment. </small> </p> <p id="non-recurring-bank-account" style="display: none;"> <small> By clicking the button above I authorize Kindful to electronically debit my bank account. </small> </p> <p id="recurring-credit-card" style="display: none;"> <small> By clicking the button above I agree to submitting payment and authorize Kindful to use my credit card for future payments. I understand I may cancel this authorization at any time. </small> </p> <p id="recurring-bank-account" style="display: none;"> <small> By clicking the button above I authorize Kindful to electronically debit my bank account and use my bank account for future payments. I understand I may cancel this authorization at any time. </small> </p> </div> <div id="powered-by"><small><i class="fa fa-lock"></i>Securely processed by <a target="_blank" href="https://www.kindful.com/"><img alt="Kindful" src="/assets/kindful-small-62b7e418cb145236c38d0e5f2b81f267a9138157692e77dfe16d949268035fee.png"></a></small></div> </div> </div> </div><!-- .form-wrapper --> </div><!-- .infoCard.form --> </div> </div> </form>