CorvidReference

Form

A registration form for an event.

You can use a Form to create a custom registration form for accepting RSVPs or when offering tickets for your events.

Table of Contents

PROPERTIES

?
Store values associated with an object.
formDataGets information about the event's registration form and status.

FUNCTIONS

?
Perform actions on an object.
validate( )Validates form fields and values against the registration form as defined in the site Dashboard.
validateInput( )Validates an input form field value against the registration form as defined in the site Dashboard.

OBJECTS

?
Objects used when setting, getting, or calling the properties and methods listed above.
AdditionalLabelAn object containing information about a label for a complex input field type.
FieldValidationErrorAn object representing an error that occurred during validation of a registration form's fields.
FormDataAn object representing the details needed to create a registration form for an event.
FormValueAn object containing information about a form value.
InputItemAn object containing information about an input field in a registration form.
ValidationResultAn object representing the result of a validation.
ValueValidationErrorAn object representing an error that occurred during validation of an RSVP form's values.

formData

Gets information about the event's registration form and status.

Description

The returned FormData object contains the information you need to create a custom registration form for the specified event.

This information includes:

  • The event's registration status, such as whether registration is open, closed, or guests will be placed on a waitlist.
  • Which statuses guests can RSVP with, such as yes, no, or to be added to the waitlist.
  • Whether the event is a ticketed event.
  • Information about the registration form's fields, such as their names, descriptive labels, and whether they are required.

Note

To work with the Wix Events API, you need to publish your site.

Syntax

get formData(): FormData
TYPE
?
The kind of data the property stores.

Examples

Get a registration form's information

import wixEvents from 'wix-events';

// ...

const eventId = // Get the event ID

wixEvents.getForm(eventId)
  .then( (form) => {
    let formData = form.formData;

    let fields = formData.formInputs;
    let firstFieldName = fields[0].name;
    let statusOptions = formData.rsvpStatusOptions;
    let registrationStatus = formData.registrationStatus;
    let isTicketed = formData.isTicketed;
  } );

/*  formData:
 *
 *  {
 *    "rsvpStatusOptions": "YES_AND_NO,
 *    "registrationStatus": "OPEN_RSVP",
 *    "isTicketed": false,
 *    "formInputs": [
 *      {
 *        "_id": "37a5789b-27d1-43a3-703b-a93dedad5b01",
 *        "additionalLabels": [],
 *        "array": false,
 *        "controlType": "NAME",
 *        "label": "First Name",
 *        "required": true,
 *        "maxLength": 50,
 *        "name": "firstName",
 *        "options": []
 *      },
 *  
 *      ...
 *  
 *      {
 *        "_id": "27d5789b-137a-43ed-a33d-a9703bad5b01",
 *        "additionalLabels": [
 *          {
 *            "name": "one",
 *            "label": "I'm bringing a plus one"
 *          },
 *          {
 *            "name": "multiple",
 *            "label": "Additional Guests"
 *          }
 *        ],
 *        "array": false,
 *        "controlType": "GUEST_CONTROL",
 *        "label": "I'm bringing a plus one",
 *        "required": true,
 *        "maxLength": 0,
 *        "name": "additionalGuests",
 *        "options": [
 *          "0",
 *          "1"
 *        ]
 *      }
 *    ]
 *  }
 */

Create and submit a registration form

This example assumes that a form is built with input elements, where the element IDs match the field names retrieved from the formData property.

import wixEvents from 'wix-events';
import wixData from 'wix-data';

let eventId;
let form;

// Run a query that will return only one event. Add
// additional filtering to the query if necessary.
wixData.query("Events/Events")
  .eq("title", "My Event")
  .find()
  .then( (results) => {
    if(results.items.length > 0) {
      eventId = results.items[0]._id;
      wixEvents.getForm(eventId)
        .then( (result) => {
          form = result;
        } );
    }
    else {
      console.log("Could not find event");
    }
  });

$w.onReady(function () {
  $w('#submit').onClick( () => {
    let formValues = getFormValues();

    form.submit(formValues)
      .then( (result) => {
        console.log("RSVP form submitted.")
      } )
      .catch( (error) => {
        console.log(`Error message: ${error.message}`);
        if(error.fields) {
          console.log(`Incorrect fields: ${error.fields}`);  
        }
      } );	
  } );
});

