In this Spline tutorial I will show you a really cool way for a user to submit their first name and be redirected to a fun 3D Spline scene which has their name being displayed in 3D.
To follow this tutorial you will need Elementor Pro and Spline.
But if you don’t have Elementor Pro you can still take my code and use it on your own platform.
Get Elementor Pro:
https://wickydesign.com/get-elementor
Remix 3D Spline Scene:
https://community.spline.design/file/8dff84b4-30c9-4bf5-ac8b-d26bfea9d21f
Timestamps:
- 0:00 Introduction
- 0:51 Set Up Spline Scene
- 2:49 Add HTML Code to Website
- 6:24 Create Form Redirect
- 8:44 Testing
JavaScript Code
<canvas id="canvas3d"></canvas>
<script type="module">
import { Application } from 'https://unpkg.com/@splinetool/runtime@1.0.55/build/runtime.js';
const canvas = document.getElementById('canvas3d');
const spline = new Application(canvas);
// Function to get the value of the 'firstname' parameter from the URL
function getFirstNameFromURL() {
const queryParams = new URLSearchParams(window.location.search);
return queryParams.get('firstname') || 'First Name'; // Provide a default value if 'firstname' is not found
}
// Load the Spline scene and then set the variable based on the URL parameter
spline.load('scene.splinecode')
.then(() => {
const firstNameValue = getFirstNameFromURL();
spline.setVariable('wickydesign', firstNameValue);
});
</script>
