How to use forms and inputs in TeleportHQ
Adding a form in your TeleportHQ project is quite simple. Here are the steps you need to take:
Building the layout
Connecting the form
Deploying and Testing
Fine tuning
First, let's take care of the structural aspect of the form:
In the Right side panel go to the Elements tab
Scroll to the Interaction section
Drag a Form element into your design canvas
Drag an Input element into your design canvas, inside your Form element
Drag a Button element into your design canvas, inside your Form element
Available input types available in the visual editor are: Text, Texarea, Checkbox, Radio and Select.
In order for your form to work, the Input and Button elements must be children of your form container.
At this stage you should have something looking like this:
Now that a basic visual layout is constructed, we need to be able to send the form data to a server. TeleportHQ does not provide this functionality out of the box. However, you can use a free service like https://formsubmit.co.
The next part of this tutorial assumes that you already have an account to Formsubmit.co or that you have your own server which can receive POST requests. In both cases, you need to add a URL to which our form will post its data. In this case, these are the next steps to make in TeleportHQ:
Select the Form element in the design canvas
In the right inspector, open the HTML section
Copy and paste the URL of the server which will receive your data into the Action attribute of the form
Set the method attribute to POST
Set the Enctype to application/x-www-form-urlencoded
Your HTML section in the right inspector should look like this:
Select your Input element
Open the HTML section in the right inspector
Set the name attribute to email
Set the placeholder attribute to your email
Set required switch button on
Select the submit button in the canvas, open the HTML section in the right inspector and set the type attribute to submit.
Finally, we need to test that everything is working well. For that we need to publish the project (or to download it and execute the code locally).
If everything has been configured properly, when you click on your form submit button, a POST request should be made sending your form data to the server you have chosen.
Generally, if all goes well the server you have chosen should return a confirmation message to your submission page. If you use Formsubmit.co you can setup a "Thank you" page directly within your form parameters. Otherwise, you can add some custom JavaScript code into your project settings in order to catch the response event and create a custom experience for your users.
Building the layout
Connecting the form
Deploying and Testing
Fine tuning
Building the layout
First, let's take care of the structural aspect of the form:
In the Right side panel go to the Elements tab
Scroll to the Interaction section
Drag a Form element into your design canvas
Drag an Input element into your design canvas, inside your Form element
Drag a Button element into your design canvas, inside your Form element
Available input types available in the visual editor are: Text, Texarea, Checkbox, Radio and Select.
In order for your form to work, the Input and Button elements must be children of your form container.
At this stage you should have something looking like this:
Connecting the form
Now that a basic visual layout is constructed, we need to be able to send the form data to a server. TeleportHQ does not provide this functionality out of the box. However, you can use a free service like https://formsubmit.co.
The next part of this tutorial assumes that you already have an account to Formsubmit.co or that you have your own server which can receive POST requests. In both cases, you need to add a URL to which our form will post its data. In this case, these are the next steps to make in TeleportHQ:
Customizing the Form element
Select the Form element in the design canvas
In the right inspector, open the HTML section
Copy and paste the URL of the server which will receive your data into the Action attribute of the form
Set the method attribute to POST
Set the Enctype to application/x-www-form-urlencoded
Your HTML section in the right inspector should look like this:
Customizing the Input element
Select your Input element
Open the HTML section in the right inspector
Set the name attribute to email
Set the placeholder attribute to your email
Set required switch button on
Customizing the Button element
Select the submit button in the canvas, open the HTML section in the right inspector and set the type attribute to submit.
Deploying and Testing
Finally, we need to test that everything is working well. For that we need to publish the project (or to download it and execute the code locally).
If everything has been configured properly, when you click on your form submit button, a POST request should be made sending your form data to the server you have chosen.
Fine tuning
Generally, if all goes well the server you have chosen should return a confirmation message to your submission page. If you use Formsubmit.co you can setup a "Thank you" page directly within your form parameters. Otherwise, you can add some custom JavaScript code into your project settings in order to catch the response event and create a custom experience for your users.
Updated on: 23/02/2023
Thank you!