Web forms are everywhere. Almost everyone on this planet who uses the Internet will fill out at least one form every now and then.
A web form, also known as an HTML form, is an essential part of a website that allows the user to enter information or files similar to a paper document. Web forms are displayed in browsers using HTML and related web technologies.
Collecting data with forms is not an easy task and requires external tools, technologies and third-party services to be configured.
Form submissions can be collected or processed in several ways, either through:
- A server-side programming language (such as PHP, Ruby, and Python)
- Or any other programming language or platform that can handle the collection of form data.
While you can use any of these methods to collect your form data, there are ways to generate form templates without learning hardcore programming or even touching many lines of code, such as using a predefined form.
In this tutorial, I will show you how to quickly generate forms with Slides which you can use with Static.app static-form functionality to collect, access and manage your form submissions.
Online email template generator
With Postcards, you can create and edit email templates online without any coding skills! Includes over 100 components to help you create personalized email templates faster than ever.
Try for freeOther products
Slides is a static website builder which is used to create beautiful animated static websites in minutes. It comes with easy to customize native components and modules to help you execute your web design ideas with just a few clicks.
On the other hand, Static.app is a static website hosting solution with one click drag & drop feature which can unzip your archive and create url for every page within minutes.
Without further ado, let’s get started.
Use Slides to generate a predefined contact form
Slides makes it easy for anyone to create contact forms using its predefined themes. To generate a contact form theme, go to designmodo.com/slides.
To get started, we need to either create an account on Designmodo.
To note: In order for us to use the contact form theme of slides, we need to create a company or agency account.
After logging into our account, we need to create a new project by clicking on the “new project“on our slide dashboard, and a modal window will appear.
From the modal, we can name our project, domain and description according to our preference, as shown in the image below.
As an example, I will name our project “Contact form“and put a description of”This is a contact form“. I’m going to leave the domain empty for now since we’re going to upload it to Static.app. To create this project, we need to click the”To create”As shown in the image below.
Next, we need to create a page. On the page creation dashboard, click the “new page“and another modal will appear on the screen.
From there we can put our preferred name and it will automatically generate the title and filename for us. In addition, we can also put the description of our desired page and check the box “Activate for download”To be able to download the page later.
As an example, we will name this page as “contact“and put a page description of”This is a demo contact page. “To create this page we have to click on the”To create”As shown in the image below.
After creating the page, we will be redirected to the slides page where we can select a template of our choice.
Since we want to work on a contact form, just scroll down the slides page and select “Slide 55“as shown in the picture below.
Then, to download this contact form template, go to the Pages dashboard by clicking on the “Pages”In the upper left corner of the screen.
From there, we’ll see the contact form template we’ve added. To download it, simply click on the three vertical dots icon at the bottom of the contact page and select “To download“as shown in the picture below.
A new modal will then appear which will allow us to download the page template in zipped format by clicking on the “To download” button.
Download and edit code on Static.app
Now that we have the downloaded version of our contact page, let’s head over to Static.app and download our website. After logging into our account, click on the “New website “ box and it will redirect us to the download page as seen in the images below.
From there we need to drag and drop our zipped version of the contact page of the slides we uploaded.
Once the website has been downloaded, we may name the website with our preferred name, description and subdomain. For the example, we’ll leave the website name and subdomain configuration to its auto-generated default configuration and just click “Save changes”As shown in the image below.
Next we need to change the contact page code of the slides, so head over to the Pages dashboard and click on the three vertical dot icons. Then click on the “Modify the code”And it will redirect you to the code editor.
In order to make our slide contact page work, we need to put the static-form static-form-id = “contact_form” attributes inside our