Setting Up the Event Registration Form on Your Website

Once you've set up your event on SimplyRegister, there are two ways you can have your participants access the registration form:

Method 1: Placing the registration form on your site

Putting the registration form directly on your website gives the most professional appearance for your event and offers participants the fastest way to register without leaving your website. There are four things you need to do to put the registration form directly on your website:

Include SimplyRegister's javascript between the <head> tags at the top of your page:
```
<script src="https://www.simplyregister.net/SReg.js"></script>
```
Create a <div> element and give it an ID (the registration form will be placed inside this container):
```
<div id="[ElementID]"></div>
```
where [ElementID] is a unique ID of your choosing (spaces are not allowed).
Include a <script> block that creates the registration form (this must be placed after the <div> you created in Step 2):
```
<script>
   var s = new SReg([YourEventID]);       // load your event
   s.createRegForm("[ElementID]");        // add the registration form to the page
</script>
```
where [YourEventID] is your event's ID (which is available in the Management Area) and [ElementID] is the unique element ID you created in Step 2.
Include a <noscript> block that has a traditional link to the registration form in case a user has scripting disabled (this should be placed after the <script> you created in Step 3):
```
<noscript>
   <p>Click here for the <a target="_blank" href="https://www.simplyregister.net/register/?e=[YourEventID]">Event Registration Form</a></p>
</noscript>
```
where [YourEventID] is your event's ID.

Here's the code for a sample page with everything included:

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="utf-8" />
  <title>Your Site's Title</title>
  <script src="https://www.simplyregister.net/SReg.js"></script>
</head>
<body>
  <div id="myRegForm"></div>
  <script>
      var s = new SReg(123459);
      s.createRegForm("myRegForm");
  </script>
  <noscript>
    <p>Click here for the <a target="_blank" href="https://www.simplyregister.net/register/?e=123459">Event Registration Form</a></p>
  </noscript>
</body>
</html>

Notes and caveats:

The registration form requires a minimum width of 600 pixels and a minimum height of 450 pixels.
The page on which you put the registration form must begin with the same URL path as what you entered in the "website" field when you set up the event.
Even though the registration form itself uses SSL encryption, the "lock icon" will only appear in a user's browser if your website is using SSL for the page on which the registration form is placed. We recommend enabling SSL for the page on which you put the registration form in order to reassure registrants of your site's security. For more information, see "Encryption and Security".

Method 2: Linking to the registration form on SimplyRegister's site

Linking to SimpyRegister's website is the easiest way to give participants access to the registration form. You can create a link to the registration form using the URL https://www.simplyregister.net/register/?e=[YourEventID] where [YourEventID] is your event's ID, which is available in the Management Area.

For example, if your event's ID is 123459, you might put the following code on your website:

<p>Click here for the <a target="_blank" href="https://www.simplyregister.net/register/?e=123459">Event Registration Form</a></p>

which would display like this:

Click here for the Event Registration Form

Language Translations

The registration form supports five different languages: English, French, German, Spanish, and Portuguese. To set the default language when the registration form is loaded with the SReg object, set the langCode property as follows:

<script>
   var s = new SReg([YourEventID]);  // load your event
   s.langCode = "[LangCode]";        // example:  s.langCode = "fr"; sets the language to French
   s.createRegForm("[ElementID]");   // add the registration form to the page
</script>

where [LangCode] is the two-letter code of a supported language (fr=French, de=German, es=Spanish, pt=Portuguese). By default, the form will display in English, so it is not necessary to set a code for English. The language must be set before calling createRegForm().

To set the default language when linking to the registration form, add l=[LangCode] to the URL, where [LangCode] is the two-letter code of a supported language (see language codes above):

<a target="_blank" href="https://www.simplyregister.net/register/?e=[YourEventID]&l=[LangCode]">

Custom Form Colors

When you put the registration form on your website (see Method 1 above), you can customize the form's colors to match your website. To set custom colors when the registration form is loaded with the SReg object, set the UIColors property as follows:

<script>
   var s = new SReg([YourEventID]);      // load your event

   s.UIColors = new SRColors();          // create a new custom color object
   s.UIColors.primary = "[YourColor]";     // set the form's main color (outline, tabs, navigation)
   s.UIColors.highlight = "[YourColor]";   // set the form's highlight color (button icons, action indicators)
   s.UIColors.text = "[YourColor]";        // set the form's text color
   s.UIColors.background = "[YourColor]";  // set the form's background color

   s.createRegForm("[ElementID]");       // add the registration form to the page
</script>

where [YourColor] is a named color (e.g., "green", "white") or a color's hexadecimal representation (e.g., "#38672f", "#ffffff"). If no color or an invalid color is specified for any of the properties, it will default to the standard color. Colors must be set before calling createRegForm().

Advanced Options

When you put the registration form on your website (see Method 1 above), you can customize the form's default view and/or pass a tracking code. To set the form's default view and/or pass a tracking code when the registration form is loaded with the SReg object, add one or both of the optional parameters to the createRegForm() function call as follows:

<script>
   var s = new SReg([YourEventID]);      // load your event
   s.createRegForm("[ElementID]", "[DefaultViewCode]", "[YourTrackingCode]");       // add the reg. form to the page
</script>

where [DefaultViewCode] is "L" for the login view, and [YourTrackingCode] is any alpha-numeric code (max: 20 characters) you want to use for tracking the origin of registrations (for example, through an e-mail campaign).

Additional Instructions for Demo Events

If you're setting up the registration form for a demo event, you should add "demo/" to the URLs in Method 1 step 4 and Method 2. So, links like

<a target="_blank" href="https://www.simplyregister.net/register/?e=[YourEventID]">

should be replaced by

<a target="_blank" href="https://www.simplyregister.net/demo/register/?e=[YourEventID]">