Include 3D models in your Gravity Forms, using Spline 3D

Include 3D models in your Gravity Forms, using Spline 3D and Gravity Forms. Using Spline 3D to create and animate amazing-looking 3D scenes is super easy using their online tools and software. Spline 3D lets you export your projects and embed them anywhere using their Spline viewer or iFrame options. So you could embed these projects anywhere, not just your forms.

Export your spline scene

This step is actually really easy thanks to the clever export options offered by Spline 3D. Within spline, just click on the export button to open the export modal dialogue. Then select the second choice, the Spline viewer, and copy your unique Spline URL. We’ll then use this to paste into a simple Gravity Forms HTML field. Pretty simple huh?

Export options

Just ensure you set up your scene and initial zoom how you want. The Spline viewer also has some in-depth settings like orbit, pan, and zoom options that you can control and set for your desired result.

Adding your spline scene to your form

Next, add an HTML field to your Gravity Forms and paste in the SPline viewer iFrame code it provides. That’s it. Your 3D scene should now load when your form loads. Let’s look at some extra CSS and icons we can add to the iFrame to make it obvious to the user that they can interact with the 3D scene.

Spline 3D in your Gravity Forms — Add spline viewer iframe to a HTML field

Example HTML

The below example has a 3D icon SVG, above the Spline viewer embed code. Add this to your HTML and replace the Spline embed code with your own.

<svg class="icon" width="117" height="117" viewBox="0 0 117 117" fill="none" xmlns="http://www.w3.org/2000/svg">
<path d="M116.5 58.464C116.5 48.5837 101.453 40.3707 79.7649 37.0947C79.3899 34.6468 78.9524 32.2561 78.4472 29.9592L83.9732 28.9071L73.718 18.0009L68.1816 31.9129L74.0305 30.7983C74.4368 32.6316 74.7909 34.5327 75.1139 36.4701C69.916 35.8764 64.4056 35.5483 58.6605 35.5483C52.7647 35.5483 47.1136 35.892 41.7965 36.5118C44.9788 17.4185 51.9944 5.32914 58.4632 5.32914C61.8069 5.32914 65.3225 8.48541 68.3487 14.2146L72.3175 12.1157C67.3852 2.79274 62.0571 0.834473 58.4575 0.834473C48.6397 0.834473 40.4681 15.6891 37.1455 37.1518C15.6815 40.4747 0.828125 48.6414 0.828125 58.4638C0.828125 62.0627 2.78653 67.3909 12.1093 72.3238L14.2083 68.355C8.47906 65.3238 5.32279 61.8134 5.32279 58.4695C5.32279 52.0007 17.4165 44.9909 36.5108 41.8029C35.891 47.1258 35.5472 52.7769 35.5472 58.6669C35.5472 64.4117 35.8754 69.9221 36.4691 75.1202C34.5265 74.7973 32.6254 74.4431 30.7921 74.0369L31.9066 68.1879L18 73.7243L28.9062 83.9743L29.9583 78.4483C32.2553 78.9536 34.6406 79.391 37.0938 79.766C40.3698 101.449 48.5834 116.501 58.4631 116.501C68.3486 116.501 76.5418 101.479 79.8271 79.8234C101.483 76.5422 116.504 68.3338 116.504 58.4594L116.5 58.464ZM40.0409 58.6671C40.0409 52.4067 40.4419 46.5369 41.1242 41.1311C46.5305 40.4436 52.4002 40.0478 58.6602 40.0478C64.7488 40.0478 70.4676 40.4176 75.7536 41.0686C76.4671 46.7093 76.8786 52.6312 76.8786 58.6673C76.8786 64.7924 76.4984 70.537 75.8421 75.85C70.5348 76.5062 64.7848 76.8864 58.6594 76.8864C52.623 76.8864 46.701 76.475 41.0608 75.7614C40.4097 70.4802 40.04 64.7562 40.04 58.6681L40.0409 58.6671ZM58.4622 112.006C51.9414 112.006 44.8636 99.7246 41.7169 80.3698C47.1857 81.0104 52.8732 81.375 58.6649 81.375C64.4566 81.375 69.9722 81.0417 75.1956 80.4479C72.0393 99.7599 64.9768 112.005 58.4609 112.005L58.4622 112.006ZM80.4462 75.1991C81.04 69.9751 81.3733 64.4387 81.3733 58.6685C81.3733 52.8982 81.0087 47.1841 80.3681 41.7205C99.7281 44.8715 112.004 51.9445 112.004 58.4658C112.004 64.9871 99.7541 72.0445 80.4414 75.2005L80.4462 75.1991Z" fill="white"/>

</svg><script type="module" src="https://unpkg.com/@splinetool/viewer@0.9.383/build/spline-viewer.js"></script>
<spline-viewer url="https://prod.spline.design/jxufvAqCD8myeqqX/scene.splinecode"></spline-viewer>

Styling the HTML field and 3D icon

Add the below CSS to your form or website, to style and position the 3D icon and HTML field. Just make sure your HTML field has the class previewDark in the appearance tab within the Gravity Forms editor.

.previewDark {
    background: #323232;
    border-radius: 10px;
    height:500px;
    position: relative;
}
.icon {
    position: absolute;
    bottom: 40px;
    width: 40px;
    right: 50px;
    height: 50px;
}

3D files in your Gravity Forms

That’s it! The possibilities are pretty endless with what you could achieve with Gravity Forms and Spline. We’d love to see what you come up with. Below is another example to show you what you can do within Spline. Enjoy!