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.

Splitting Checks and Payments with Micros Simphony and Peoplevine Memberships

Learn how to split checks amongst multiple members and/or guests and allow for multiple different payment types.

Posted October 20, 2021

Stripe V2 Integration Supports Native Tokenization and 3D Secure Payments

With our latest release of our Stripe integration, we are introducing our v2 that provides Stripe native tokenization along with support for 3D secure on the first payment capture.

Posted October 19, 2021

Renew Someone's Failed Subscriptions (with add-ons) in One Charge After it Fails

Some of you know the painpoint of renewing someone's subscription that recently failed and they have multiple items on their subscription. This article explains about a new feature that allows you to charge those in one lump sum.

Posted September 23, 2021

Allow Members and Guests to Book Spa Appointments with Book4Time in Our Latest Integration

With our latest integration to Book4Time, we provide real-time availability, crm sync and more to provide the best experience possible for your members and guests.

Posted August 24, 2021

Get an Alert When Members Pay their Invoices

Of course you can monitor your A/R on a daily basis, but that's tedious and sometimes disappointing. With our latest alert, you can get notified when someone pays an invoice.

Posted August 24, 2021

Build a Survey Application and Answer it on Your Site or App

Are you looking to leverage our tools to manage your CRM and applications, but want to build a custom experience for capturing the responses to an application in Peoplevine?

Posted August 20, 2021

Include a Link to Download Their Membership Card

This quick snippet will help you setup a button to click and take them to their membership card to download.

Posted August 18, 2021

Submit a Survey Response from Your Website

Connect your existing website to our platform by submitting the survey response direct to our JSON.

Posted August 17, 2021

We will Automatically Retry Subscriptions that Failed 3 Days Ago and 7 Days Ago

In an effort to ensure you don't lose funds from members who's card failed during their recurring billing, our system will automatically retry the payment 3 day and 7 days after the first fail.

Posted August 13, 2021

Allow People to Pay at /Charge or /NOT with our New Setting

We added a new setting that requires you to enable the out-of-the-box /charge/# (where # is a dollar amount to charge someone e.g. /charge/10.25 for $10.25).

Posted July 31, 2021

Add Your Own SMS Provider (Currently Working with Twilio)

Add your own SMS provider by providing your own Twilio credentials to leverage your account for sending and receiving messages.

Posted July 30, 2021

Use Auth0 Single Sign On Technology with Peoplevine

You can have your members SSO into your member portal by routing them through Auth0.

Posted July 29, 2021

Issue a Set of Perks to All Members - Great for Special and Last Minute Perks

Looking to bring spike your business? Leverage our feature to re-issue one-time perks to all members in two clicks.

Posted July 29, 2021

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

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