function getFormValues() {
  const formValues = [{"name": "rsvpStatus", "value": "YES"}];
    
  form.formData.rsvpFormInputs.forEach( (item) => {
    formValues.push(
      {
        "name": [item.name],
        "value": $w(`#${item.name}`).value
      }
    );
  } );

  // When the form contains an address or additional
  // guests, add code to add those values to formValues.

  return formValues;
}

Reserve, checkout, and update tickets

This example assumes that a form is built with input elements, where the element IDs match the field names retrieved from the formData property.

import wixEvents from 'wix-events';
import wixData from 'wix-data';
import wixPay from 'wix-pay';

let eventId;
let form;
let reservationId;
let orderNumber;
let tickets;

$w.onReady(function () {
  // Retrieve data and set up page
  await getData();
  $w("#ticketRepeater").onItemReady(displayTickets);
  $w("#ticketRepeater").data = tickets;

  // Define button click actions
  $w("reservationButton").onClick(reserveTickets);
  $w("checkoutButton").onClick(checkoutTickets);
  $w("updateButton").onClick(updateTickets);

  // Verify coupon code when it is entered
  $w("#couponCode").onCustomValidation(verifyCouponCode);
});

async function getData() {
  // Run a query that will return only one event. Add
  // additional filtering to the query if necessary.
  const eventResults = await wixData.query("Events/Events")
    .eq("title", "My Event")
    .find();

  if (eventResults.items.length > 0) {
    eventId = eventResults.items[0]._id;

    // Get the event registration form
    form = await wixEvents.getForm(eventId);

    // Get tickets for the event
    const ticketResults = await wixData.query("Events/Tickets")
      .eq("event", eventId)
      .find();

      if (ticketResults.items.length > 0) {
        tickets = ticketResults.items;
      }
      else {
        $w("#ticketRepeater").hide();
        console.log("Could not find tickets");
      }
  } 
  else {
    console.log("Could not find event");
  }
}

function displayTickets($item, itemData, index) {
  $item("#ticketName").text = itemData.name;
  $item("#ticketPrice").text = itemData.price.toString();
  $item("#ticketQuantity").value = 0;
}

function reserveTickets() {
  const selectedTickets = getSelectedTickets();

  wixEvents.tickets.reserve(eventId, selectedTickets)
    .then( (reservation) => {
      reservationId = reservation.id;
    } )
    .catch( (error) => {
      console.log("Error", error.message)
    } );
}

function getSelectedTickets() {
  let selectedTickets = [];

  $w("#ticketRepeater").forEachItem( ($item, itemData, index) => {
    if($item("#ticketQuantity").value > 0) {
      selectedTickets.push( {
        "ticketId": itemData._id,
        "quantity": $item("#ticketQuantity").value
      } );
    }
  } );

  return selectedTickets;
}

function checkoutTickets() {
  wixEvents.tickets.checkout(eventId, reservationId, {
    "formValues": getFormValues(),
    "coupon": $w("#couponCode").value
  })
    .then( ({order}) => {
      orderNumber = order.orderNumber
      wixPay.startPayment(order.paymentId);
      // Note that PDF tickets are available before payment is complete
      $w("ticketsPdfLink").value = order.ticketsPdf;
    })
    .catch( (error) => {
      console.log("Error", error.message)
    } );
}

function updateTickets() {
  wixEvents.tickets.updateOrder(eventId, orderNumber, {
    "formValues": getFormValues()
  })
    .catch( (error) => {
      console.log("Error", error.message)
    } );
}

function verifyCouponCode(value, reject) {
  const coupon = $w("#couponCode").value;
  wixEvents.tickets.verifyCoupon(eventId, reservationId, coupon) 
    .then( (result) => {
      if (result.discountErrors) {
        // handle verification failure
        $w("#couponCode").updateValidityIndication();
        $w("#couponErrorMsg").show();
        $w("#couponSuccessMsg").hide();
        reject("Coupon is invalid");
      } 
      else {
        // handle coupon verified
        $w("#couponErrorMsg").hide()
        $w("#couponSuccessMsg").show()
      }
    } );
}

