Registration form

Eventmaker comes with a powerful language editor for your custom registration form. It’s derived from the markup language Liquid. This page shows you how you can use the custom Eventmaker liquid tags and variables to build your registration form. Please note that this form will embed the Bootstrap CSS so that you can use any of the fancy classes on your fields.

Liquid variables

Here are the variables available to use in Liquid for the custom Registration Form :

{{ event }}
{
             "title" => "New Year's Eve 2015",
         "organizer" => "Eventmaker Developers",
       "description" => "This event has not begun yet",
          "timezone" => "Paris",
                "id" => "5408886b4f6905cb83000001",
             "photo" => nil,
    "photo_original" => nil,
        "start_date" => Wed, 31 Dec 2014 22:00:00 CET +01:00,
          "end_date" => Thu, 01 Jan 2015 07:00:00 CET +01:00,
   "guest_categories" => "5408886b4f6905cb83000001, 0.0, 0.0, 0.0"
}
{{ guest_category }}
{
                 "name" => "Autre",
                   "id" => "5408886b4f6905cb83000002"
        "badge_enabled" => true,
               "traits" => {},
                "price" => 0.0,
                  "vat" => 0.0,
    "price_without_vat" => 0.0,
       "price_with_vat" => 0.0,
           "vat_amount" => 0.0
}
{{ checkin_points }}
[
    {
                     "name" => "Cher",
         "capacity_enabled" => false,
                    "price" => 400.0,
                   "traits" => {},
                      "vat" => 20.0,
                       "id" => "540991e44f69056609000002",
        "capacity_reached?" => false,
          "remaining_slots" => -1
    },
    {
                     "name" => "Moyen",
         "capacity_enabled" => false,
                    "price" => 250.0,
                   "traits" => {},
                      "vat" => 10.0,
                       "id" => "540992164f690552c7000004",
        "capacity_reached?" => false,
          "remaining_slots" => -1
    },
    {
                     "name" => "Test",
         "capacity_enabled" => false,
                    "price" => 400.0,
                   "traits" => {},
                      "vat" => 10.0,
                       "id" => "540f0cf24f6905a277000005",
        "capacity_reached?" => false,
          "remaining_slots" => -1
    }
]
{{ guest }}
{
                                "uid"   => "12345654324"
                              "email"   => "[e-mail]"
                          "first_name"  => "John"
                            "last_name" => "Smith"
                            "position"  => "Director"
                        "company_name"  => "Eventmaker"
                        "phone_number"  => "1234567890"
                        "country_name"  => "France"
                             "country"  => "FRA"
                              "message" => "Hello"
                  "payment_promo_code"  => "MY_PROMO_CODE"
                          "utm_source"  => ""
                          "utm_medium"  => ""
                        "utm_campaign"  => ""
                "facebook_profile_link" => ""
                            "event_id"  => "540f0cf24f6905a277000005"
                    "guest_category_id" => "540992164f690552c7000004"
                "has_access_privileges" => true
  "send_email_on_guest_category_change" => true
              "confirmation_email_sent" => true
              "zoho_invoice_reference"  => ""
                      "zoho_invoice_id" => "540992164f690552c7000004"
                          "rsvp_status" => ""
          "vip_notification_on_checkin" => false
                  "discount_code_label" => "My discount code label"
                       "price_incl_vat" => 120.00
                       "price_excl_vat" => 100.00
                            "total_vat" => 20.00
                       "guest_category" => The associated guest category
                                "event" => The associated event
                        "person_parent" => {}
}

Pre-fill form with URL parameters

By providing the right URL query string parameters, you can pre-fill the Eventmaker registration form. To do so, append to the form URL the url-encoded list of parameters. The parameter names will be the first argument of the {% guest_field %} and {% guest_field_name %} tags. As an exemple:

https://app.eventmaker.io/[...]/registrations/new?first_name=John&last_name=Smith

In addition to that you can pre-fill the following fields :

• payment_promo_code

• utm_source

• utm_medium

• utm_campaign

Simple guest field

This is the simplest tag, which will by default result in a form text field <input type="text" />. The first argument is the property name of the field (native Eventmaker field or metadata), the second argument is the label for this field (displayed on the left of the text box).

{% guest_field birthdate "Your Birth date" %}

You can use all the HTML attributes as option with this tag. Some examples:

Option	Example value	Details
required	true	Whether this field is mandatory to fill.
readonly	true	Use it to prevent users from modifying the field
placeholder	"12/12/1992"	The placeholder HTML tag giving some hint to the user on how to fill the field
help-inline	"We must be sure you are above 18."	Some help text displayed on the right of the text field
maxlength	5	Limit the number of characters inside the text field
type	file, number, date, textarea or hidden	Change the type of data the field will accept / the control itself
class	input-xxlarge	Some CSS class to apply on the generated <input /> element

