How to Use Forms on a Static Site

What are static websites?

Many of today's websites are powered by a database-driven CMS such as WordPress. This type of website can be slow to load, difficult to maintain for operators, and vulnerable to hackers. A static website can solve many of these problems and may be better suited to your needs.

A static website uses pre-written HTML, CSS and JavaScript files to deliver to the web browser, unlike traditional dynamic websites where the source code of the web page is rendered at the time of the request.

Static websites allow you to have more flexibility in how you deliver your content, as content creation is independent of the limitations and idiosyncrasies of a CMS. Cost efficiency is another reason why companies switch to a static website, as static files are lightweight and often faster and cheaper to run.

Advantages of static websites

Performance and loading time

Page speed is generally faster because a static website is pre-rendered as lightweight, static HTML files. It is more efficient to render a pre-built web page than to rebuild the web page for each visitor. Better load times lead to higher user satisfaction and can also translate into better search engine rankings.

Versatility

Static websites can be rendered using a variety of frameworks. Developers can work with their preferred language and framework (e.g. JavaScript, Ruby, React, Vue, etc.), making them easier to build and maintain. Other benefits include better utilization of your cloud infrastructure and simplifying website development thanks to fewer dependencies.

Scalability

A static website allows you to showcase content across multiple channels without having to recreate it. Plus, a static structure is easy to adapt to the changing needs of your website or app.

Security

With a classic dynamic website, hackers have multiple potential points of attack to penetrate your data because the entire system is interconnected. With a static website, on the other hand, your content database exists independently of your website presentation. This means there are fewer entry points for hackers and your data is more secure. Website visitors do not connect to the content database every time they visit your website, which is another security and speed advantage compared to database-driven websites.

How to create static websites

From your content and a design template for the website's appearance, a static site generator is used to render the finished and static website files. There are a lot of such generator programs that are used with different programming languages and frameworks. When choosing the right static site generator, factors such as the size of the website, its main purpose and functionality should also be considered.

Here is a small selection of popular frameworks for generating static websites:

• Hugo
  A framework with fast page generation.
• Gatsby
  The most popular React based generator.
• Jekyll
  Widely used and based on Ruby.
• Eleventy
  Uses JavaScript and is becoming increasingly popular.
• Astro
  A particularly fast generator.
• Hexo
  Powerful framework for blogs.

Integrate form into static website

When creating a static HTML website or using generators, setting up forms with email delivery can cause some problems. Not using a server-side language is one of the main advantages of static HTML websites in terms of performance and security, but it prevents the typical way of setting up a contact form for mail delivery.

Making the form functional

Many websites use a simple mailto link for this. We have described the technique here: Mailto link in HTML code. However, there are some problems with this approach, such as insufficient support from web browsers and easy abuse by spammers.

A more reliable technique is to use a professional backend service that takes care of receiving the form submissions. This also offers a range of features to customize the processing of the submissions according to your own wishes and requirements. These include settings for sending notifications and security functions to reliably combat spam.

Form.taxi offers you such a backend service. You can set this up for your own online form in just a few steps. This service offers a whole range of features for reliable transmission of form submissions.

• Free basic use
• Protection against spam and abuse
• Notification via email and smartphone app
• Data protection compliant

To use it, you only need to register your form with Form.taxi to receive an individual sending address. You insert the address in the action attribute of your HTML form and the shipments can then be transmitted.

Here is an example of a very simple contact form in HTML.

<form action="SENDING ADDRESS" method="post">
  <label for="name">Your name</label>
  <input type="text" id="name" name="Name">
  <label for="email">Email address</label>
  <input type="email" id="email" name="Email">
  <label for="msg">Your message</label>
  <textarea id="msg" name="Message"></textarea>
  <button type="submit">Submit</button>
</form>

The individual sending address for the form is inserted in place of "SENDING ADDRESS" and when the form is sent, all entries are sent to the address for further processing. You can of course use the backend service for any HTML form with any input fields.

Request a sending address from Form.taxi right here to complete your static form in just a few minutes.

The Form.taxi administration interface offers a range of setting options to optimally adapt shipment processing. A detailed description of all functions can be found in the documentation.