Última actividad 1722678807

Malin's Avatar Malin revisó este gist 1722678807. Ir a la revisión

1 file changed, 349 insertions

form.html(archivo creado)

@@ -0,0 +1,349 @@
1 + <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">
2 + <input type="hidden" name="stripe_gateway" id="stripe_gateway" value="true" autocomplete="off">
3 + <input type="hidden" name="id" id="id" value="f2fa829f-a278-4610-b94d-9f2dd46537c0" autocomplete="off">
4 + <input type="hidden" name="ref" id="ref" autocomplete="off">
5 + <input type="hidden" name="embedded" id="embedded" value="true" autocomplete="off">
6 + <input type="hidden" name="full_form" id="full_form" value="true" autocomplete="off">
7 + <input type="hidden" name="currency_symbol" id="currency_symbol" value="$" autocomplete="off">
8 + <input type="hidden" name="collect_address" id="collect_address" value="false" autocomplete="off">
9 + <span id="captcha-v3-site-key" data-captcha-v3-site-key="6Lcj4bspAAAAAIhgp4akofL9Oe53WYOCdZj-yuze"></span>
10 +
11 + <div class="step-wrapper" style="opacity: 1; margin-top: 0px;">
12 + <div class="infoCard clearfix full-form">
13 + <div class="kfl-close-btn" onclick="closeModal();">
14 + </div>
15 + <div class="mobile-grid-100 grid-100">
16 + <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">
17 + </div>
18 +
19 + <div class="mobile-grid-100 grid-100">
20 + <h6 class="center" style=" margin-bottom: -5px; margin-top: 15px;">Creators Space</h6>
21 + </div>
22 +
23 +
24 +
25 + <div class="form-wrapper" id="step1" style="">
26 + <div class="mobile-grid-100 grid-100">
27 + <h5 class="center choose-amount">Choose your Amount</h5>
28 + <ul class="reset">
29 + <fieldset>
30 + <li class="payment-option count_4">
31 + <input type="radio" name="amount" id="amount_25" value="25" checked="checked">
32 + <label for="amount_25" class="selected">
33 + <div class="credit-card-info">
34 + $25
35 + </div>
36 + </label> </li>
37 + <li class="payment-option count_4">
38 + <input type="radio" name="amount" id="amount_50" value="50">
39 + <label for="amount_50">
40 + <div class="credit-card-info">
41 + $50
42 + </div>
43 + </label> </li>
44 + <li class="payment-option count_4">
45 + <input type="radio" name="amount" id="amount_100" value="100">
46 + <label for="amount_100">
47 + <div class="credit-card-info">
48 + $100
49 + </div>
50 + </label> </li>
51 + <li class="payment-option count_4" id="other-label">
52 + <input type="radio" name="amount" id="amount_other" value="other">
53 + <label for="amount_other">
54 + <div class="credit-card-info">
55 + Other
56 + </div>
57 + </label> </li>
58 + </fieldset>
59 + </ul>
60 + <div class="other-amount-wrapper" style="display: none;">
61 + <span class="dollar">$</span>
62 + <span id="other-amount-input"></span>
63 + </div>
64 + </div>
65 +
66 + <div class="input-wrapper mobile-grid-100 tablet-grid-100 grid-100">
67 + <div class="switch">
68 + <input id="cover_transaction_fee" class="cmn-toggle cmn-toggle-round" type="checkbox" value="1" name="cover_transaction_fee">
69 + <label for="cover_transaction_fee" id="cover-transaction-fee-label" class="selected"><span class="visuallyhidden">cover processing fee</span></label>
70 + <span for="cover_transaction_fee" id="pseudo-label"></span>
71 + <span class="cover_transaction_fee_prompt" data-currency-symbol="$">
72 + I'll cover the <span class="cover_transaction_amount">$0.73</span>
73 + processing fee.
74 + </span>
75 + </div>
76 +
77 + <input type="hidden" id="embed_percent_to_cover_transaction_fee" value="2.9">
78 +
79 + <div class="input-wrapper">
80 + <ul class="reset">
81 + <fieldset>
82 + <li class="recurrence-option">
83 + <input type="radio" name="frequency" id="frequency_One_Time_Donation" value="One Time Donation" checked="checked">
84 + <label class="selected" for="frequency_One_Time_Donation">
85 + <div class="credit-card-info">
86 + One Time
87 + </div>
88 + </label> </li>
89 + <li class="recurrence-option">
90 + <input type="radio" name="frequency" id="frequency_17" value="17">
91 + <label for="frequency_17">
92 + <div class="credit-card-info">
93 + Monthly
94 + </div>
95 + </label> </li>
96 + </fieldset>
97 + </ul>
98 +
99 +
100 + </div><!-- .form-wrapper -->
101 + <a class="step-btn kf-level-6-margin-top">Continue <i class="fa fa-chevron-right" aria-hidden="true"></i></a>
102 + <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>
103 + </div><!-- .infoCard -->
104 + </div>
105 +
106 + <!-- step 2 -->
107 + <div class="form-wrapper" id="step2" style="display: none;">
108 + <span class="back-btn" data-step="2"><i class="fa fa-chevron-left" aria-hidden="true"></i></span>
109 + <br>
110 + <h5 class="center">Additional Information</h5>
111 + <div class="mobile-grid-100 tablet-grid-100 grid-100 kf-level-6-padding-bottom kf-level-3-padding-top">
112 + </div>
113 + <div class="mobile-grid-100 tablet-grid-100 grid-100">
114 + <a class="step-btn">Continue <i class="fa fa-chevron-right" aria-hidden="true"></i></a>
115 + <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>
116 + </div>
117 + </div>
118 + <!-- step 3 -->
119 + <div class="hex-theme" id="step3" style="display: none; opacity: 1;">
120 + <div class="form-wrapper">
121 + <span class="back-btn" data-step="3"><i class="fa fa-chevron-left" aria-hidden="true"></i></span>
122 + <br>
123 + <div class="payment-method-hidden" style="display: none; visibility: hidden;">
124 + <ul class="no-margin pull-left" style="margin-bottom:15px;">
125 + <input type="radio" name="payment_method" class="payment_method hidden-radio" value="credit_card" checked="">
126 + </ul>
127 + </div>
128 +
129 + <h5 class="center"><b>Enter your payment method</b></h5>
130 +
131 + <div class="mobile-grid-100 tablet-grid-100 grid-100 text-center">
132 + <ul class="reset">
133 + <fieldset>
134 + <li class="payment-method">
135 + <input type="radio" name="payment_method" id="payment_method_credit_card" value="credit_card" checked="checked">
136 + <label class="selected" for="payment_method_credit_card">
137 + <div class="debit-card-info">
138 + Debit Card
139 + </div>
140 + </label> </li>
141 + <li class="payment-method">
142 + <input type="radio" name="payment_method" id="payment_method_credit_card" value="credit_card">
143 + <label for="payment_method_credit_card">
144 + <div class="credit-card-info">
145 + Credit Card
146 + </div>
147 + </label> </li>
148 + <li class="payment-method">
149 + <input type="radio" name="payment_method" id="payment_method_bank_account" value="bank_account">
150 + <label for="payment_method_bank_account">
151 + <div class="credit-card-info">
152 + Bank Account
153 + </div>
154 + </label> </li>
155 + </fieldset>
156 + </ul>
157 + </div>
158 +
159 + <div class="authorize-credit-card-fields" style="display: none;">
160 + <div class="input-wrapper credit-card-details">
161 + <div class="mobile-grid-100 tablet-grid-100 grid-100">
162 + <label for="credit_card_number" class="visuallyhidden">credit card number</label>
163 + <div id="credit_card_number_div" data-placeholder-text="Card Number"></div>
164 + <i class="fa fa-credit-card" aria-hidden="true"></i>
165 + </div>
166 +
167 + <div class="expiration-wrapper-month input-wrapper mobile-grid-30 tablet-grid-30 grid-30">
168 + <label for="credit_card_month" class="visuallyhidden">expiration month</label>
169 + <input type="text" name="credit_card[month]" id="credit_card_month" placeholder="MM" maxlength="2" pattern="[0-9]*" class="">
170 + <i class="fa fa-calendar-o" aria-hidden="true"></i>
171 + <span class="expiration-divider">/</span>
172 + </div>
173 +
174 + <div class="expiration-wrapper-year input-wrapper mobile-grid-30 tablet-grid-30 grid-30">
175 + <label for="credit_card_year" class="visuallyhidden">expiration year</label>
176 + <input type="text" name="credit_card[year]" id="credit_card_year" placeholder="YYYY" maxlength="4" pattern="[0-9]*" class="">
177 + </div>
178 +
179 + <div class="input-wrapper mobile-grid-40 tablet-grid-40 grid-40">
180 + <label for="credit_card_cvv" class="visuallyhidden">cvv</label>
181 + <div id="cvv_number_div" data-placeholder-text="CVV"></div>
182 + <i class="fa fa-lock" aria-hidden="true"></i>
183 + </div>
184 + </div>
185 +
186 + <div class="input-wrapper mobile-grid-100 tablet-grid-100 grid-100">
187 + <label for="billing_address_postal_code" class="visuallyhidden">postal code</label>
188 + <input type="text" name="billing_address[postal_code]" id="billing_address_postal_code" placeholder="Postal Code" class="">
189 + <i class="fa fa-map-marker" aria-hidden="true"></i>
190 + </div>
191 + </div>
192 +
193 + <div class="bank-account-details" style="display:none">
194 + <div class="section-heading grid-100">
195 + <h2 class="kf-level-3-margin-top">Bank Account Details</h2>
196 + </div>
197 +
198 + <div class="input-wrapper mobile-grid-100 tablet-grid-100 grid-100">
199 +
200 + <label for="bank_account_account_type" class="visuallyhidden">account type</label>
201 + <select name="bank_account[account_type]" id="bank_account_account_type" class="needsclick"><option value="">Account Type</option><option value="savings">Savings</option>
202 + <option value="checking">Checking</option></select>
203 + <i class="fa fa-university " aria-hidden="true"></i>
204 + </div>
205 +
206 + <input type="hidden" name="bank_account_name" id="bank_account_name" autocomplete="off">
207 +
208 + <div class="input-wrapper mobile-grid-100 tablet-grid-100 grid-100">
209 + <label for="bank_account_routing_number" class="visuallyhidden">routing number</label>
210 + <input type="text" name="bank_account[routing_number]" id="bank_account_routing_number" placeholder="Routing Number">
211 + <i class="fa fa-university " aria-hidden="true"></i>
212 + </div>
213 + <div class="input-wrapper mobile-grid-100 tablet-grid-100 grid-100">
214 + <label for="bank_account_account_number" class="visuallyhidden">account number</label>
215 + <input type="text" name="bank_account[account_number]" id="bank_account_account_number" placeholder="Account Number">
216 + <i class="fa fa-university " aria-hidden="true"></i>
217 + </div>
218 + <!-- Used to display form errors -->
219 + <div id="bank-account-errors" role="alert" class="text-danger kf-level-3-margin-left"></div>
220 + </div>
221 +
222 +
223 + <div class="input-wrapper mobile-grid-100 tablet-grid-100 grid-100 stripe-credit-card-fields kf-level-6-margin-bottom" id="credit_card">
224 + <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>
225 + </div>
226 + <div class="contact-type-hidden" style="display: none; visibility: hidden;">
227 + <ul class="no-margin pull-left" style="margin-bottom:15px;">
228 + <input type="radio" name="contact_type" class="contact-type hidden-radio" value="person" checked="">
229 + </ul>
230 + </div>
231 +
232 + <h5 class="center"><strong>Billing details</strong></h5>
233 +
234 + <div class="mobile-grid-100 tablet-grid-100 grid-100 text-center">
235 + <ul class="reset">
236 + <fieldset>
237 + <li class="contact-type">
238 + <input type="radio" name="donor_type" id="donor_type_Person" value="Person" checked="checked">
239 + <label class="selected" for="contact_type_">
240 + <div class="person">
241 + Individual
242 + </div>
243 + </label> </li>
244 + <li class="contact-type">
245 + <input type="radio" name="donor_type" id="donor_type_Organization" value="Organization">
246 + <label for="contact_type_">
247 + <div class="organization">
248 + Organization
249 + </div>
250 + </label> </li>
251 + </fieldset>
252 + </ul>
253 + </div>
254 +
255 + <div class="organization-details" style="display:none">
256 + <div class="input-wrapper mobile-grid-100 tablet-grid-100 grid-100">
257 + <label for="organization_name" class="visuallyhidden">organization name</label>
258 + <input type="text" name="organization_name" id="organization_name" maxlength="127" placeholder="Organization Name" class="">
259 + <i class="fa fa-user-o" aria-hidden="true"></i>
260 + </div>
261 +
262 + <div class="input-wrapper mobile-grid-100 tablet-grid-100 grid-100">
263 + <label for="contact_info" class="visuallyhidden">primary contact</label>
264 + <input type="text" name="contact_info" id="contact_info" maxlength="127" placeholder="Primary Contact" class="">
265 + <i class="fa fa-user-o" aria-hidden="true"></i>
266 + </div>
267 + </div>
268 +
269 +
270 + <div class="person-details">
271 + <div class="input-wrapper credit-card-billing-details clearfix">
272 + <div class="mobile-grid-50 tablet-grid-50 grid-50 user-field">
273 + <label for="credit_card_first_name" class="visuallyhidden">first name</label>
274 + <input type="text" name="credit_card[first_name]" id="credit_card_first_name" maxlength="64" placeholder="First Name" class="">
275 + <i class="fa fa-user-o" aria-hidden="true"></i>
276 + </div>
277 +
278 + <div class="mobile-grid-50 tablet-grid-50 grid-50 %> user-field">
279 + <label for="credit_card_last_name" class="visuallyhidden">last name</label>
280 + <input type="text" name="credit_card[last_name]" id="credit_card_last_name" maxlength="64" placeholder="Last Name" class="">
281 + <i class="fa fa-user-o" aria-hidden="true"></i>
282 + </div>
283 + </div>
284 + </div>
285 +
286 +
287 + <div class="input-wrapper mobile-grid-100 tablet-grid-100 grid-100 kf-level-3-margin-bottom">
288 + <label for="email" class="visuallyhidden">email</label>
289 + <input type="text" name="email" id="email" placeholder="Email" maxlength="255" class="">
290 + <i class="fa fa-envelope-o" aria-hidden="true"></i>
291 + </div>
292 +
293 +
294 + <div class="recaptcha-3-wrapper mobile-grid-100 tablet-grid-100 grid-100 kf-level-2-margin-left" id="recaptcha-text">
295 + 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.
296 + </div>
297 +
298 + <div class="captcha-wrapper input-wrapper mobile-grid-100 tablet-grid-100 grid-100 text-center">
299 + <script src="https://www.google.com/recaptcha/api.js?render=explicit&amp;hl=en"></script>
300 + <div id="captcha" data-site-key="6Ld0IRgTAAAAAJFGH6tvzEzZYZEBHt9YXeHJ00W7">
301 + </div>
302 + </div>
303 +
304 + <div class="input-wrapper mobile-grid-100 tablet-grid-100 grid-100 embed_email_opt_in hide">
305 + <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>
306 + </div>
307 +
308 +
309 + <input type="hidden" name="non_widget_donate" id="non_widget_donate" value="true" autocomplete="off">
310 + <input type="hidden" name="locale" id="locale" value="en" autocomplete="off">
311 +
312 + <div class="mobile-grid-100 tablet-grid-100 grid-100 text-center">
313 + <div class="gateway-submit" data-button-text="Donate">
314 + <label for="submit" class="visuallyhidden">submit</label>
315 + <button name="button" type="submit" class="button" data-disable-with="Please wait...">
316 + <i class="fa fa-lock fa-reverse"></i> <span class="submit-button-text">Donate</span>
317 + </button>
318 + <div id="authorization-text">
319 + <p id="non-recurring-credit-card" style="display: none;">
320 + <small>
321 + By clicking the button above I agree to submitting payment.
322 + </small>
323 + </p>
324 + <p id="non-recurring-bank-account" style="display: none;">
325 + <small>
326 + By clicking the button above I authorize Kindful to electronically debit my bank account.
327 + </small>
328 + </p>
329 + <p id="recurring-credit-card" style="display: none;">
330 + <small>
331 + 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.
332 + </small>
333 + </p>
334 + <p id="recurring-bank-account" style="display: none;">
335 + <small>
336 + 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.
337 + </small>
338 + </p>
339 +
340 + </div>
341 +
342 + <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>
343 + </div>
344 + </div>
345 + </div><!-- .form-wrapper -->
346 + </div><!-- .infoCard.form -->
347 + </div>
348 + </div>
349 + </form>
Siguiente Anterior