How to create forms using slides and collect data on Static.app

HTML • ToolsSam Norton • • 7 minutes READ

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 client-side programming language (such as JavaScript and related frameworks)
  • 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.

Video version

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.

Use Slides to generate a predefined contact form

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.

Contact form

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.

Activate for download

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.

Slide 55

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.

Pages

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.

3 points
To download

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.

Download and edit code on Static.app
Download website

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.

Save changes

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.

Modify the code
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 tag then click on the “Save changes“button. the static-form The attribute allows you to collect all form data. While static-form-id = “contact_form” will create a new database called ” Contact form “ where all of our data submissions will be stored.

the the tag should look like this:

Finally, if we visit our contact page link through yourdomain.static.app/contact which is the subdomain we have configured for this website, we will see the same result as the image below.

Completed contact form

Now is the time to test the form on the contact page of our slides. Fill in some information on the contact form and click on the “Send the message“button. Once the form is submitted, the button text will change from”Send the message” at “Do“as seen in the images below.

Contact form sent

Managing contact form submissions

Now to check the form submissions for that form click on the “Shapes“in the top menu and you will see the list of forms databases that you have on your website.

Managing contact form submissions

If you remember, we named our database “contact_form”When we installed it on our tag above. So if you go and click on the “contact_formIt will list all of your form submissions for that database, as shown in the image below.

In order to check the content of each form submission, just click on the item you want to check and a modal with the form submission information will appear.

Contents

By clicking on the three vertical dots in the right corner of the item you want to display, then clicking on the “See entry”Will have the same result as shown in the image below.

See entry

Additionally, you can also delete an item or mark an item as spam by clicking the “Mark as spam” Where “To delete” link.

Wrap

The slides allow us to easily generate forms and pages with awesome, beautifully coded designs. You can quickly create your own UI design in just seconds. Besides all that, you can customize it to your liking.

On the other hand, Static.app simplifies the management of form submissions by using the static-form characteristic.

The combination of these two elements will make creating your contact page effortless. You don’t even need to deal with external SMTP services and technologies or even learn hardcore programming in order to have a contact form that works properly.

About Sandra A. Powell

Check Also

Msd matchmaking app – fix fb matchmaking internet dating between two scorpions

Msd matchmaking app – fix fb matchmaking internet dating between two scorpions Who is Wayne …