How to implement forms in a static website

Websites vary in design, purpose and complexity, but are generally categorized as static or dynamic. Static websites are pre-rendered and offer the same content to all visitors. They are simple in structure, usually easy to manage and fast to load. On the other hand, dynamic websites use server-side programming languages to generate content on-the-fly.

Static websites usually don't support handling interactive elements such as forms directly on the site, as such operations require a server to store and process the data. But here's the catch: forms are an important bridge between users and us. Through forms, we can get valuable suggestions or queries from our users, so that we can optimize our website content based on this feedback and deliver a better experience to our users. However, static websites cannot accomplish this task directly, so we can improve the user experience by customizing our content.

Select Forms Processing Service

Form processing services are third parties that collect and process form data for static websites. They provide the server-side infrastructure needed to process form submissions, enhancing the functionality and interactivity of a website while maintaining the benefits of a static website.

When a user submits a form, the data is sent to the endpoint of a form processing service. The service then processes the data, stores it securely, and sends a notification to the appropriate recipient. There are many form processing services. Let's take a look at some of the most popular form processing services.

1. Formspree

Formspree is a user-friendly form processing service that simplifies the process of adding forms and managing form submissions in static sites. It is available in a free version with basic features, such as 50 form submissions per month, and in a paid version with more advanced features, including safe lists and spam protection.

2. Formbucket

FormBucket Mention provides a convenient way to collect and manage form submissions by saving forms to "buckets," each with a unique URL.You can use Formbucket's user-friendly dashboard page to define form fields and set validation rules to align with your site's branding.

3. Getform

Getform Getform is a forms backend platform that provides a simple and secure way to handle form submissions.Getform provides an intuitive user interface for managing form submissions, email notifications, and integration with popular services like Slack and Google Sheets.

Setting up form processing services with Getform

Managing form submissions on your website can be greatly simplified by using a form processing service such as Getform. When a user submits a form, Getform takes over the entire process, eliminating the need for a backend API to process and store these submissions.

With this seamless integration, you can efficiently manage all your replies in a dedicated message inbox. To get started, make sure you are familiar with theHTML,CSSrespond in singingJavaScriptHave a basic understanding and follow the steps below:

1. enrollment Getform account.
2. Go to your Getform account dashboard and click the+ Created Button.
3. In the dialog box that appears, make sure the "Forms" . Provide a descriptive endpoint name and select the appropriate time zone. Then, click"Create"The

Getform will generate the form submission endpoint URL, which must be added to the action attribute of the form element.

Creating Forms with HTML and CSS

Once you've set up your form processing service, you can create forms using HTML, CSS, and JavaScript.

1. In the terminal, create a file namedformsof the project folder , and change the current directory to the project directory:mkdir forms

mkdir forms
cd forms
mkdir forms
cd forms
mkdir forms
cd forms

2. Add the following project files:

#unix-based systems
touch index.html styles.css script.js
#windows
echo. > index.html & echo. > styles.css & echo. > script.js
#unix-based systems
touch index.html styles.css script.js

#windows
echo. > index.html & echo. > styles.css & echo. > script.js
#unix-based systems
touch index.html styles.css script.js

#windows
echo. > index.html & echo. > styles.css & echo. > script.js

3. Next, create an HTML form. In this guide, the code provided below will help you create a form that includes name and e-mail address input boxes, a message text area, and a submit button. This code can be added to your index.html Documentation:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Contact Form</title>
    <link rel="stylesheet" href="styles.css">
</head>
<body>
    <div class="container">
        <h1 class="form-title">Contact Us</h1>
        <form class="contact-form" name="contactForm" action="/en/Getform%20URL/" method="POST" data-trp-original-action="<Getform URL>">
            <div class="input-group">
                <label for="name" class="form-label">Name.</label>
                <input type="text" id="name" name="name" class="form-input" required>
                <label for="email" class="form-label">Email.</label>
                <input type="email" id="email" name="email" class="form-input" required>
                <label for="message" class="form-label">Message.</label>
                <textarea id="message" name="message" class="form-textarea" rows="4" required>
                </textarea>
            </div>
            <div class="form-control">
                <button type="submit" id="submitBtn" class="form-submit">Submit</button>
            </div>  
        <input type="hidden" name="trp-form-language" value="en"/></form>
    </div>
    <script src="script.js"></script>
</body>
</html>
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Contact Form</title>
    <link rel="stylesheet" href="styles.css">
</head>
<body>
    <div class="container">
        <h1 class="form-title">Contact Us</h1>
        <form class="contact-form" name="contactForm" action="/en/Getform%20URL/" method="POST" data-trp-original-action="<Getform URL>">
            <div class="input-group">
                <label for="name" class="form-label">Name.</label>
                <input type="text" id="name" name="name" class="form-input" required>

                <label for="email" class="form-label">Email.</label>
                <input type="email" id="email" name="email" class="form-input" required>

                <label for="message" class="form-label">Message.</label>
                <textarea id="message" name="message" class="form-textarea" rows="4" required>
                </textarea>
            </div>

            <div class="form-control">
                <button type="submit" id="submitBtn" class="form-submit">Submit</button>
            </div>  
        <input type="hidden" name="trp-form-language" value="en"/></form>
    </div>
    <script src="script.js"></script>
</body>
</html>
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Contact Form</title>
    <link rel="stylesheet" href="styles.css">
