Embedding a Slate form into your 360º Tour allows you to seamlessly integrate interactive forms directly into your virtual tour experience. As a Silver Partner of Slate, Concept3D provides a direct connection to Slate, enhancing the experience for both administrators and users. You can select "Slate" from the form type dropdown in the Tour Builder CMS to easily embed your Slate form using HTML.
Benefits of Embedding Forms in Your 360º Tour
Embedding forms directly within your 360º Tour using HTML offers several key benefits:
- Data Security and Privacy: Concept3D never handles or stores any end-user information. All data collection, processing, and storage are managed entirely by Slate, ensuring that your institution remains in full control of the user data and complies with all necessary data privacy regulations.
- Streamlined Integration with Slate: Our Silver Partnership with Slate ensures that the implementation process is smooth and reliable, offering support and stability from both platforms. This partnership emphasizes our commitment to providing high-quality, efficient solutions that work seamlessly together.
- Direct Data Ownership: Because Concept3D does not interact with the data, your institution retains direct ownership and management of all user submissions, providing an extra layer of confidence and security.
To Embed a Slate Form:
1. Create Your Form in Slate:
- Design and customize your form within the Slate platform.
- Apply any necessary styling using Slate's form customization options.
- You may need to tweak your CSS to get the form displaying as desired. Some sample CSS is provided below. Simply update the form ID and make any other desired changes.
- For more information on form-specific CSS, see this article: Form-Specific CSS Custom Styles.
2. Obtain the Embed Code from Slate:
- For more information on whether to use a dynamic or simple embed code, see this article: Embedding Forms.
3. Set up your form embed in Tour Builder:
- When adding a form, select "Slate" from the form type dropdown. This will configure the system to expect an HTML embed.
- For additional instructions on setting up a tour, see our help article: Advanced Feature: Forms.
4. Preview and Test:
- After embedding the form, preview the tour to verify that the form loads properly and functions as expected.
- Test form submissions to ensure the data is being processed correctly.
Example Code
Example HTML Code:
Here’s an example of the embed code that you might use for a simple Slate form.
<div id="form_ffd1e95a-b66c-44ea-9877-aee8b13bae89">Loading...</div><script>/*<![CDATA[*/var script = document.createElement('script'); script.async = 1; script.src = 'https://c3d.test.technolutions.net/register/?id=ffd1e95a-b66c-44ea-9877-aee8b13bae89&output=embed&div=form_ffd1e95a-b66c-44ea-9877-aee8b13bae89' + ((location.search.length > 1) ? '&' + location.search.substring(1) : ''); var s = document.getElementsByTagName('script')[0]; s.parentNode.insertBefore(script, s);/*]]>*/</script>
Example CSS:
Here’s an example of the CSS that you might use for a Slate form.
Feel free to use this same formatting, just update the form ID found in Slate embed.
/* Form Container Styling */
#form_ffd1e95a-b66c-44ea-9877-aee8b13bae89 {
border-radius: 15px;
box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
max-width: 600px;
font-size: 12px; /* Set base font size for the entire form */
margin: 20px auto;
}
form {
margin: 20px auto;
padding: 30px;
border: 1px solid #e0e0e0;
}
/* Input Fields Styling */
#form_ffd1e95a-b66c-44ea-9877-aee8b13bae89 input {
border-radius: 5px;
border: 1px solid #b0bec5;
padding: 7px;
background-color: #f5f5f5;
font-size: 12px; /* Font size for input fields */
box-sizing: border-box;
transition: border-color 0.3s ease, box-shadow 0.3s ease;
}
/* Input Focus State */
#form_2abcbd3a-a1b3-4422-b050-39a1c5d6e0bc input:focus {
border-color: #008080; /* Pop of teal color */
box-shadow: 0 0 5px rgba(0, 128, 128, 0.5);
outline: none;
}
/* Button Styling */
#form_ffd1e95a-b66c-44ea-9877-aee8b13bae89 button {
background: linear-gradient(135deg, #008080 0%, #004d40 100%);
color: white;
padding: 12px 16px;
border-radius: 5px;
border: none;
cursor: pointer;
font-weight: bold;
font-size: 12px;
transition: background 0.3s ease, transform 0.2s ease;
display: block; /* Make the button a block element */
margin: 20px 0;
}
/* Button Hover State */
#form_ffd1e95a-b66c-44ea-9877-aee8b13bae89 button:hover {
background: linear-gradient(135deg, #004d40 0%, #002d2d 100%);
transform: translateY(-2px);
}
/* Margin between Elements */
#form_ffd1e95a-b66c-44ea-9877-aee8b13bae89 * + * {
margin-top: 16px;
}
/* Required Field Asterisks */
.form_question[data-required="1"] .form_label::after {
color: #d32f2f; /* Dark red for required fields */
content: " *";
font-size: 12px; /* Font size for asterisks */
}
/* Form Labels */
.form_label {
font-weight: bold;
font-size: 12px; /* Font size for form labels */
color: #333;
}
/* Dropdown Styling */
#form_ffd1e95a-b66c-44ea-9877-aee8b13bae89 select {
margin: 0;
vertical-align: top;
border-radius: 5px; /* Increased border-radius to match input fields */
border: 1px solid #b0bec5;
padding: 7px;
background-color: #f5f5f5;
font-size: 12px; /* Font size for dropdown options */
box-sizing: border-box;
transition: border-color 0.3s ease, box-shadow 0.3s ease;
margin-left: 0 !important;
margin-right: 5px;
margin-top: 5px;
}