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.

Using Adyen as Your Payment Gateway

We support an integration with Adyen, a leader in payments in Europe, to process credit cards for all types of transactions including recurring billing, F&B, merch, event tickets and much more. This article will help you get things setup.

Posted July 20, 2021

Updated Affiliate Reporting for More Visibility and Accuracy

We recently updated our Affiliate engine with more detailed and actionable reporting to help you service your affiliates better and pay them sooner.

Posted July 13, 2021

Single Sign On (SSO) Using a JWT Token with Certificate

A new modern way to authenticate your members by leveraging our Single Sign On JWT Token that is validated by an updating certificate.

Posted July 9, 2021

Setup Micros Simphony to Work with Peoplevine

You can setup your Micros Simphony (with Transaction Services enabled) to lookup members, sync orders and take payment direct from the POS.

Posted June 15, 2021

Looking to Upgrade Your Authorize.Net Connection to 2.0 and Get Features Like Card Updater

If you are a legacy Authorize.net user, we recommend you upgrade to v2. It's quick and easy while giving you best in class security along with features like card updater from Authorize.net.

Posted June 14, 2021

You Can Sync Stripe Tokenized Credit Cards to Peoplevine

Do you have customers who added their payment directly in Stripe or from a previous integration? We can import those tokens to their CRM profile for future card on file charges.

Posted June 9, 2021

Set Member Perks to Issue on a Re-occurring Basis and to Sub Members (or not)

With our recent update to our Member Perks engine, you can now set a perk to re-issue on a regular basis. You can also control whether a sub member should receive this perk.

Posted May 27, 2021

Verify an Applicant hasn't Already Applied Before Continuing - Avoid Data Overlap

We added a new feature that allows you to prompt an applicant to enter their e-mail and/or mobile number in order to verify if they have either applied or are an active member.

Posted May 13, 2021

FAQ: Sevenrooms

Being integrated with Sevenrooms for nearly 3 years, we've learned a lot on how our users leverage it to improve the member experience while maximizing revenue. Here are some off the questions we get asked the most about our integration with Sevenrooms.

Posted May 11, 2021

Integrate Your Hardware to Verify Members as they Arrive

This step by step tutorial will show you how to verify a membership card and check them in via our API.

Posted May 11, 2021

Capture up to 3 Months Past Due When Members Don't Renew After Billing Fails

We are in a weird time where members may feel that no or limited access to the club doesn't warrant dues, so you may find people waiting to pay/activate until you re-open. If they do, this new feature will prompt them to pay up to the last 3 months they were inactive/unpaid.

Posted May 11, 2021

Adding a Card on File with Square for Dining

If you're using Square, we've updated our flow/experience for registering a card with Square for a card on file experience when dining.

Posted April 23, 2021

1 Hour Outage Due to Azure Downtime

We encountered an outage for an hour when Azure became unavailable. We contacted their support on Twitter to get them looking into it. Details inside.

Posted April 2, 2021

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