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.

Sync Orders from Clover to PeopleVine for Tracking/Rewarding for Spend

You can track how much people are spending via your Clover POS and can use the data for rewards.

Posted June 4, 2020

Configure Aloha for Tracking Member Spend and Card on File Payments

This guide will show you how to configure your Aloha system to track member spend and allow members to use their card on file.

Posted June 3, 2020

PHP Methods for Connecting to the PeopleVine API

Leverage these methods to connect to the PeopleVine API via PHP.

Posted June 2, 2020

May Updates Were Focused on Contact-Less Experiences, Membership Updates and Commerce

Check out the latest updates to our platform in May which include Postmates deliveries, local delivery windows, reciprocal club features, POX updates and more!

Posted May 28, 2020

Take Orders with Shipping/Delivery via the Virtual POS in the Control Panel

When using the Virtual POS, you can now set the location to Ship/Deliver this order to walk you through available shipping options.

Posted May 28, 2020

Enable House Account for Your Members to Charge to their House Account

On their CRM profile, you can enable the ability to checkout online by charging it to their house account.

Posted May 28, 2020

Allow a One-Time Transfer of the Membership Owner to Help Centralize Billing

You can allow your members to enroll then transfer the membership to another person, while keeping the billing under the original account.

Posted May 28, 2020

See their Most Purchased Products on their CRM Profile

When viewing a CRM profile, you can now see their most frequently purchased items.

Posted May 27, 2020

Issuing or Selling Vouchers to Enable a Digital Tracking System

With Vouchers, you can distribute one-time passes that enable someone to visit, experience or obtain.

Posted May 26, 2020

PeopleVine POX App for Managing Your Members and Guest Check-In to Track Visits

Looking for a powerful way to track your members and build member profiles along with their guests, then look into setting up the PeopleVine POX app.

Posted May 25, 2020

Authenticate Your Facebook Pages with PeopleVine

See how to connect your Facebook pages with PeopleVine to auto post on social.

Posted May 22, 2020

Skip the Password for Quicker Checkout

Don't feel like requiring your people to setup a password, no worries, you can bypass the password while requiring them to get a magic link the next time they come back.

Posted May 22, 2020

Enable Your Reciprocal Clubs to Allow Their Members to Become a Temporary Member of Yours

You can enable your reciprocal clubs to share a digital membership card and online access for their members to access your experiences. Of course with permissions and approvals.

Posted May 22, 2020

Added New Features to Sevenrooms Integration

You can import POS data from your integration with Sevenrooms directly to PeopleVine orders.

Posted May 20, 2020

Now Leverage Dynamic Data Fields when Presenting Options on a Form

Are you setting up a form where you want people to select a specific business in the directory, a membership level, an upcoming event or other dynamic data, then you'll love this new feature.

Posted May 16, 2020

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