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:


  1. Building the layout
  2. Connecting the form
  3. Deploying and Testing
  4. 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?

Share your feedback

Cancel

Thank you!