</head>
<body>
    <div class="container">
        <h1 class="form-title">Contact Us</h1>
        <form class="contact-form" name="contactForm" action="/en/Getform%20URL/" method="POST" data-trp-original-action="<Getform URL>">
            <div class="input-group">
                <label for="name" class="form-label">Name.</label>
                <input type="text" id="name" name="name" class="form-input" required>

                <label for="email" class="form-label">Email.</label>
                <input type="email" id="email" name="email" class="form-input" required>

                <label for="message" class="form-label">Message.</label>
                <textarea id="message" name="message" class="form-textarea" rows="4" required>
                </textarea>
            </div>

            <div class="form-control">
                <button type="submit" id="submitBtn" class="form-submit">Submit</button>
            </div>  
        <input type="hidden" name="trp-form-language" value="en"/></form>
    </div>
    <script src="script.js"></script>
</body>
</html>

4. Navigate to the Getform panel and copy the endpoint URL, then paste this URL into the action attribute inside the form's opening tag in the HTML code.
5. Finally, add CSS styles to the styles.css file to customize the design and appearance of the form.

Data Validation with JavaScript

Data validation checks that user input meets specific criteria and validation rules before it is processed or stored. Performing data validation helps avoid submission of incorrect or malicious data, provides users with immediate feedback on input errors, and ensures that only valid data is processed further. It plays a vital role in maintaining data integrity and accuracy.

There are several ways to implement data validation, including performing client-side validation using JavaScript, server-side validation, or a combination of the two. In this article, we will implement client-side validation for the contact form to ensure that users do not submit empty fields and that the email provided is formatted correctly.

1. First, add the following code by adding it to thescript.js file to define the validation function:

function validateForm() {
    const name = document.getElementById('name').value;
    const email = document.getElementById('email').value;
    const message = document.getElementById('message').value;
    if (name.trim() === '' || message.trim() === '') {
        alert('Please fill out all fields.');
        return false;
    }
    const emailRegex = /^[^\s@]+@[^\s@]+\.[^\s@]+$/;
    if (!emailRegex.test(email)) {
        alert('Please enter a valid email address.');
        return false;
    }
    return true;
}
function validateForm() {
    const name = document.getElementById('name').value;
    const email = document.getElementById('email').value;
    const message = document.getElementById('message').value;
    if (name.trim() === '' || message.trim() === '') {
        alert('Please fill out all fields.');
        return false;
    }
    const emailRegex = /^[^\s@]+@[^\s@]+\.[^\s@]+$/;
    if (!emailRegex.test(email)) {
        alert('Please enter a valid email address.');
        return false;
    }
    return true;
}
function validateForm() {
    const name = document.getElementById('name').value;
    const email = document.getElementById('email').value;
    const message = document.getElementById('message').value;
    if (name.trim() === '' || message.trim() === '') {
        alert('Please fill out all fields.');
        return false;
    }
    const emailRegex = /^[^\s@]+@[^\s@]+\.[^\s@]+$/;
    if (!emailRegex.test(email)) {
        alert('Please enter a valid email address.');
        return false;
    }
    return true;
}

The validateForm() function does two things: first, it checks that the name and message fields are empty, then it validates the email field using a regular expression and checks that the email address is in a valid format.

If the fields are empty or the email format is invalid, the function will trigger and display an alert message. Conversely, if all form fields pass these validation checks, the function returns true and the form is submitted.

Additional validation rules can be added to ensure the accuracy and integrity of submitted data. For example, the length of user input can be validated, or users can be restricted from submitting certain characters in messages to help prevent potential security breaches (such as injection attacks).

2. Next, call the function above to enable validation using the click event listener callback. Each time the user clicks thesubmit (a report etc)The callback triggers the function whenever the button is pressed. To call the function, add the script.js Add the following code to the file:

document.addEventListener('DOMContentLoaded', function () {
const submitButton = document.getElementById('submitBtn');
if (submitButton) {
submitButton.addEventListener('click', function (event) {
event.preventDefault(); if (submitButton) { submitButton.addEventListener('click', function (event) { event.preventDefault(); }
if (validateForm()) {
document.forms['contactForm'].submit();
resetFormAfterSubmission();
}
return false; }
}); }
}
}).
function resetFormAfterSubmission() {
setTimeout(function () {
const contactForm = document.forms['contactForm'];
contactForm.reset(); }, 500);; function resetFormAfterSubmission()
}, 500);
}
document.addEventListener('DOMContentLoaded', function () {
const submitButton = document.getElementById('submitBtn');

if (submitButton) {
submitButton.addEventListener('click', function (event) {
event.preventDefault(); if (submitButton) { submitButton.addEventListener('click', function (event) { event.preventDefault(); }
if (validateForm()) {
document.forms['contactForm'].submit();
resetFormAfterSubmission();
}
return false; }
}); }
}
}).

function resetFormAfterSubmission() {
setTimeout(function () {
const contactForm = document.forms['contactForm'];
contactForm.reset(); }, 500);; function resetFormAfterSubmission()
}, 500);
}
document.addEventListener('DOMContentLoaded', function () {
const submitButton = document.getElementById('submitBtn');

if (submitButton) {
submitButton.addEventListener('click', function (event) {
event.preventDefault(); if (submitButton) { submitButton.addEventListener('click', function (event) { event.preventDefault(); }
if (validateForm()) {
document.forms['contactForm'].submit();
resetFormAfterSubmission();
}
return false; }
}); }
}
}).

function resetFormAfterSubmission() {
setTimeout(function () {
const contactForm = document.forms['contactForm'];
contactForm.reset(); }, 500);; function resetFormAfterSubmission()
}, 500);
}

Note that the code includes the preventDefault() function to prevent the default form submission action. This allows you to validate the form before submitting information to Getform.

After successful validation and submission, the resetFormAfterSubmission() function is triggered to reset the form after a half-second delay to allow more submissions.

summarize

Now that forms have been successfully implemented, there are countless opportunities to customize them. For example, forms can be further styled using CSS or your favorite preprocessor language, and advanced validation techniques can be implemented to enhance the design and functionality of the form.