Webflow allows you to set up websites easily with a no-code strategy. 

The integration between Happyning Events and Webflow allows you to publish public RSVP forms to receive the replies from your event guests via your own website on Webflow. 

This integration makes it extremely easy to have guests for your event sign up directly from your own website and be registered in to the Happyning event that you have created, where you can continue to track guests and publish information about the event to them.

What you need before you get started

  1. You have created your event in Happyning Events app on either iOS or Android
  2. You have a Webflow website where you have Design permissions

From Happyning Events 

Retrieve the public signup link that is available within your event:

  1. Open your event
  2. Navigate to Guests and select Invite
  3. Press on Share public invitation and select Copy invitation link
  4. Save this to be used in a later step

On your Webflow website

Decide on which page you want the RSVP form of your event to be available. This is where you will set up the form that will be integrated with your Happyning event. 

  1. Create a form with the following field types and name's (it is important to use exactly these names)
    1. firstname (Plain textfield)
      • Required
    2. lastname (Plain textfield)
      • Required
    3. countrycode (Select field)
      • Required field with minimum of 1 dial code in the list
      • Should contain values for your guest international phone dial country code's
        E.g +46, +1, +45
    4. phonenr (Phone textfield)
      • Required field with a proper phone number. 
      • This is also validated on the Happyning end when submitted as it needs to be a valid real working phone number.
    5. replystatus (Select field)
      • Required with the follow values: yes, no, maybe
  2. On the Form settings, apply the following:
    1. Method = POST 
    2. Success message = "Thank you! You have successfully been registered as a guest to the event"
    3. Error message = " Oops, something went wrong! Verify that the field values are correct and if the guest is already registered" 
  3. On the Form settings for the Action field:
  4. Finalize the layout of the form together with any desired labels 

Next, navigate to Projects settings inside Webflow and open the section Custom code. 

Here you will paste the below snippet in to the Footer code in order to activate AJAX on the form used for Happyning.

After this your are all set!

<script type = "text/javascript" >
    /* Identify Happyning forms */
    $('form[action*="hpy.at"]').each(function(i, el) {
        form = $(el);
        form.submit(function(e) {
            /* stop the form from submitting */
            form = $(e.target);
            parent = $(form.parent());
            action = form.attr('action');
            /* submit the form via ajax */
                url: action,
                method: "POST",
                data: form.serialize(),
                dataType: "json",
                success: function(data) {
                    /* successful submission - hide the form and show the success message */

                    parent.children('form').css('display', 'none');
                    parent.children('.w-form-done').css('display', 'block');

                error: function() {
                    /* failed submission - show the failure message */
                    parent.find('.w-form-fail').css('display', 'block');

Examples of error responses when submitting

The error message displayed in Webflow if the submissions goes wrong is limited to be generic and can't contain details. 

Happyning is validating the submission carefully to make sure the guest information is accurate and proper.

  • Phone number including country dial code needs to be valid 
  • Firstname / Lastname can't be longer then 30 characters each 
  • RSVP needs to be either Yes, No or Maybe

Example on how the Webflow form can look like