function getFormValues() {
  const formValues = [];
    
  form.formData.rsvpFormInputs.forEach( (item) => {
    formValues.push(
      {
        "name": [item.name],
        "value": $w(`#${item.name}`).value
      }
    );
  } );

  // When the form contains an address or additional
  // guests, add code to add those values to formValues.

  return formValues;
}

validate( )

Validates form fields and values against the registration form as defined in the site Dashboard.

Description

The validate() function returns a Promise that resolves to {valid: true} if the fields and values in the registration form are valid or rejects if there are invalid fields or values.

When the validate() function is called, the validateInput() function also runs for all your form fields.

The following are invalid when checked against the event's registration form as defined in the site Dashboard:

  • The specified form values contain a field that does not exist in the event's registration form.
  • The specified form values are missing a field that exists in the event's registration form. You must also include non-required fields even if their values are empty.

Note

To work with the Wix Events API, you need to publish your site.

Syntax

function validate(formValues: Array<FormValue>): Promise<ValidationResult>
PARAMETERS
?
Values that you pass to a function.
formValues
Array<FormValue>
Field names and values for a registration form.
RETURN VALUE
?
Value that a function evaluates to when it is finished running.

Fulfilled - Validation result when validation passes. Rejected - FieldValidationError when validation fails.

Examples

Validate a registration form

import wixEvents from 'wix-events';

// ...

const eventId = // Get the event ID
let form;

wixEvents.getForm(eventId)
  .then( (result) => {
    form = result;
  } );

// ...

let formValues = // get form values

form.validate(formValues)
  .then( (response) => {
    // handle case where form is valid
  } )
  .catch( (error) => {
    // handle case where form is not valid
    let message = error.message; // "Following fields have invalid IDs: nonExistent1, nonExistent2"
    let fields = error.fields; // ["nonExistent1", "nonExistent2"]
  });

validateInput( )

Validates an input form field value against the registration form as defined in the site Dashboard.

Description

The validateInput() function returns {valid: true} if the value in the specified field is valid or throws an error if it is not valid.

You may want to call the validateInput() function in an input element's onCustomValidation() event handler to validate an input while the form is being filled out.

Note

To work with the Wix Events API, you need to publish your site.

Syntax

function validateInput(inputName: string, formValues: Array<FormValue>): ValidationResult
PARAMETERS
?
Values that you pass to a function.
inputName
string
Name of the input field to validate.
formValues
Array<FormValue>
Field names and values for a registration form.
RETURN VALUE
?
Value that a function evaluates to when it is finished running.
An object representing whether the input value is valid.

Examples

Validate a registration form value

import wixEvents from 'wix-events';

// ...

const eventId = // Get the event ID
let form;

wixEvents.getForm(eventId)
  .then( (result) => {
    form = result;
  } );

// ...

let formValues = // get form values

try {
  form.validateInput("firstName", formValues);
  // handle case where firstName is valid
} catch(error) {
  // handle case where firstName is not valid
  let message = error.message; // "First Name is required"
  let type = error.errorType; // "EMPTY_INPUT"
  let inputId = error.inputId; // firstName
}

Validate a form value in an element's onCustomValidation() handler

import wixEvents from 'wix-events';

// ...

const eventId = // Get the event ID
let form;

wixEvents.getForm(eventId)
  .then( (result) => {
    form = result;
  } );

// ...

let formValues = // get form values

// ...

$w("#firstName").onCustomValidation( (value, reject) => {
  try {
    form.validateInput("firstName", formValues);
  } catch(error) {
    let message = error.message; // "First Name is required"
    let type = error.errorType; // "EMPTY_INPUT"
    let inputId = error.inputId; // firstName
    reject(`Error ${error}`);
  }
} );

Create and submit a registration form

import wixEvents from 'wix-events';
import wixData from 'wix-data';

let eventId;

// Run a query that will return only one event. Add
// additional filtering to the query if necessary.
wixData.query("Events/Events")
  .eq("title", "My Event")
  .find()
  .then( (results) => {
    if(results.items.length > 0) {
      eventId = results.items[0]._id;
    }
    else {
      console.log("Could not find event");
    }
  });

