How Can I Use Custom JavaScript to Modify Virtuous Forms? – Virtuous

You can pass certain values like segment codes and project codes on a Giving Form using a custom url. This is great for users with limited coding experience, but it comes with two drawbacks:

Custom URLs are limited to only passing segment codes, project codes, media outlets, and specific donation amounts to giving forms.
URLs can be tampered with, either by users or supporters, which can prevent them from working for their intended purpose.

For users who know JavaScript, there can be more flexibility with setting default values and overriding settings. The full Form code options (as well as endpoint details) can be accessed here.

First, be sure to load your form embed in the HTML where you would like it displayed.

This is the base set of code used to set default values - this can be loaded in the header or footer:

VirtuousForms.settings = {
     firstName: 'DEFAULT_VALUE',
     lastName: 'DEFAULT_VALUE',
     email: 'DEFAULT_VALUE',
};

This code snippet includes First Name, Last Name, and Email fields, but you can produce default values for most fields on a form (address1, city, state, postalCode, etc.).

For example: Let's say Ron Swanson is going to make a donation, and we want some of his contact information to be preset. We can use this code:

VirtuousForms.settings = {
     firstName: 'Ron',
     lastName: 'Swanson',
     email: 'rswanson@pawneeparksandrec.org',
};

When the form is loaded on your webpage, he will see something like this:

Related articles