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.
To create a form:
Visit Settings > Contact Forms
Click Create Form
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.
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.
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.
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.
You can embed your 53 Degrees contact forms anywhere on your website using an iframe.
Go to Settings → Contact Forms in your dashboard
Click on the form you want to embed
Open the How To Use section
Copy the iframe code provided
The form URL includes your organisation slug and form ID automatically.
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
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>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>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>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.
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.
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
OneTrust stores consent data in the OptanonConsent cookie. Here's how to configure the handler:
<script src="https://booking.53degrees.app/iframe-handler.js"></script>
<script>
window.iframeHandler = {
checkConsent: function() {
// Check OneTrust consent cookie
const consentCookie = document.cookie
.split('; ')
.find(row => row.startsWith('OptanonConsent='));
if (!consentCookie) return false;
// Parse the consent cookie
const consentData = decodeURIComponent(consentCookie.split('=')[1]);
// Check if analytics and marketing cookies are accepted
// OneTrust uses 'C0001' for necessary, 'C0002' for analytics, 'C0003' for marketing
return consentData.includes('C0002:1') && consentData.includes('C0003:1');
}
};
</script>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('; ')
.find(row => row.startsWith('CookieConsent='));
if (!consentCookie) return false;
try {
const consentData = JSON.parse(decodeURIComponent(consentCookie.split('=')[1]));
// Check if marketing and statistics are accepted
return consentData.marketing === true && consentData.statistics === true;
} catch (e) {
return false;
}
}
};
</script>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('my-custom-consent-key');
return consent === 'accepted' || consent === 'true';
}
};
</script>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('; ')
.find(row => row.startsWith('myConsentCookie='));
if (!consentCookie) return false;
const consentValue = consentCookie.split('=')[1];
return consentValue === 'accepted' || consentValue === 'true';
}
};
</script>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('cookie-consent') === 'accepted') {
return true;
}
// Fall back to cookie check
const consentCookie = document.cookie
.split('; ')
.find(row => row.startsWith('cookieConsent='));
return consentCookie && consentCookie.split('=')[1] === 'accepted';
}
};
</script>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('cookie-consent') === 'accepted';
},
updateConsent: function(categories) {
// Called when user consents in the iframe
// categories is an array like ['analytics', 'marketing']
localStorage.setItem('cookie-consent', 'accepted');
// Optionally trigger your consent library's update
if (window.myConsentLibrary) {
window.myConsentLibrary.acceptCategories(categories);
}
}
};
</script>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('cookie-consent') === 'accepted';
},
allowedOrigins: [
'https://booking.53degrees.app',
'https://preview.booking.53degrees.app',
'https://your-custom-domain.com'
]
};
</script>When a form is embedded in an iframe, it sends a REQUEST_CONSENT_STATUS message to the parent page
The iframe handler receives this message and calls your checkConsent function
The handler responds with the consent status and categories
The iframe either inherits the consent (no banner shown) or displays its own consent banner
If the user consents in the iframe, your updateConsent callback (if provided) is called to sync the consent state
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
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
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
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.
[In Progress...]
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.