$w.onReady(function () {
  $w("#submit").onClick( () => {
    const formValues = getFormValues();

    wixEvents.rsvp.createRsvp(eventId, formValues)
      .then( (result) => {
        console.log("RSVP created.")
      } )
      .catch( (error) => {
        console.log(`Error message: ${error.message}`);
        if(error.fields) {
          console.log(`Incorrect fields: ${error.fields}`);  
        }
      } );	
  } );
});

function getFormValues() {
  return [
    {"name": "rsvpStatus", "value": "YES"},
    {"name": "firstName", "value": $w("#firstName").value},
    {"name": "lastName", "value": $w("#lastName").value},
    {"name": "email", "value": $w("#email").value},
    {"name": "custom", "value": $w("#foodAllergies").value},

    // When a form contains an address, the way you format the
    // address information for submission depends on what type
    // of input elements you use to gather that information.

    // Wix address input element.
    {"name": "address", "value": $w("#address").value},

    // Single element which is not an address
    // input element, such as a text input.
    {"name": "address", "value": [$w("#address").value]},

    // Multiple elements for the
    // various parts of an address.
    {
      "name": "address", 
      "value": [
        $w("#street").value,
        $w("#city").value,
        $w("#state").value,
        $w("#country").value,
        $w("#postalCode").value
      ]
    },

    // When a form contains an input for adding more guests to an
    // RSVP, format the guest names for submission in an array
    // where each element is the full name of a guest.
    {"name": "additionalGuests", "value": $w('#additionalGuests').value},
    {
      "name": "guestNames",
      "value": [
        `${$w("#guest1FirstName").value} ${$w("#guest1LastName").value}`,
        `${$w("#guest2FirstName").value} ${$w("#guest2LastName").value}`,
      ]
    }
  ];
}

AdditionalLabel

An object containing information about a label for a complex input field type.

See Also

formData

Syntax

type AdditionalLabel = {
  name: string
  label: string
}
MEMBERS
?
The properties of an object.
name
string
Additional label name.
label
string
Additional label value.

Examples

Get registration form data

import wixEvents from 'wix-events';

// ...

const eventId = // Get the event ID

wixEvents.getForm(eventId)
  .then( (form) => {
    let formData = form.formData;

    let fields = formData.formInputs;
    let firstFieldName = fields[0].name;
    let statusOptions = formData.rsvpStatusOptions;
    let registrationStatus = formData.registrationStatus;
    let isTicketed = formData.isTicketed;
  } );

/*  formData:
 *
 *  {
 *    "rsvpStatusOptions": "YES_AND_NO,
 *    "registrationStatus": "OPEN_RSVP",
 *    "isTicketed": false,
 *    "formInputs": [
 *      {
 *        "_id": "37a5789b-27d1-43a3-703b-a93dedad5b01",
 *        "additionalLabels": [],
 *        "array": false,
 *        "controlType": "NAME",
 *        "label": "First Name",
 *        "required": true,
 *        "maxLength": 50,
 *        "name": "firstName",
 *        "options": []
 *      },
 *  
 *      ...
 *  
 *      {
 *        "_id": "27d5789b-137a-43ed-a33d-a9703bad5b01",
 *        "additionalLabels": [
 *          {
 *            "name": "one",
 *            "label": "I'm bringing a plus one"
 *          },
 *          {
 *            "name": "multiple",
 *            "label": "Additional Guests"
 *          }
 *        ],
 *        "array": false,
 *        "controlType": "GUEST_CONTROL",
 *        "label": "I'm bringing a plus one",
 *        "required": true,
 *        "maxLength": 0,
 *        "name": "additionalGuests",
 *        "options": [
 *          "0",
 *          "1"
 *        ]
 *      }
 *    ]
 *  }
 */

FieldValidationError

An object representing an error that occurred during validation of a registration form's fields.

See Also

validate( ), createRsvp( )

Syntax

type FieldValidationError = {
  message: string
  fields: Array<string>
}
MEMBERS
?
The properties of an object.
message
string
Error message.
fields
Array<string>
List of fields that caused the error when the form does not pass validation.

Examples

Validate a registration form

import wixEvents from 'wix-events';

// ...

const eventId = // Get the event ID
let form;

