HAPI Forms - Now You're In Control

With HAPI Forms you can completely customize and simplify the experience of creating and updating items in PeopleVine.


Your client and/or your users are going to be happy for HAPI Forms : )  

With HAPI Forms you can setup completely custom forms to replace our out of the box create screens.  With the ability to render both in the Control Panel and on your website (with page based permissions), you can truly customize the entire experience.

For example, if you wanted to simplify the event create flow, you could simply write something like this:

<div class="container">
  <div id="pvForm">
    <input type="textbox" id="event_title" placeholder="Event Title"/><br>
    <input type="textbox" id="event_month" placeholder="MM"/><br>
    <input type="textbox" id="event_day" placeholder="DD"/><br>
    <input type="textbox" id="event_year" placeholder="YYYY"/><br>
    <select id="event_type">
        <option value="register">Registration Required</option>
        <option value="ticket">Tickets</option>
    </select>
    <br>
    <textarea id="event_summary" placeholder="Enter Summary Here"></textarea><br>
    <input type="checkbox" id="allow_cancel"/>Allow people to cancel their tickets.<br>
    <input type="button" id="submitPVForm" value="Submit" class="btn"/>
  </div>
</div>

Then include the following Javascript with your forms specific details:

pvReady(function(){    
    HAPIform({
        trigger: '#submitPVForm ', // The ID of the button that will submit the form
        wrapper: '#pvForm', // The ID of the element that contains all of the form input items
        reference_type: 'customer',
        action: 'edit',
        // List of element ID or Name to skip when compiling the form data
        // More details in the `before` method
        skip: ['event_month', 'event_day', 'event_year'],
        triggered: function(){
        /* HapiForm Trigger button clicked
           Do anything you want as soon as the form is submitted, here we are using our standard loading animation
        */
            myApp.showPleaseWait();
        },
        before: function(settings, data){
        /* Add custom data before submitting
          In our example we have the event date split into 3 separate inputs (Month/Day/Year) but event_date needs to be stored as one value (MM/DD/YYYY)
          First we add the month/day/year element IDs into the `skip` property (see above)
          We can push this into the compiled form data before it gets submitted
        */
            data.push({
                'key' : 'event_date',
                'value' : $('#event_month').val() + '/' + $('#event_day').val() + '/' + $('#event_year').val()
            });
            return data;
        },
        success: function(settings, response){
        /* Form was successfully submitted
           Do anything you want after the form is successfully submitted
       */
            var alert_elem = $(' ', {
                'class' : 'row',
                'id' : 'profile_alert',
                'html' : '  Your profile has been updated.  '
            });
            $(settings.wrapper).prepend(alert_elem);
            window.scrollTo({top: 0, behavior: 'smooth'});
        },
        fail: function(settings, response){
        // Error submitting Form - Handle form errors
            var alert_elem = $(' ', {
                'class' : 'row',
                'id' : 'profile_alert',
                'html' : '  There was a problem updating your profile.  '
            });
            $(settings.wrapper).prepend(alert_elem);
            window.scrollTo({top: 0, behavior: 'smooth'});
        },
        always: function(settings){
            // Always method can be used to hide any animations regardless of success or failure
            myApp.hidePleaseWait();
        }
    });
});

In this case we are prompting the user to enter the event title, date, select event type, enter a summary and enable or disable self cancel.  This is to show you the various inputs that are currently supported.  

The only pre-requisite to leveraging HAPI Forms is to enable jQuery (sorry we got lazy... too much programming to do, but what's wrong with jQuery, thanks to them our life is easier and the latest speeds can handle a few extra KB - 5G will be at GB/s).

Additional Help Tutorials

Find more ways to grow on PeopleVine.

Setup a Temporary ID for Hotel Guests

You can allow hotel guests to act as a member during their time at your property by leveraging these settings.

Posted May 23, 2023

We've updated the Scheduler Engine with some New Features

Check out these additions that will increase the functionality of your schedulers.

Posted May 22, 2023

Send E-mails Prior to An Appointment, Reservation or Event with Pre-Arrival Campaigns

A new campaign type is set up for pre-arrivals, allowing you to send messaging to a person prior to them arriving for their appointment, reservation or event.

Posted May 2, 2023

Change the Currency you charge in for GoCardless and Stripe

You can now charge people in their local currency by using our "switch currency" option when charging a transaction or subscription (for recurring billing).

Posted February 23, 2023

We Are Expanding Our Platform for Global Capabilities including Country Codes

We updated our platform to store the country code when storing a person's phone number or mobile number. This will assist with ensuring your data is properly formatted, plus more!

Posted February 21, 2023

Register Your Twilio Account for A2P 10DLC Registration with the Carriers to Ensure Delivery

Due to requirements in the US, all clients using Twilio to send SMS to US based customers must register their business and campaigns for outbound messages.

Posted January 6, 2023

Peoplevine is Live on the Toast Marketplace for 1-click Enablement

We've made it easier for you to activate Peoplevine with Toast by using the standard integration.

Posted December 9, 2022

Track an Alternate ID for Membership Card Scans and Identify Primary Membership

We made some updates to the membership experience by adding an alternate ID used to ensure keycards and other IDs are scannable in our platform along with flagging the primary membership.

Posted November 29, 2022

Login with Azure MFA to Enable Secured Azure Active Directory Login

You can now login to Peoplevine with your Azure Active Directory account in addition to your email and password or force the user down MFA only.

Posted September 21, 2022

Approve Multiple Applications at Once or Change the Person on the Application

With our new updates to the application engine, you can now approve (or reject) multiple applicants at once along with the ability to re-assign a CRM record to an application.

Posted August 19, 2022

Connect Your Stripe Account to Peoplevine

Follow the new flow to setup your Stripe connection using our v2 rails.

Posted August 2, 2022

Setup Your Global Network to Create Seamless Reciprocity Between Clubs

Once you've been approved and added to the Global Network, you'll be able to auto-enroll your members into all clubs linked to that Global Network. If your member resigns, then their Global Network access is also revoked.

Posted July 1, 2022

Updated GoCardless Flow and Connection

Connect your GoCardless account to Peoplevine to enable direct debit and bank transfer capabilities.

Posted June 9, 2022

Click Out to Send an SMS Message with a Pre-set Body

Need someone to click a link to send an SMS with a pre-defined body? For example if someone wants to text Valet to get their car.

Posted June 9, 2022

Updated Bookings Page with Appointments, Reservations, Events and Classes on One Screen

We updated the /account/bookings page to display both upcoming appointments/reservations along with event/class registrations.

Posted May 31, 2022

© Peoplevine 2023. Powered by PeopleVine. Terms of use | Privacy & cookies