Pen Settings

HTML

CSS

CSS Base

Vendor Prefixing

Add External Stylesheets/Pens

Any URL's added here will be added as <link>s in order, and before the CSS in the editor. If you link to another Pen, it will include the CSS from that Pen. If the preprocessor matches, it will attempt to combine them before processing.

+ add another resource

JavaScript

Babel includes JSX processing.

Add External Scripts/Pens

Any URL's added here will be added as <script>s in order, and run before the JavaScript in the editor. You can use the URL of any other Pen and it will include the JavaScript from that Pen.

+ add another resource

Packages

Add Packages

Search for and use JavaScript packages from npm here. By selecting a package, an import statement will be added to the top of the JavaScript editor for this package.

Behavior

Save Automatically?

If active, Pens will autosave every 30 seconds after being saved once.

Auto-Updating Preview

If enabled, the preview panel updates automatically as you code. If disabled, use the "Run" button to update.

Format on Save

If enabled, your code will be formatted when you actively save your Pen. Note: your code becomes un-folded during formatting.

Editor Settings

Code Indentation

Want to change your Syntax Highlighting theme, Fonts and more?

Visit your global Editor Settings.

HTML

              
                <!-- Form Configuration Code -->
<script>
  window.funraise.push('create', { form: 271 });
  window.funraise.push('config', { form: 271 }, {
    i18n: {
      locale: window.navigator.language,
      phrases: {
        form_header_text: {
          'en': 'Make a Donation',
          'es': 'Haga una donación',
        },
        donation_optional_donation: {
          'en': 'Add an optional donation',
          'es': 'Añadir un donativo opcional ',
        },
        donation_select_amount: {
          'en': 'Select donation amount',
          'es': 'Seleccionar el importe del donativo',
        },
        donation_or_enter_amount: {
          'en': 'or enter amount',
          'es': 'o rellenar con el importe',
        },
        donation_allocation_donate_to: {
          'en': 'Donate To',
          'es': 'Donar a',
        },
        donation_frequency_name: {
          'en': 'Frequency',
          'es': 'Frecuencia',
        },
        donation_frequency_one_time: {
          'en': 'One Time',
          'es': 'Por única vez',
        },
        donation_frequency_weekly: {
          'en': 'Weekly',
          'es': 'Semanal',
        },
        donation_frequency_monthly: {
          'en': 'Monthly',
          'es': 'Mensual',
        },
        donation_frequency_quarterly: {
          'en': 'Quarterly',
          'es': 'Trimestral',
        },
        donation_frequency_yearly: {
          'en': 'Yearly',
          'es': 'Anualmente',
        },
        donation_your: {
          'en': 'Your donation',
          'es': 'Su donativo',
        },
        donation_amount: {
          'en': 'Amount',
          'es': 'Importe',
        },
        donation_remove_amount: {
          'en': 'REMOVE',
          'es': 'Quitar',
        },
        donation_min_validation: {
          'en': 'Amount must be at least %{currency_symbol}%{amount}',
          'es': 'Cantidad debe ser al menos %{currency_symbol}%{amount}',
        },
        donation_max_validation: {
          'en': 'Amount must be at most %{currency_symbol}%{amount}',
          'es': 'Cantidad debe ser al máximo %{currency_symbol}%{amount}',
        },
        customize_question_this: {
          'en': 'This question',
          'es': 'Este pregunta',
        },
        customize_question_select_an_option: {
          'en': 'Select an option',
          'es': 'Seleccionar una opción',
        },
        customize_dedication_in_honor_label: {
          'en': 'In Honor of',
          'es': 'En honor a',
        },
        customize_dedication_in_memory_label: {
          'en': 'In Memory of',
          'es': 'En memoria de',
        },
        customize_dedication_inspired_by_label: {
          'en': 'Inspired by',
          'es': 'Inspirado por',
        },
        customize_dedication_type_hint: {
          'en': 'Select a dedication type',
          'es': 'Seleccione un tipo de dedicación',
        },
        customize_dedication_type_label: {
          'en': 'Dedication Type',
          'es': 'Tipo de dedicación',
        },
        customize_dedication_person_name_label: {
          'en': 'Dedication Name',
          'es': 'Nombre del dedicado',
        },
        customize_dedication_person_name_hint: {
          'en': 'Name of this person',
          'es': 'Nombre de la persona',
        },
        customize_dedication_person_email_label: {
          'en': 'Dedication Email',
          'es': 'Mensage por la dedicación',
        },
        customize_dedication_person_email_hint: {
          'en': 'Email address for notification',
          'es': 'Correo electrónico por la notificación',
        },
        customize_dedication_person_message_label: {
          'en': 'Dedication Message',
          'es': 'Mensage de dedicación',
        },
        customize_dedication_person_message_hint: {
          'en': 'Add a message for this dedication',
          'es': 'Añadir un mensage por este dedicación',
        },
        customize_dedication_hover: {
          'en': 'You can dedicate your donation to someone special. If you would like to notify the person or someone else of your dedication, add their email to the field that says "Email address for notification." Your message and information about your donation will be sent to that email address.',
          'es': 'Puedes dedicar su donativo a alguien especial. Si queires notificar al persona o alguien differente, añada su correo electrónico al campo titulado "Correo electrónico por la notificación." Su mensaje y información sobre su donativo será enviado a ese correo electrónico.',
        },
        customize_dedication_name: {
          'en': 'Dedicate this donation',
          'es': 'Dedicar este donativo',
        },
        customize_company_match_company_name: {
          'en': 'Company Name',
          'es': 'Nombre de la empresa',
        },
        customize_company_match_company_email: {
          'en': 'Company Email',
          'es': 'Empresa correo electrónico',
        },
        customize_company_match_company_email_placeholder: {
          'en': 'example@example.com',
          'es': 'ejemplo@ejemplo.com',
        },
        customize_company_match_search_companies: {
          'en': 'Search Companies',
          'es': 'Buscar empresas',
        },
        customize_company_match_name: {
          'en': 'Company match',
          'es': 'Mi empresa cuenta con un programa de donativos',
        },
        customize_company_match_min_match_error: {
          'en': 'Amount is less than the specified company match amount of USD $',
          'es': 'Importe es menos que la donacion igualada por la empresa. USD $',
        },
        customize_company_match_hint: {
          'en': 'Many Companies match employee donations. Enter this option to see if your employer has a donation matching program!',
          'es': 'Muchas empresas igualan donativos por sus empleados. Seleccióne este opción para ver si tu compañía cuenta con un programa de donativos.',
        },
        customize_comment_name: {
          'en': 'Comment',
          'es': 'Comentar',
        },
        customize_comment_place_holder: {
          'en': 'Leave a comment',
          'es': 'Dejar un comentario',
        },
        customize_anonymous_name: {
          'en': 'Donate anonymously',
          'es': 'Donar anónimamente',
        },
        customize_anonymous_hover: {
          'en': 'When you donate anonymously, your name will never appear in public as a donor. But, ' +
          'your name will be recorded so that we can send a tax donation receipt.',
          'es': 'Cuando done anónimamente, su nombre nunca aparecer en público como donante. Pero, su nombre será anotado para que podemos mandarle un recibo.',
        },
        general_next_button: {
          'en': 'Next',
          'es': 'Siguente',
        },
        general_next_button_aria: {
          'en': 'Continue to next section',
          'es': 'Continuar a la próxima sección',
        },
        general_ssl: {
          'en': 'The information sent through this form is encrypted and transmitted over a secure SSL connection',
          'es': 'La información enviado por esta forma es cifrada y transmitida por una conexión SSL segura',
        },
        general_recaptcha_invalid: {
          'en': 'reCAPTCHA is not solved',
          'es': 'reCAPTCHA no es resolvado',
        },
        general_email_invalid: {
          'en': 'You must enter a valid email address',
          'es': 'Debe entrar un correo electrónico válido',
        },
        general_dates_month_label: {
          'en': 'Month',
          'es': 'Més',
        },
        general_dates_month_invalid: {
          'en': 'Invalid Month',
          'es': 'Més Inválido',
        },
        general_dates_day_label: {
          'en': 'Day',
          'es': 'Día',
        },
        general_dates_day_invalid: {
          'en': 'Invalid Day',
          'es': 'Día Inválido',
        },
        general_dates_year_label: {
          'en': 'Year',
          'es': 'Año',
        },
        general_dates_year_invalid: {
          'en': 'Invalid Year',
          'es': 'Año Inválido',
        },
        payments_currency: {
          'en': 'Currency',
          'es': 'Moneda',
        },
        payments_methods_name: {
          'en': 'Payment Method',
          'es': 'Forma de pago',
        },
        payments_methods_apple_pay: {
          'en': 'Apple Pay',
          'es': 'Apple Pay',
        },
        payments_methods_card: {
          'en': 'Card',
          'es': 'Tarjeta de crédito',
        },
        payments_methods_paypal: {
          'en': 'PayPal',
          'es': 'PayPal',
        },
        payments_methods_check: {
          'en': 'E-Check',
          'es': 'Cheque electrónico',
        },
        payments_methods_bitcoin: {
          'en': 'Bitcoin',
          'es': 'Bitcoin',
        },
        payments_check_savings: {
          'en': 'Savings',
          'es': 'Cuenta de ahorro',
        },
        payments_check_checking: {
          'en': 'Checking',
          'es': 'Cuenta corriente',
        },
        payments_check_personal: {
          'en': 'Personal',
          'es': 'Personal',
        },
        payments_check_business: {
          'en': 'Business',
          'es': 'Negocio',
        },
        payments_check_bank_account_type: {
          'en': 'Account Type',
          'es': 'Tipo de Cuenta',
        },
        payments_check_bank_account_holder_type: {
          'en': 'Account Holder',
          'es': 'Titular de la Cuenta',
        },
        payments_check_bank_name: {
          'en': 'Bank Name',
          'es': 'Nombre del Banco',
        },
        payments_check_bank_account_number: {
          'en': 'Bank Account Number',
          'es': 'Número de cuenta bancaria',
        },
        payments_check_bank_routing_number: {
          'en': 'Bank Routing Number',
          'es': 'Número de identificación',
        },
        payments_credit_card_cvv_hint: {
          'en': 'CVV codes are located on the back of Visa, Mastercard, and Discover cards. American Express CVV codes are located on the front.',
          'es': 'CVV (o código de verificación) son en el reverso de tarjetas Visa, Mastercard, y Discover. American Express CVV códigos son en el frente.',
        },
        payments_credit_card_cvv_label: {
          'en': 'Card CVV',
          'es': 'Código de verificación de la tarjeta',
        },
        payments_credit_card_number_label: {
          'en': 'Card Number',
          'es': 'Número de tarjeta',
        },
        payments_credit_card_number_error: {
          'en': 'Credit Card Number is invalid',
          'es': 'Número de tarjeta es incorrecto',
        },
        payments_credit_card_cvv_error: {
          'en': 'CVV is invalid',
          'es': 'CVV es incorrecto',
        },
        payments_credit_card_number_placeholder: {
          'en': 'Credit Card #',
          'es': 'Número de tarjeta',
        },
        payments_cvv_placeholder: {
          'en': 'cvv',
          'es': 'cvv',
        },
        payments_credit_card_submit: {
          'en': 'Submit payment',
          'es': 'Entregar el pago',
        },
        payments_credit_card_progress: {
          'en': 'Submitting payment',
          'es': 'Entregando el pago',
        },
        payments_check_submit: {
          'en': 'Submit payment',
          'es': 'Entregar el pago',
        },
        payments_check_progress: {
          'en': 'Submitting  payment',
          'es': 'Entregando el pago',
        },
        payments_bitcoin_submit: {
          'en': 'Finish with BitPay',
          'es': 'Completar con BitPay',
        },
        payments_bitcoin_progress: {
          'en': 'Talking with BitPay',
          'es': 'Communicando con BitPay',
        },
        payments_paypal_submit: {
          'en': 'Finish with PayPal',
          'es': 'Completar con PayPal',
        },
        payments_paypal_progress: {
          'en': 'Talking with PayPal',
          'es': 'Communicando con PayPal',
        },
        payments_paypal_success: {
          'en': 'Please finish your transaction with PayPal.',
          'es': 'Por favor completar su transacción con PayPal.',
        },
        payments_bitcoin_success: {
          'en': 'Please finish your transaction with BitPay.',
          'es': 'Por favor completar su transacción con BitPay.',
        },
        payments_apple_pay_progress: {
          'en': 'Completing transaction with Apple Pay®',
          'es': 'Completando su transacción con Apple Pay®',
        },
        payments_failed_try_again: {
          'en': 'Try Again',
          'es': 'Intentar de nuevo',
        },
        payments_thank_you_supporter: {
          'en': 'Thank you, %{name}',
          'es': 'Gracias, %{name}',
        },
        payments_thank_you_receipt: {
          'en': 'You will receive a receipt by email shortly.',
          'es': 'Recibirá un recipo por correo electrónico en un momento.',
        },
        order_your: {
          'en': 'Your order',
          'es': 'Su orden',
        },
        order_items_heading: {
          'en': 'Select number of tickets',
          'es': 'Seleccionar el número de boletos',
        },
        order_items_submit: {
          'en': 'Submit order',
          'es': 'Entregar el orden',
        },
        order_items_errors_empty: {
          'en': 'At least one ticket is required',
          'es': 'Al menos un boleto es obligatorio',
        },
        order_registrations_heading: {
          'en': 'Customize ticket %{position} of %{total}',
          'es': 'Personalizar boleto  %{position} de %{total}',
        },
        order_registrations_for_me: {
          'en': 'This ticket is for me',
          'es': 'Este boleto es para mi',
        },
        order_registrations_guest_heading: {
          'en': 'Guest Information',
          'es': 'Información del invitado',
        },
        validation_default: {
          'en': 'Something is not correct, please recheck the inputs.',
          'es': 'Algo es incorrecto, por favor reconfirmar las entradas.',
        },
        validation_missing: {
          'en': '%{label} is missing',
          'es': '%{label} es despovisto',
        },
        validation_required: {
          'en': '%{label} is required',
          'es': '%{label} es obligatorio',
        },
        institution_checkbox_label: {
          'en': 'This donation is from an institution',
          'es': 'Este donativo es en nombre de una institución',
        },
        institution_name: {
          'en': 'Institution Name',
          'es': 'Nombre de la institución',
        },
        institution_type: {
          'en': 'Institution Type',
          'es': 'Tipo de institución',
        },
        institution_name_place_holder: {
          'en': 'enter institution name',
          'es': 'entrar el nombre de la institución',
        },
        institution_categories_corporation: {
          'en': 'Corporation',
          'es': 'Corporación',
        },
        institution_categories_foundation: {
          'en': 'Foundation',
          'es': 'Fundación',
        },
        institution_categories_place_of_worship: {
          'en': 'Place of Worship',
          'es': 'Lugar de culto',
        },
        institution_categories_government: {
          'en': 'Government',
          'es': 'Gobierno',
        },
        institution_categories_school: {
          'en': 'School',
          'es': 'Escuela',
        },
        institution_categories_donor_advised_fund: {
          'en': 'Donor Advised Fund',
          'es': 'Fondos Designados por Donantes',
        },
        institution_categories_other: {
          'en': 'Other',
          'es': 'Otro',
        },
        donor_information_first_name: {
          'en': 'First Name',
          'es': 'Nombre',
        },
        donor_information_last_name: {
          'en': 'Last Name',
          'es': 'Apellido',
        },
        donor_information_email: {
          'en': 'Email',
          'es': 'Correo electrónico',
        },
        donor_information_email_opt_in: {
          'en': 'Keep me informed with email updates',
          'es': 'Sí, quiero recibir noticias por correo electrónico.',
        },
        donor_information_phone: {
          'en': 'Phone',
          'es': 'Teléfono',
        },
        donor_information_address: {
          'en': 'Address',
          'es': 'Dirección',
        },
        donor_information_birthday_month: {
          'en': 'Month',
          'es': 'Mes',
        },
        donor_information_birthday_day: {
          'en': 'Day',
          'en': 'Día',
        },
        donor_information_birthday_year: {
          'en': 'Year',
          'es': 'Año',
        },
        donor_information_gender_women: {
          'en': 'Woman',
          'es': 'Mujer',
        },
        donor_information_gender_man: {
          'en': 'Man',
          'es': 'Hombre',
        },
        donor_information_gender_prefer_not_to_say: {
          'en': 'Prefer not to say',
          'es': 'No quiero decir',
        },
        donor_information_gender_non_binary_other: {
          'en': 'Non-Binary/Other',
          'es': 'No-Binario/Otro',
        },
        donor_information_auto_address_manual_entry: {
          'en': 'Manual Entry',
          'es': 'Entrada Manual',
        },
        donor_information_auto_address_server_error: {
          'en': 'An error occurred retrieving address details. Please enter the address manually.',
          'es': 'Había un error recuperarando los datos de la dirreción. Por favor entrar la dirreción manualmente.',
        },
        donor_information_auto_address_label: {
          'en': 'Search Address',
          'es': 'Buscar la Dirreción',
        },
        donor_information_auto_address_place_holder: {
          'en': 'Enter Address',
          'es': 'Entrar la Dirreción',
        },
        donor_information_city: {
          'en': 'City',
          'es': 'Ciudad',
        },
        donor_information_state: {
          'en': 'State',
          'es': 'Estado',
        },
        donor_information_postal_code: {
          'en': 'Postal Code',
          'es': 'Código postal',
        },
        donor_information_postal_code_error: {
          'en': 'Error with the postal code',
          'es': 'Error con el código postal',
        },
        donor_information_country: {
          'en': 'Country',
          'es': 'País',
        },
        donor_information_or_enter_postal_code: {
          'en': 'or enter postal code',
          'es': 'o entrar el código postal',
        },
        donor_information_heading: {
          'en': 'Your Information',
          'es': 'Su información',
        },
        donor_information_billing: {
          'en': 'Billing Address',
          'es': 'Domicilio fiscal',
        },
      },
    },
  });
</script>

<!-- Button Code -->
<button type="button" data-formId="271">Donate</button>
              
            
!

CSS

              
                button {
  background-color: #2979FF;
  color: #ffffff;
  padding: 10px 25px;
  border: none;
  border-radius: 3px;
  letter-spacing: .5px;
  font-size: 16px;
  cursor: pointer;
  margin: 10px auto;
  display: block;
}
              
            
!

JS

              
                
              
            
!
999px

Console