wixEvents.getForm(eventId)
  .then( (result) => {
    form = result;
  } );

// ...

let formValues = // get form values

form.validate(formValues)
  .then( (response) => {
    // handle case where form is valid
  } )
  .catch( (error) => {
    // handle case where form is not valid
    let message = error.message; // "Following fields have invalid IDs: nonExistent1, nonExistent2"
    let fields = error.fields; // ["nonExistent1", "nonExistent2"]
  });

FormData

An object representing the details needed to create a registration form for an event.

See Also

formData

Syntax

type FormData = {
  formInputs: Array<InputItem>
  rsvpStatusOptions: string
  registrationStatus: string
  isTicketed: boolean
}
MEMBERS
?
The properties of an object.
formInputs
Array<InputItem>
Information about the input fields needed to create a registration form.
rsvpStatusOptions
string

Allowed RSVP statuses for an event. One of:

  • "YES_AND_NO": Guests can RSVP for the event with a "Yes" or "No".
  • "YES_ONLY": Guests can only RSVP for the event with a "Yes".
  • "WAITING": The guest limit has been reached, but there is an open waitlist.
registrationStatus
string

Event registration status. One of:

  • "OPEN_RSVP": Registration is open and guest limit has not been reached.
  • "OPEN_RSVP_WAITLIST": Registration is open, guest limit has been reached, and additional registering guests are added to the waitlist.
  • "OPEN_TICKETS": Registration is open for a ticketed event and there are still tickets available.
  • "OPEN_EXTERNAL": Registration is open for an event that uses external registration, not RSVP or ticketed.
  • "CLOSED": Registration is closed because the guest limit has been reached.
  • "CLOSED_MANUALLY": Registration was closed manually.
isTicketed
boolean
Whether the event is a ticketed event.

Examples

Get registration form data

import wixEvents from 'wix-events';

// ...

const eventId = // Get the event ID

wixEvents.getForm(eventId)
  .then( (form) => {
    let formData = form.formData;

    let fields = formData.formInputs;
    let firstFieldName = fields[0].name;
    let statusOptions = formData.rsvpStatusOptions;
    let registrationStatus = formData.registrationStatus;
    let isTicketed = formData.isTicketed;
  } );

/*  formData:
 *
 *  {
 *    "rsvpStatusOptions": "YES_AND_NO,
 *    "registrationStatus": "OPEN_RSVP",
 *    "isTicketed": false,
 *    "formInputs": [
 *      {
 *        "_id": "37a5789b-27d1-43a3-703b-a93dedad5b01",
 *        "additionalLabels": [],
 *        "array": false,
 *        "controlType": "NAME",
 *        "label": "First Name",
 *        "required": true,
 *        "maxLength": 50,
 *        "name": "firstName",
 *        "options": []
 *      },
 *  
 *      ...
 *  
 *      {
 *        "_id": "27d5789b-137a-43ed-a33d-a9703bad5b01",
 *        "additionalLabels": [
 *          {
 *            "name": "one",
 *            "label": "I'm bringing a plus one"
 *          },
 *          {
 *            "name": "multiple",
 *            "label": "Additional Guests"
 *          }
 *        ],
 *        "array": false,
 *        "controlType": "GUEST_CONTROL",
 *        "label": "I'm bringing a plus one",
 *        "required": true,
 *        "maxLength": 0,
 *        "name": "additionalGuests",
 *        "options": [
 *          "0",
 *          "1"
 *        ]
 *      }
 *    ]
 *  }
 */

Create and submit a registration form

This example assumes that a form is built with input elements, where the element IDs match the field names retrieved from the formData property.

import wixEvents from 'wix-events';
import wixData from 'wix-data';

let eventId;
let form;

// Run a query that will return only one event. Add
// additional filtering to the query if necessary.
wixData.query("Events/Events")
  .eq("title", "My Event")
  .find()
  .then( (results) => {
    if(results.items.length > 0) {
      eventId = results.items[0]._id;
      wixEvents.getForm(eventId)
        .then( (result) => {
          form = result;
        } );
    }
    else {
      console.log("Could not find event");
    }
  });