This way you can compose more advanced guest fields, like the following:

{% guest_field city "City", required: true %}

{% guest_field zip_code "Zip Code", maxlength: 5, type: number, placeholder: "75018", help-inline: "Enter a 5 digits number" %}

{% guest_field mariage_date "The mariage will take place on", type: date, data-language: en %}

{% guest_field comments "Comments (1000 characters)", type: textarea, rows: 3, maxlength: 1000, class: input-xxlarge %}

You can create a basic file input field as follows:

{% guest_field resume "Your resume", type: file %} 

You can even create a direct upload file input that uses ajax and a progress bar to upload your file:

{% guest_field resume "Your resume", type: file direct_upload: true %} 

An additionnal option is present for email if you need to check in ajax the presence of a guest with this email into the guest_category

{% guest_field email "Email", check_if_registered: true %}

Note that you can also require a field conditionnally :

{% guest_field sector_other "Sector other", required_if: "sector==other" %}

For linked guest you can require a field comparing a main guest field, to achieve that simply use the prefix `main_guest` into the condition

{% guest_field phone_number "Phone number", required_if: "main_guest_step_1_completed==1" %}

For country field, this tag generate a dropdown list of countries. You can specify the first country of the list.

{% country_select "Your country", required: true, first: "France" %}

The VAT Number liquid tag enables a few functionalities associated with the new `vat_number` standard field, and is particularly useful when the organizer needs to enable VAT exemption for their registrations.

{% vat_number "VAT number", required: true %}

The liquid tag provides a few options. But you can also provide no option to the tag, in this case the default values will be used just as follows :

Option	Default value	Details
required	false	Whether this field is mandatory.
validate	false	Prevents from submitting an invalid VAT number
readonly	false	Prevents from changing the field value
live-check	true	Checks whether the VAT number is valid while filling the form and updates cart if necessary.
no-icons	false	Disables all icons associated with the live check of the field.
help-block	""	Help text. For example "Type your VAT number here"

Advanced guest field

Eventmaker provides you an alternate tag, {% guest_field_name %} to get event more control over the form. You may need to have a mandatory checkbox where people have to agree with terms of services. Here is how you can do it

<div class="control-group {% if guest_errors contains 'read_and_accept_tos' %} error {% endif %}">
  <label class="control-label" required="required">Terms of Service</label>
  <div class="controls">
    <label class="checkbox">
      <input type="checkbox" name="{% guest_field_name read_and_accept_tos, required: true %}" value="opt-in" />
      I read and agree with the <a href="#">terms of service</a>.

      {% if guest_errors contains 'read_and_accept_tos' %}
        <span class="help-block">You must accept the terms of service.</span>
      {% endif %}
    </label>
  </div>
</div>

Drop down lists

Dropdown lists in HTML are <select /> tags with a few nested <option />. You can generate some of them with the following syntax:

{% guest_select_field meal 'Special meal', required: true %}
  {% option 'Please choose...', value: '', selected: true %}
  {% option 'Normal' %}
  {% option 'Low salt' %}
  {% option 'Gluten-free' %}
  {% option 'Low calorie' %}
{% endguest_select_field %}

You can group options by using the following syntax:

  {% guest_select_field meal 'Special meal', required: true %}
    {% option 'Please choose...', value: '', selected: true %}
    <optgroup label="group label 1">
      {% option 'Normal' %}
      {% option 'Low salt' %}
    </optgroup>
    <optgroup label="group label 2">
      {% option 'Gluten-free' %}
      {% option 'Low calorie' %}
    </optgroup>
  {% endguest_select_field %}

You can also use the power of Liquid to generate a three drop down lists component to register a birth date:

<div class="control-group {% if (guest_errors contains 'birth_date_day') or (guest_errors contains 'birth_date_month') or (guest_errors contains 'birth_date_year') %} error {% endif %}">
  <label class="control-label" required="required">Birth Date (year/month/day)</label>
  <div class="controls">
    <select class="input-small" name="{% guest_field_name birth_date_year, required: true %}" required="required">
      <option value="">-</option>
      {% for i in (1900..2013) %}
        <option {{ if i == 1960 }} selected="selected" {{ endif }}>{{ i }}</option>
      {% endfor %}
    </select>
    <select class="input-medium" name="{% guest_field_name birth_date_month, required: true %}" required="required">
      <option value="">-</option>
      <option value="1">January</option>
      <option value="2">February</option>
      <option value="3">March</option>
      <option value="4">April</option>
      <option value="5">May</option>
      <option value="6">June</option>
      <option value="7">July</option>
      <option value="8">August</option>
      <option value="9">September</option>
      <option value="10">Ocotber</option>
      <option value="11">November</option>
      <option value="12">December</option>
    </select>
    <select class="input-mini" name="{% guest_field_name birth_date_day, required: true %}" required="required">
      <option value="">-</option>
      {% for i in (1..31) %}
        <option>{{ i }}</option>
      {% endfor %}
    </select>
  </div>
