Contact Forms

Setting Up Your Forms

By default, every organisation has an enquiries form.

This is a required form that is for handling your basic contact form enquiries. For most businesses, this should be sufficient.

If you require a range of forms to funnel customers towards different inboxes, then we recommend creating a new form for each use case, for example Customer Support or Group Enquiries etc.

Create Form

To create a form:

1. Visit Settings > Contact Forms

2. Click Create Form

3. You can now enter the details for your form, such as it's name, it's visible fields, whether to send a thank you email, and the primary reply to email address for the form.

4. Finally click Create Form

If you have multiple forms, and are using the email forwarding integration we recommend using a different primary email address per form.

Edit Form

Once a form is created, you can go back to it at any time and edit its settings.

You can also manage user access and assign a primary user or 'Form Manager'.

Under 'How To Use', you can find your forms iFrame code, cookie consent code, Security Token, and custom form example.

Custom Forms

Please note, a web developer best handles the security token and custom forms; for everyone else, the iFrame will be sufficient.

Using Forms

There are two main ways to utilise forms in 53° OS, the first and most simple is to use the provided iFrame.

This ensures your users see an on brand, fully functional contact form with the settings you've selected.

The second is best handled by your web developer, enabling them to create custom forms built directly into your website. This gives you full control, but knowledge of HTML, CSS, Javascript & APIs is required.

iFrame Embed

You can embed your 53 Degrees contact forms anywhere on your website using an iframe.

Finding Your Form URL

1. Go to Settings → Contact Forms in your dashboard

2. Click on the form you want to embed

3. Open the How To Use section

4. Copy the iframe code provided

The form URL includes your organisation slug and form ID automatically.

Basic Embed

Copy and paste this code into your HTML where you want the form to appear:

<iframe 
  src="https://booking.53degrees.app/your-organization-slug/form/your-form-id" 
  width="100%" 
  height="600" 
  style="border:0">
</iframe>

Replace:

• your-organization-slug with your organisation's slug

• your-form-id with your form's ID

Customisation

Adjust Height

Change the height attribute to fit your layout:

<iframe 
  src="https://booking.53degrees.app/your-organization-slug/form/your-form-id" 
  width="100%" 
  height="800" 
  style="border:0">
</iframe>

Responsive Width

Use CSS for responsive sizing:

<div style="max-width: 600px; margin: 0 auto;">
  <iframe 
    src="https://booking.53degrees.app/your-organization-slug/form/your-form-id" 
    width="100%" 
    height="600" 
    style="border:0">
  </iframe>
</div>

Custom Styling

Add custom CSS classes or inline styles:

<iframe 
  src="https://booking.53degrees.app/your-organization-slug/form/your-form-id" 
  width="100%" 
  height="600" 
  style="border:0; border-radius: 8px; box-shadow: 0 2px 8px rgba(0,0,0,0.1);">
</iframe>

Cookie Consent

When embedding 53 Degrees contact forms in iframes on your website, you can configure the iframe handler to work with your existing cookie consent solution.

This prevents duplicate consent prompts and ensures a seamless user experience.

Basic Setup

First, include the iframe handler script on your website:

<script src="https://booking.53degrees.app/iframe-handler.js"></script>

The script automatically checks for common consent patterns in localStorage and cookies. If you're using a standard consent library or custom implementation, you can configure the handler to check your specific consent state.

Configuration Options

The iframe handler supports the following configuration options:

• checkConsent: A function that returns true if the user has consented to cookies, false otherwise

• allowedOrigins: An array of allowed origins for security (defaults to 53 Degrees booking domains)

• updateConsent: An optional callback function that receives consent categories when consent is given in the iframe

Configuration Examples

OneTrust stores consent data in the OptanonConsent cookie. Here's how to configure the handler:

OneTrust