$w.onReady(function () {
  $w('#submit').onClick( () => {
    let formValues = getFormValues();

    form.submit(formValues)
      .then( (result) => {
        console.log("RSVP form submitted.")
      } )
      .catch( (error) => {
        console.log(`Error message: ${error.message}`);
        if(error.fields) {
          console.log(`Incorrect fields: ${error.fields}`);  
        }
      } );	
  } );
});

function getFormValues() {
  const formValues = [{"name": "rsvpStatus", "value": "YES"}];
    
  form.formData.rsvpFormInputs.forEach( (item) => {
    formValues.push(
      {
        "name": [item.name],
        "value": $w(`#${item.name}`).value
      }
    );
  } );

  // When the form contains an address or additional
  // guests, add code to add those values to formValues.

  return formValues;
}

Reserve, checkout, and update tickets

This example assumes that a form is built with input elements, where the element IDs match the field names retrieved from the formData property.

import wixEvents from 'wix-events';
import wixData from 'wix-data';
import wixPay from 'wix-pay';

let eventId;
let form;
let reservationId;
let orderNumber;
let tickets;

$w.onReady(function () {
  // Retrieve data and set up page
  await getData();
  $w("#ticketRepeater").onItemReady(displayTickets);
  $w("#ticketRepeater").data = tickets;

  // Define button click actions
  $w("reservationButton").onClick(reserveTickets);
  $w("checkoutButton").onClick(checkoutTickets);
  $w("updateButton").onClick(updateTickets);

  // Verify coupon code when it is entered
  $w("#couponCode").onCustomValidation(verifyCouponCode);
});

async function getData() {
  // Run a query that will return only one event. Add
  // additional filtering to the query if necessary.
  const eventResults = await wixData.query("Events/Events")
    .eq("title", "My Event")
    .find();

  if (eventResults.items.length > 0) {
    eventId = eventResults.items[0]._id;

    // Get the event registration form
    form = await wixEvents.getForm(eventId);

    // Get tickets for the event
    const ticketResults = await wixData.query("Events/Tickets")
      .eq("event", eventId)
      .find();

      if (ticketResults.items.length > 0) {
        tickets = ticketResults.items;
      }
      else {
        $w("#ticketRepeater").hide();
        console.log("Could not find tickets");
      }
  } 
  else {
    console.log("Could not find event");
  }
}

function displayTickets($item, itemData, index) {
  $item("#ticketName").text = itemData.name;
  $item("#ticketPrice").text = itemData.price.toString();
  $item("#ticketQuantity").value = 0;
}

function reserveTickets() {
  const selectedTickets = getSelectedTickets();

  wixEvents.tickets.reserve(eventId, selectedTickets)
    .then( (reservation) => {
      reservationId = reservation.id;
    } )
    .catch( (error) => {
      console.log("Error", error.message)
    } );
}

function getSelectedTickets() {
  let selectedTickets = [];

  $w("#ticketRepeater").forEachItem( ($item, itemData, index) => {
    if($item("#ticketQuantity").value > 0) {
      selectedTickets.push( {
        "ticketId": itemData._id,
        "quantity": $item("#ticketQuantity").value
      } );
    }
  } );

  return selectedTickets;
}

function checkoutTickets() {
  wixEvents.tickets.checkout(eventId, reservationId, {
    "formValues": getFormValues(),
    "coupon": $w("#couponCode").value
  })
    .then( ({order}) => {
      orderNumber = order.orderNumber
      wixPay.startPayment(order.paymentId);
      // Note that PDF tickets are available before payment is complete
      $w("ticketsPdfLink").value = order.ticketsPdf;
    })
    .catch( (error) => {
      console.log("Error", error.message)
    } );
}

function updateTickets() {
  wixEvents.tickets.updateOrder(eventId, orderNumber, {
    "formValues": getFormValues()
  })
    .catch( (error) => {
      console.log("Error", error.message)
    } );
}

function verifyCouponCode(value, reject) {
  const coupon = $w("#couponCode").value;
  wixEvents.tickets.verifyCoupon(eventId, reservationId, coupon) 
    .then( (result) => {
      if (result.discountErrors) {
        // handle verification failure
        $w("#couponCode").updateValidityIndication();
        $w("#couponErrorMsg").show();
        $w("#couponSuccessMsg").hide();
        reject("Coupon is invalid");
      } 
      else {
        // handle coupon verified
        $w("#couponErrorMsg").hide()
        $w("#couponSuccessMsg").show()
      }
    } );
}

