Jump to content

Event RSVPs to a single form with URL Reference

Recommended Posts

Posted

I am frustrated that there is no built-in method to capture event RSVPs within the Event page section. But alas, it is what it is. 

We are currently using forms on each individual event to capture RSVPs and registration this leads to a few problems. Mainly overload of emails, individual google sheets, and difficulty managing multiple admins having to build events. 

 

I want to try figure out how to use a tool, addon or plugin (or code) to somehow point to a single registration page from each event to capture all information in one single place. Problem is I can't figure out how to capture the linking pages URL slug to differentiate what event each registration is coming from. I thought SQF would work in a hidden field but it does not appear to be able to do that. Basically Flow would be

Pages: Event 1, Event 2 Event 3

Form: RSVP page

From Event 1, to RSVP- Form includes Event 1 on the submitted form

From event 2, to rsvp- form includes event 2 on the submitted form.. and so on.

 

We run 20-30 free events each month, with more in the summer, so managing all the data is becoming very difficult. 

 

  • Replies 1
  • Views 1.6k
  • Created
  • Last Reply

Top Posters In This Topic

Popular Days

Top Posters In This Topic

Posted (edited)

@KeeganMIller It would be easier if I had a URL to preview, however one solution would be to:

  1. Add a hidden field to the RSVP form and label it Event
  2. For the link to the RSVP form, add an event query parameter to the URL and give it some value e.g. /rsvp?event=event-1. In this example, assuming the RSVP form lives at "/rsvp", we add a query parameter whose name is event and the value is event-1. The value of the query parameter should be some unique identifier for that event
  3. When a user clicks the link and lands on /rsvp?event=event-1, the JavaScript code below would then grab the value of the "event" query parameter and update the value of the hidden field
  4. Then, when a user submits the RSVP form, "event-1" will be the value of the hidden field
     

JavaScript
You'll want to add the following JavaScript code to the Footer using Code Injection.

(function () {
  // Check if the document is already in the 'complete' state
  if (document.readyState == 'complete') {
    // If so, invoke the addEventToHiddenField function
    addEventToHiddenField();
  } else {
    // If not, wait for the DOM content to be fully loaded before executing the code
    document.addEventListener('DOMContentLoaded', addEventToHiddenField);
  }

  // Function to add an event to the hidden field based on the URL query parameter
  function addEventToHiddenField() {
    // Get URL query parameters
    const urlSearchParams = new URLSearchParams(window.location.search);

    // Retrieve the value of the "event" query parameter
    const eventValue = urlSearchParams.get('event');

    // Check if the "event" query parameter exists
    if (eventValue) {
      // Get the hidden field by its ID
      const hiddenField = document.querySelector('input[name="SQF_EVENT"]');

      // Check if the hidden field exists
      if (hiddenField) {
        // Set the value of the hidden field to the retrieved "event" value
        hiddenField.value = eventValue;
      }
    }
  }
})();

 Be sure to include the code in between <script> tags like so:

<script>
  // Add JS code here
</script>

 

Edited by jpeter

Full stack developer who loves helping people out with anything web related. If you'd like to support me, buy me a coffee!

Create an account or sign in to comment

You need to be a member in order to leave a comment


×
×
  • Create New...

Squarespace Webinars

Free online sessions where you’ll learn the basics and refine your Squarespace skills.

Hire a Designer

Stand out online with the help of an experienced designer or developer.