<script src="https://booking.53degrees.app/iframe-handler.js"></script>
<script>
  window.iframeHandler = {
    checkConsent: function() {
      // Check OneTrust consent cookie
      const consentCookie = document.cookie
        .split(&#039;; &#039;)
        .find(row => row.startsWith(&#039;OptanonConsent=&#039;));
      
      if (!consentCookie) return false;
      
      // Parse the consent cookie
      const consentData = decodeURIComponent(consentCookie.split(&#039;=&#039;)[1]);
      
      // Check if analytics and marketing cookies are accepted
      // OneTrust uses &#039;C0001&#039; for necessary, &#039;C0002&#039; for analytics, &#039;C0003&#039; for marketing
      return consentData.includes(&#039;C0002:1&#039;) && consentData.includes(&#039;C0003:1&#039;);
    }
  };
</script>

Cookiebot

Cookiebot stores consent in the CookieConsent cookie. Here's the configuration:

<script src="https://booking.53degrees.app/iframe-handler.js"></script>
<script>
  window.iframeHandler = {
    checkConsent: function() {
      // Check Cookiebot consent cookie
      const consentCookie = document.cookie
        .split(&#039;; &#039;)
        .find(row => row.startsWith(&#039;CookieConsent=&#039;));
      
      if (!consentCookie) return false;
      
      try {
        const consentData = JSON.parse(decodeURIComponent(consentCookie.split(&#039;=&#039;)[1]));
        // Check if marketing and statistics are accepted
        return consentData.marketing === true && consentData.statistics === true;
      } catch (e) {
        return false;
      }
    }
  };
</script>

Custom localStorage Implementation

If you store consent in localStorage with a custom key:

<script src="https://booking.53degrees.app/iframe-handler.js"></script>
<script>
  window.iframeHandler = {
    checkConsent: function() {
      // Check your custom localStorage key
      const consent = localStorage.getItem(&#039;my-custom-consent-key&#039;);
      return consent === &#039;accepted&#039; || consent === &#039;true&#039;;
    }
  };
</script>

Custom Cookie Implementation

If you store consent in a cookie with a custom name:

<script src="https://booking.53degrees.app/iframe-handler.js"></script>
<script>
  window.iframeHandler = {
    checkConsent: function() {
      // Check your custom cookie
      const consentCookie = document.cookie
        .split(&#039;; &#039;)
        .find(row => row.startsWith(&#039;myConsentCookie=&#039;));
      
      if (!consentCookie) return false;
      
      const consentValue = consentCookie.split(&#039;=&#039;)[1];
      return consentValue === &#039;accepted&#039; || consentValue === &#039;true&#039;;
    }
  };
</script>

Multiple Consent Checks

You can combine multiple consent checks:

<script src="https://booking.53degrees.app/iframe-handler.js"></script>
<script>
  window.iframeHandler = {
    checkConsent: function() {
      // Check localStorage first
      if (localStorage.getItem(&#039;cookie-consent&#039;) === &#039;accepted&#039;) {
        return true;
      }
      
      // Fall back to cookie check
      const consentCookie = document.cookie
        .split(&#039;; &#039;)
        .find(row => row.startsWith(&#039;cookieConsent=&#039;));
      
      return consentCookie && consentCookie.split(&#039;=&#039;)[1] === &#039;accepted&#039;;
    }
  };
</script>

Syncing Consent Back to Parent Page

If you want to update your parent page's consent state when a user consents in the iframe:

<script src="https://booking.53degrees.app/iframe-handler.js"></script>
<script>
  window.iframeHandler = {
    checkConsent: function() {
      // Your consent check logic
      return localStorage.getItem(&#039;cookie-consent&#039;) === &#039;accepted&#039;;
    },
    updateConsent: function(categories) {
      // Called when user consents in the iframe
      // categories is an array like [&#039;analytics&#039;, &#039;marketing&#039;]
      localStorage.setItem(&#039;cookie-consent&#039;, &#039;accepted&#039;);
      
      // Optionally trigger your consent library&#039;s update
      if (window.myConsentLibrary) {
        window.myConsentLibrary.acceptCategories(categories);
      }
    }
  };
</script>

Custom Allowed Origins

For security, you can restrict which origins the handler accepts messages from:

<script src="https://booking.53degrees.app/iframe-handler.js"></script>
<script>
  window.iframeHandler = {
    checkConsent: function() {
      return localStorage.getItem(&#039;cookie-consent&#039;) === &#039;accepted&#039;;
    },
    allowedOrigins: [
      &#039;https://booking.53degrees.app&#039;,
      &#039;https://preview.booking.53degrees.app&#039;,
      &#039;https://your-custom-domain.com&#039;
    ]
  };
</script>

How It Works

1. When a form is embedded in an iframe, it sends a REQUEST_CONSENT_STATUS message to the parent page

2. The iframe handler receives this message and calls your checkConsent function

3. The handler responds with the consent status and categories

4. The iframe either inherits the consent (no banner shown) or displays its own consent banner

5. If the user consents in the iframe, your updateConsent callback (if provided) is called to sync the consent state

Troubleshooting

Consent Not Being Detected

• Ensure your checkConsent function returns true when consent is given

• Check browser console for any JavaScript errors

• Verify that your consent storage method (cookie/localStorage) is accessible from the parent page

• Make sure the iframe handler script loads before your forms are embedded

Duplicate Consent Banners

• Ensure the iframe handler script is included on your parent page

• Verify that your checkConsent function correctly detects consent

• Check that the script is loading before the iframe content

Security Concerns

• The handler only accepts messages from origins in the allowedOrigins array

• Default allowed origins include only 53 Degrees booking domains

• Add your custom domains to allowedOrigins if needed, but be cautious about security

Need Help?

If you're using a consent library not covered here or need assistance with configuration, please contact your web developer, our support team or refer to your consent library's documentation for the specific cookie/localStorage keys it uses.

Custom Code Forms

[In Progress...]

Email Forwarding

Email Forwarding takes your contact forms to the next level, automatically syncing yours and your customers replies, allowing you to manage the enquiry from start to finish in 53° OS.

For more information on setting up email forwarding, please visit our integrations page.