function getFormValues() {
  const formValues = [];
    
  form.formData.rsvpFormInputs.forEach( (item) => {
    formValues.push(
      {
        "name": [item.name],
        "value": $w(`#${item.name}`).value
      }
    );
  } );

  // When the form contains an address or additional
  // guests, add code to add those values to formValues.

  return formValues;
}

FormValue

An object containing information about a form value.

See Also

createRsvp( ), validate( ), validateInput( )

Syntax

type FormValue = {
  name: string
  value: string
}
MEMBERS
?
The properties of an object.
name
string
Form field name.
value
string
Form field value.

Examples

Create and submit a registration form

import wixEvents from 'wix-events';
import wixData from 'wix-data';

let eventId;

// Run a query that will return only one event. Add
// additional filtering to the query if necessary.
wixData.query("Events/Events")
  .eq("title", "My Event")
  .find()
  .then( (results) => {
    if(results.items.length > 0) {
      eventId = results.items[0]._id;
    }
    else {
      console.log("Could not find event");
    }
  });

$w.onReady(function () {
  $w("#submit").onClick( () => {
    const formValues = getFormValues();

    wixEvents.rsvp.createRsvp(eventId, formValues)
      .then( (result) => {
        console.log("RSVP created.")
      } )
      .catch( (error) => {
        console.log(`Error message: ${error.message}`);
        if(error.fields) {
          console.log(`Incorrect fields: ${error.fields}`);  
        }
      } );	
  } );
});

function getFormValues() {
  return [
    {"name": "rsvpStatus", "value": "YES"},
    {"name": "firstName", "value": $w("#firstName").value},
    {"name": "lastName", "value": $w("#lastName").value},
    {"name": "email", "value": $w("#email").value},
    {"name": "custom", "value": $w("#foodAllergies").value},

    // When a form contains an address, the way you format the
    // address information for submission depends on what type
    // of input elements you use to gather that information.

    // Wix address input element.
    {"name": "address", "value": $w("#address").value},

    // Single element which is not an address
    // input element, such as a text input.
    {"name": "address", "value": [$w("#address").value]},

    // Multiple elements for the
    // various parts of an address.
    {
      "name": "address", 
      "value": [
        $w("#street").value,
        $w("#city").value,
        $w("#state").value,
        $w("#country").value,
        $w("#postalCode").value
      ]
    },

    // When a form contains an input for adding more guests to an
    // RSVP, format the guest names for submission in an array
    // where each element is the full name of a guest.
    {"name": "additionalGuests", "value": $w('#additionalGuests').value},
    {
      "name": "guestNames",
      "value": [
        `${$w("#guest1FirstName").value} ${$w("#guest1LastName").value}`,
        `${$w("#guest2FirstName").value} ${$w("#guest2LastName").value}`,
      ]
    }
  ];
}

InputItem

An object containing information about an input field in a registration form.

See Also

formData

Syntax

type InputItem = {
  _id: string
  array: boolean
  label: string
  additionalLabels: Array<AdditionalLabel>
  options: Array<string>
  maxLength: number
  name: string
  required: boolean
  controlType: string
}
MEMBERS
?
The properties of an object.
_id
string
Unique input identifier.
array
boolean
Whether the input field's value is an array.
label
string
Input field display label.
additionalLabels
Addition field display labels for complex fields.
options
Array<string>
List of value options where applicable.
maxLength
number
Maximum length of the input field's value. A value of 0 indicates no maximum length.
name
string
Input field name.
required
boolean
Whether the input field is required.
controlType
string

The type of the input field. One of:

  • "NAME"
  • "INPUT"
  • "RADIO"
  • "CHECKBOX"
  • "DROPDOWN"
  • "GUEST_CONTROL"
  • "ADDRESS_FULL"
  • "TEXTAREA"
  • "DATE"

Examples

Get registration form data

import wixEvents from 'wix-events';

// ...

const eventId = // Get the event ID