</div>

If you define a specific values list for a guest field, you can use the `guest_select_from_field` tag instead to display a dropdown list, without specifying any option.

    {% guest_select_from_field country "Your country", checked:"France", required:true %}

The property selected:"France" selects the option with the value equal to "France", whereas required:true make the dropdown list required. You can pass any previously defined property to this tag except for type.

Radio fields

Radio buttons can be identified to drop down lists as they provide the same feature, which is choosing one value from a given list. That's why the tag syntax is close:

    {% guest_radios_field gender 'Your gender', required: true %}
      {% radio Male %}
      {% radio Female, value: 'f', checked: true %}
    {% endguest_radios_field %}

If you define a specific values list for a guest field, you can use the `guest_radios_from_field` tag instead to display a radio buttons group, without specifying any radio.

    {% guest_radios_from_field gender "Your gender", checked:"Male", required:true %}

The property checked:"Male" pre-checks the radio button with the value equal to "Male", whereas required:true make the group required. You can pass any previously defined property to this tag except for type.

Checkbox fields

Radio buttons have cousins, the checkboxes. But a checkbox is a field in itself, with a boolean value. That's why if you have a "group of checkboxes", you need as many guest fields as the number of checkboxes.

{% guest_checkbox_field read_and_accept_tos "You must accept the terms of service." %}

This is the HTML generated by the liquid tag:

<div class="control-group">
  <div class="controls">
    <label class="checkbox ">
      <input id="guest_guest_metadata_read_and_accept_tos" name="guest[guest_metadata[read_and_accept_tos]]" type="hidden" value="">
      <input id="guest_guest_metadata_read_and_accept_tos" name="guest[guest_metadata[read_and_accept_tos]]" type="checkbox" value="1">
      <span>You must accept the terms of service.</span>
    </label>
  </div>
</div>

You can use the following options with this tag:

Option	Example value	Details
required	true	Whether this checkbox is mandatory to check.
checked	true	This checkbox is checked when the page loads
value	"Yes"	By default, the checkbox value is set to 1, but you can override it with your own value.
class	"my_class"	You can stylize the checkbox or its label by adding a class.
control_label	"Terms of services"	You can add a title to the checkbox which is different from the clickable label.
group	true	You can group several checkboxes by adding the group option to each one of them.

{% guest_checkbox_field read_and_accept_tos "You must accept the terms of service.", group: true %}

This is the HTML generated by the liquid tag:

<label class="checkbox">
  <input id="guest_guest_metadata_read_and_accept_tos" name="guest[guest_metadata[read_and_accept_tos]]" type="hidden" value="">
  <input id="guest_guest_metadata_read_and_accept_tos" name="guest[guest_metadata[read_and_accept_tos]]" type="checkbox" value="1">
  <span>You must accept the terms of service.</span>
</label>

Check-in points

If you have check-ins points not linked to the guest category for which you edit the registration form, you can let your user register to specific check-in points. With the following code, you will generate a check box for each check-in point.

<div class="control-group">
  <label class="control-label">Please choose</label>
  <div class="controls">
    {% for point in checkin_points %}
      {% checkin_point point.id %}
    {% endfor %}
  </div>
</div>

You may want to display a checkbox for each check-in point according to the value of one or several traits. In that case, use the following code, in which we display the check-in points with the traits type as conferences and date as 28/02; we also use the trait form_label as the checkin-point label.

  {% for point in checkin_points %}
    {% if point.traits.type == "conferences" and point.traits.date == "28/02" %}
      {% checkin_point point.id, label: point.traits.form_label %}
    {% endif %}
  {% endfor %}

You may want to display a checkbox for each check-in points, except for 1 or 2. In that case, use the following code, in which we exclude 2 check-in points by specifying their id.

<div class="control-group">
  <label class="control-label">Please choose</label>
  <div class="controls">
    {% assign hidden_checkin_point_ids = '50d334f9230b43daa6000006,50d334f9230b43daa6000007' | split: ',' %}
    {% for point in checkin_points %}
      {% unless hidden_checkin_point_ids contains point.id %}
        {% checkin_point point.id %}
      {% endunless %}
    {% endfor %}
  </div>
