Articles on: Elements

How to use create forms and use inputs

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

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

Forms and inputs in the Interaction section

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:

Simple form structure

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 Attributes 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

How the form element should look like

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 input element

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.

Customizing the button element

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: 28/03/2025

Was this article helpful?

Thank you!