[Version 2] Fields and Forms

Raisely websites submit user, donation and profile data through forms. AngularJS gives us a framework for validation and setting form values.

These forms are extremely flexible, you're able to add new fields, show/hide fields and set defaults by using our <field> directives and your standard AngularJS 1 ngIfand ngShow .

Fields

<fields
  model="form"
  fields="config.custom_fields.donation"
  campaign="campaign"
  user="user"
></fields>

The <fields> directive neatly renders each field specified in the Admin Panel, under Theme > Custom Fields into a list of fields.

You can control these fields in the Admin Panel, add classes and default values. Generally it's best to keep our <fields> directive in the template as it gives admins control over all fields.

You can however remove this directive and customise your form with individual fields, using the <field> directive.

Single Field

<field
  type="text"
  model="form"
  required="true"
  field="first_name"
  label="First Name"
  value="John Day"
></field>

The <field> directive gives theme editors a powerful directive to add custom fields to signup , donation , profile creation and editing forms. It provides a standard layout for all types of inputs, adding labels, validation messages, and validation handling based on each input type.

Adding a field to your HTML will render a label, and appropriate input.

Attributes

  • type required / stringSets the type of field to show. Check out the Field Type section below for the full list of options.
  • model required / objectThe form object this field is a part of. Every field in the form should share a model.
  • field required / stringThe key for this particular field. For example first_name or for a custom field, public.fundraiser_type .
  • required optional / booleanSet to true if the user needs to fill this field out.
  • label required / stringLabel to show above the input
  • value optional / stringThe optional value to show when the field is created. If you wanted this field to get data from the URL string, you could use {{$root.query.myparam}}  here.
  • options optional / arrayThis is only used with select and select-inline field types. It's an array of objects to show in the dropdown, rendered as <options>. Your array should look like:[ { value: 'VIC', label: 'Victoria' }, { ... etc } ] 

Field Types

The directive renders a different element based on the type, adding in functionality to the input to help with formatting and validation:

  • text: For a one-line text input
  • textarea: For an auto-expanding multi-line textarea
  • number: For an HTML5 number input
  • email: For an HTML5 email input, which validates an email address
  • password: For a password input, which obscures the value from the screen.
  • checkbox: An HTML checkbox, which renders inline, before the ‘label’ value
  • select: For a select input. Options can be specified with the options parameter above
  • select-inline: For a simple select element to be used inline with text – renders as an “inline-block” element in CSS.
  • select-country: A pre-formatted select field populated with a list of countries.
  • select-currency: A pre-formatted select field populated with a list of currencies.
  • date: For a text input with a calendar popup, for cross-browser compatibility
  • id: A text field that restricts input to URL-safe values. Using the watch attribute can help pre-fill a Profile ID from a Profile Name field, for example.
  • hidden: A hidden input field, whose label is also hidden for the user.

Custom Fields

By default, Raisely collects set fields for users, donations and profiles. Each of these can be extended to add both public and private fields to the user.

  • Public fields are visible to all website visitors.
  • Private fields are visible only to users themselves and your Raisely administrators.

For user signup forms, public and private fields save against the user account and are available in your theme as user.data.public , user.data.private .

For donation forms, public and private fields save against the donation and are available in your theme as donation.public , donation.private . A new user is created for unique email addresses, but custom fields will save against the donation, not the new user account.

For profiles, public and private fields save against the profile, and are available in your theme as profile.public , profile.private .

Did this answer your question? Thanks for the feedback There was a problem submitting your feedback. Please try again later.

Still need help? Contact Us Contact Us