wixEvents.getForm(eventId)
  .then( (form) => {
    let formData = form.formData;

    let fields = formData.formInputs;
    let firstFieldName = fields[0].name;
    let statusOptions = formData.rsvpStatusOptions;
    let registrationStatus = formData.registrationStatus;
    let isTicketed = formData.isTicketed;
  } );

/*  formData:
 *
 *  {
 *    "rsvpStatusOptions": "YES_AND_NO,
 *    "registrationStatus": "OPEN_RSVP",
 *    "isTicketed": false,
 *    "formInputs": [
 *      {
 *        "_id": "37a5789b-27d1-43a3-703b-a93dedad5b01",
 *        "additionalLabels": [],
 *        "array": false,
 *        "controlType": "NAME",
 *        "label": "First Name",
 *        "required": true,
 *        "maxLength": 50,
 *        "name": "firstName",
 *        "options": []
 *      },
 *  
 *      ...
 *  
 *      {
 *        "_id": "27d5789b-137a-43ed-a33d-a9703bad5b01",
 *        "additionalLabels": [
 *          {
 *            "name": "one",
 *            "label": "I'm bringing a plus one"
 *          },
 *          {
 *            "name": "multiple",
 *            "label": "Additional Guests"
 *          }
 *        ],
 *        "array": false,
 *        "controlType": "GUEST_CONTROL",
 *        "label": "I'm bringing a plus one",
 *        "required": true,
 *        "maxLength": 0,
 *        "name": "additionalGuests",
 *        "options": [
 *          "0",
 *          "1"
 *        ]
 *      }
 *    ]
 *  }
 */

ValidationResult

An object representing the result of a validation.

See Also

validate( )

Syntax

type ValidationResult = {
  valid: boolean
}
MEMBERS
?
The properties of an object.
valid
boolean
Indicates that the registration form field(s) are valid.

Examples

Validate a registration form

import wixEvents from 'wix-events';

// ...

const eventId = // Get the event ID
let form;

wixEvents.getForm(eventId)
  .then( (result) => {
    form = result;
  } );

// ...

let formValues = // get form values

form.validate(formValues)
  .then( (response) => {
    // handle case where form is valid
  } )
  .catch( (error) => {
    // handle case where form is not valid
    let message = error.message; // "Following fields have invalid IDs: nonExistent1, nonExistent2"
    let fields = error.fields; // ["nonExistent1", "nonExistent2"]
  });

Validate a registration form value

import wixEvents from 'wix-events';

// ...

const eventId = // Get the event ID
let form;

wixEvents.getForm(eventId)
  .then( (result) => {
    form = result;
  } );

// ...

let formValues = // get form values

try {
  form.validateInput("firstName", formValues);
  // handle case where firstName is valid
} catch(error) {
  // handle case where firstName is not valid
  let message = error.message; // "First Name is required"
  let type = error.errorType; // "EMPTY_INPUT"
  let inputId = error.inputId; // firstName
}

ValueValidationError

An object representing an error that occurred during validation of an RSVP form's values.

See Also

validateInput( ), createRsvp( )

Syntax

type ValueValidationError = {
  message: string
  inputId: string
  errorType: string
}
MEMBERS
?
The properties of an object.
message
string
Error message.
inputId
string
ID of the input field that failed validation.
errorType
string

Error type. One of:

  • "EMPTY_INPUT": A required field is missing its value.
  • "INVALID_INPUT_VALUE": The value is not valid for the field type.
  • "INPUT_TOO_LONG": The value is too long.
  • "INVALID_OPTION": The value does not match one of the defined options for the field.
  • "INVALID_STATUS": The status value is not valid.
  • "INVALID_NUMBER_OF_GUESTS": The number of guests does not match the number defined for the form.

Examples

Validate an RSVP form's values

import wixEvents from 'wix-events';

// ...

const eventId = // Get the event ID
const form = wixEvents.createEventRsvpForm(eventId);

// ...

let formValues = // get form values

form.validateInput("firstName", formValues)
  .then( (response) => {
    // handle case where firstName is valid
  } )
  .catch( (error) => {
    // handle case where firstName is not valid
    let message = error.message; // "First Name is required"
    let type = error.errorType; // "EMPTY_INPUT"
    let inputId = error.inputId; // firstName
  });