</div>

Sometimes you may want to group check-in points as alternatives, meaning that a guest can choose at most one check-in point among several options. You then need radio buttons, so for each check_in_point tag, you need to pass the radio_group option. Please note that the name of the radio_group won't be displayed anywhere, it only serves to identify which groups of alternatives.

{% checkin_point 50d334f9230b43daa6000006, radio_group: morning_conference %}
{% checkin_point 10d334f9980b43daa6000018, radio_group: morning_conference %}
{% checkin_point none, label: "None",      radio_group: morning_conference, checked: true %}

By default, the label next to the checkbox is the Check-in Point name. You can override this text with the label option.

{% checkin_point 50d334f9230b43daa6000006, label: "A shorter label" %}

If your check-in point has a capacity set, you can display the remaining slots with the display_remaining option.

{% checkin_point point.id, display_remaining: true %}
{% checkin_point 50d334f9230b43daa6000006, display_remaining: true %}

If you want to set a "unique access" policy to your check-in point, use the max_allowed_accesses option.

{% checkin_point point.id, max_allowed_accesses: 1 %}
{% checkin_point 50d334f9230b43daa6000006, max_allowed_accesses: 1 %}

If you want to set "more access" policy to your check-in point, use the max_allowed_accesses option.

{% checkin_point point.id, max_allowed_accesses: n %}
{% checkin_point 50d334f9230b43daa6000006, max_allowed_accesses: 4 %}

If you want to set a “unlimited access” policy to your check-in point, use the max_allowed_accesses option. </p>

{% checkin_point point.id, max_allowed_accesses: -1 %}
{% checkin_point 50d334f9230b43daa6000006, max_allowed_accesses: -1 %}

You can use the following options with this tag:

Option	Type value	Example value	Apply to
exclude_vat	Boolean	true	checkin_point

Accompanying people

This tag allows you to add one or several accompanying people. The same as the main guest, you can use the following fields for the accompanying person : simple guest fields, checkin-in points, drop down lists, radio and checkbox fields. An identity field must also be present for the accompanying person to be valid (last_name, email, company_name or uid). The naming of the fields must be no different from the main guest (ex: last_name and not partner_last_name).

{% foreach_linked_guest default_nb: 0, guest_category_id: "50d334f9230b43daa6000007", add: 1, add_label: "Add an accompanying people", remove: 1, remove_label: "Remove this accompanying people" %}

    {% guest_field last_name "Last Name :", required: true %}
    {% guest_field first_name "First Name :", required: true %}

{% endforeach_linked_guest %}

Option	Type value	Example value	Details
default_nb	Integer	1	The number of accompanying people blocks that will be displayed by default when the page loads
guest_category_id	String	"50d334f9230b43daa6000007"	Accompagnying person's guest category ID
add	Integer	0 or 1	Display a button to add an accompanying person
remove	Integer	0 or 1	Display a button to remove an accompanying person
add_label	String	"Add an accompanying person"	The add button label
remove_label	String	"Remove this accompanying person"	The remove button label
limit	Integer	4	The max number of accompanying people you can add

Payment

The Eventmaker registration form can be coupled with a payment process. You get a cart which you can init with a base price for the guest category, and then you can add a price to some elements in the form.

To set the price of a check-in point, go on its "edit" page and update the base price. The currency used will be the one of the guest category.

Last but not least, you can let the user to choose the payment method. Depending on the value selected, the guest will be redirected to the Ogone payment page. Eventmaker supports Ogone and will soon support Paypal.

    {% guest_radios_field payment_merchant_type 'Payment method', payment: true %}
      {% radio "Credit card", value: ogone, checked: true %}
      {% radio "Wire Transfer" %}
      {% radio "Check" %}
    {% endguest_radios_field %}

There is also a tag which can generate the options based on what is configurate into the category.

    {% payment_merchant_type "Payment" %}

You can make it required or add a pre-selected value from this list: check, bank_transfer, cash or ogone to the credit card option.

    {% payment_merchant_type "Payment", required: true, selected: "check" %}

Discount codes

Discount codes can be used in two ways :

• As a reduction for one or several products

• As an invitation code which allows your guests to register. Only people owning a code will be able to register.

Both ways can be used together if you don’t want people to register without a code and offer them a discount at the same time.

{% promo_code 'Do you have a discount code?' %}

Option	Type value	Example value	Details
display_capacity	Boolean	true / false	Display the remaining slots for this discount code
display_label	Boolean	true / false	Display discount code label
readonly	Boolean	true / false	A readonly discount code cannot be modified

