Building your own forms

Building your own forms

Puerto is the home base for all your data—and in this safe harbor, all sorts of things come ashore. Giant cruise ships packed with guests and all kinds of impressive features, but also small, nimble boats. If you keep things simple, you're totally capable of building your own forms in that latter category. Ready to set sail with us?

What’s on this page:

Creating a new form
Your first form item
Publishing your form
Theming: giving your form some style
Adding content items
Conditionals
Triggers and Actions

Creating a new form

Inside your event, you’ll find the Puerto module Forms in the left menu under Guests. The module opens on the overview page. To start a new form, hit the + button in the top right corner.

Configuration – Give your form a name (this shows up at the top of your form). An alias will be generated automatically, but you can tweak it if you like.

This tutorial assumes you're publishing your form using a Puerto link. That means the alias becomes part of the Puerto URL.

Submissions – Check this box to make the form visible and fillable. Super useful during testing! If you uncheck it, a message will show up inside the form instead. You can customize this message using the WYSIWYG editor.

Payments – If you're offering paid products in your form, you can select a payment service provider from the dropdown. Not using payments? Just leave this untouched.

Hit the Save & add item button to finish the initial setup and move on to your first form item.

Your first form item

You’ll land straight on the detail page of your first item. If you want to kick things off with an intro text, select ‘Content’ under Type in the Content category. Give this item a name (like "Intro Text") and craft your message in the WYSIWYG editor. To follow the flow of this tutorial, hit Save—not the purple Save & add another button.

There are three ways to save changes in our platform:
SAVE: Save and go back to the overview
SAVE & ADD ANOTHER: Save and open a fresh page to add another similar item
APPLY: Save and stay on the current page

Publishing your form

After clicking Save, you’ll land on the item overview tab of your form, called Content. The left tab (Details) contains the setup from earlier. The right tab (Publishing) lets you go ahead and publish the form using a Puerto URL. We’ll ignore the other options for now. Once you check the box, the tab expands with more settings.

Theming – We’ll get to that soon. For now, you can skip it.

Success page – Set the message that will appear after someone submits the form. This step is required for publishing, but don’t worry—you can update it anytime.

Google Tag Manager – You can use your GTM-ID here to track form usage. We’ll pre-fill a suggestion for your cookie banner text, which you can adjust to your liking.

Use the Save or Apply button to publish your form. Save takes you back to the form overview. Apply keeps you on the same page. Either way, a new button with an eye icon will appear at the top right—click it to preview your form-in-progress in a new tab.

Theming: giving your form some style

Want to finish the content first? Totally fine. But as promised, let’s first check out the layout. This only applies when publishing via a Puerto URL. If you publish in Vaya, the styling from that platform is used instead.

Colors (header bar, background, buttons, and links) can be selected using a color picker (click the little square) or entered manually using HTML color codes or names.

You can also upload a custom logo (for the header bar) and a background image. Accepted formats: JPG and PNG.

Click Apply to save your changes. Hit F5 in your preview tab to see how it looks—especially useful if you’re not using the recommended image sizes.

Adding content items

Now we’re getting to the good stuff: building out the form. Go back to the Content tab to continue.

You already know the Content item type from your intro. This field type can also be used for subheadings. Add each item using the + button. You can reorder items later by using the arrows in the item list.

Form field – This is where your guests actually enter info, and probably the type you'll use most. Every form field needs to be linked to an attribute that stores the input. After naming the field (for your reference), you can link it to an existing Puerto attribute or create a new one. The attribute type determines if you’ll be using a text field, dropdown, toggle, upload, etc. (Creating new attributes is beyond the scope of this tutorial.)

Under Frontend, you give the field a label (visible to your guest) and optionally a hint (displayed beneath the input field). If the input is required, tick the required in frontend box. To prevent the field from being edited (like for an invitee’s email address), tick Show as disabled in frontend.

Product – This generates a dropdown list of available products your guest can (or must) choose from. These products need to be set up in Puerto beforehand.

Conditionals

You can choose to show certain parts of the form only if specific conditions are met. For example: if the guest has a certain tag, is filling out the form for the first time, or selects a certain option in a dropdown or multiselect field.

This overall condition is known as a parent in form logic. Remember when we skipped that field earlier? Here’s where it comes into play. If you assign a Parent item when adding content, that content will only be shown when the condition is met.

Por ejemplo: If you ask guests how they’re traveling to the event, you might offer several choices. You only want to show a free-text field if they select “Other, namely.” By linking the free-text field to a parent conditional that checks for “Other, namely,” the field stays hidden unless that option is selected.

Triggers and Actions

A guest’s action can trigger a follow-up action from the form. Possible triggers include form submission, starting a payment, or completing a payment (successfully or not).

The available actions depend on your event’s settings and your user permissions. The most common ones are:

• Adding or removing a tag from a guest. For example: present, absent, or unknown. Tags make it easy to filter guests in Puerto.
• Assigning a value to a guest attribute.
• Sending an email (like a confirmation). Separate tutorials on creating emails and setting up email campaigns are available in this Help & Service environment.