{% promo_code 'Do you have a discount code?', display_capacity: true %}

Displaying errors

It is possible to display a list of errors after the form validation thanks to the guest_errors variable. When looping through the list, each iteration will produce an array of 2 entries, the first of which contains the key of the error field, the last of which contains the error message.

  <ul>
    {% for error in guest_errors %}
      <li> {{ error[1] }} </li>
    {% endfor %}
  </ul>

This would output:

  <ul>
    <li> Société doit être rempli(e) </li>
    <li> Code promo est requis pour s'inscrire et est invalide </li>
  </ul>

Floats precision and currency

You can handle the precision of floats and choose which currency you want to display after the number with the following tags.

{{ 1234.00000 | number_to_currency precision: 2, "fr" }}

1234.00 €

{{ 1234.00000 | number_with_precision precision: 3 }}

1234.000

Localization

By default, Eventmaker will show your guests error messages if some of the field don't validate. You can set the locale of your form to en or fr. But if for some reason you don't like an error message for a specific field, you can override them like this:

{% guest_field email 'Email', overrides: {"Someone already registered to this event using this email address" => "Une autre inscription a déjà prise en compte avec la même adresse email" } %}

Resend confirmation email

{% link_to_resend_confirmation_email_block, class: "btn btn-primary" %}
    < something >
{% endlink_to_resend_confirmation_email_block %}

Unique email option must be enabled for either event or guest category. You must add the check_if_registered option in your guest field email.

{% guest_field email 'Email', required: true, check_if_registered: true, overrides: {"Someone already registered to this event using this email address" => "Une autre inscription a déjà été prise en compte avec la même adresse email" } %}

Filters

If you need to escape some text to include it in a URL for example, we've added a convenient liquid filter for that :

http://somewebsite.com/search?q={{"my favourite band is AC/DC" | urlencode}}

This will output:

http://somewebsite.com/search?q=my%20favourite%20band%20is%20AC/DC

If you need to escape some text to include it in a URL param ( this will escape '&' for example ) :

 {{ "Eventmaker & cie" | url_param_encode }}

This will output:

Eventmaker+%26+cie

Ajax form submission

You can use some Javascript to asynchronously submit the registration form. Here is some handy sample code:

<script type="text/javascript">
  $('form').submit(function(e) {
    e.preventDefault();  // Do not submit the form yet

    $.ajax({
      type: 'POST',
      url: $(e.target).attr('action'),
      dataType: 'json',
      data: $(e.target).serialize(),
      success: function(data) {
        // Do whatever you want
        // console.log(data);
        // the JSON object has the following properties:
        // - 'confirm_url' (String)
        // - 'person' (Object)
      }
    });
  })
</script>

Editable fields

If you want to help your users to edit contents without editing the HTML code, this is possible by declaring editable fields.

{% editable_text "text intro" %}{% endeditable_text %}

You can add a text box if you want to enlarge the user's possibility

{% editable_text "text intro", type: text_area %}{% endeditable_text %}

You can also use ckeditor in to help the users add style.

{% editable_text "text intro", type: cktext_area %}{% endeditable_text %}

It is also possible to add select fields

    {% editable_select "Select an option", default: "option_2" %}
      {% editable_select_option "", label: "Please choose your option" %}
      {% editable_select_option "option_1", label: "option 1" %}
      {% editable_select_option "option_2", label: "option 2" %}
      {% editable_select_option "option_3", label: "option 3" %}
    {% endeditable_select %}

When you use many editable fields, it can become difficult to find the one you would like to change. It is then nice to be able to sort them. By default it is a descending order so that you can prioritize new editable fields in front of those that already exist.

{% editable_text "text intro", priority:2, type: cktext_area %}{% endeditable_text %}
{% editable_text "text content", priority:1, type: cktext_area %}{% endeditable_text %}

Order uid to edit registration

You can use the order uid to edit a guest.

/public/events/:event_id/guests/edit_from_order_uid?order_uid=xxx

You can use the order uid to display a confirmation message.

/public/events/:event_id/guests/display_confirmation_message_from_order_uid?order_uid=xxx 

You can use the order uid to go to payment page when a payment is required:

/public/events/:event_id/guests/goto_payment_from_order_uid?order_uid=xxx 

Labels

You can add labels to guests like this

  {% add_guest_label "foo" %}
  {% add_guest_label "foo,toto,titi" %}

and remove like this.

  {% remove_guest_label "foo" %}
  {% remove_guest_label "foo,toto,titi" %}