DEV Community: Mertcan Yücel

10 HTML Form Tags You Should Know

Mertcan Yücel — Mon, 30 Aug 2021 13:47:00 +0000

This article has been originally posted on Getform Blog.

HTML tags can be considered as special keywords which help web browsers to define how to format and display the content within the website. Since HTML forms are commonly used to collect input from website visitors to receive feedback, support requests, job applications, or more, form-related HTML tags are a lot more interactive than other HTML tags.

In this guide, we will go over all the form-related HTML tags starting from the most known ones like

and tags and then continue with the ones that might be very helpful and interesting to use such as and tags for shaping your HTML forms in the best way.

HTML Form Tag

The <form> tag is used for creating an interactive section, a form to gather user inputs within your website. It defines the area that contains all the form elements for data submission.

The most common and important attributes used with the

tag are "action" and "method". The "action" attribute specifies the URL of the service that will receive and process the data after form submission. The "method" attribute on the other hand defines the HTTP method for sending the data which can get the value of either GET or POST.

Here's how the <form> tag is used;

<form action="https://getform.io/f/{unique-form-endpoint-goes-here}" 
method="POST">
All the form content goes here..
</form>

Input Tag

The <input> tag is the most popular one since it helps you to define different kinds of input fields such as text, email address, phone number, dates, file upload, radio buttons, and more.

In order to specify the input field, the "type" attribute is necessary to use with the <input> tag. Another useful attribute is "name" which defines the name of the input to be recognized and get the value when it's sent to the server. You can also use the "placeholder" attribute to give a hint to users about what kind of value is expected from the input field. The "required" attribute is also important for specifying the input fields that must be filled out before submitting the form.

Let's add some use cases of the <input> tag for different kinds of input fields into the <form> tag;

<label for="name">Full Name*:</label>
<input type="text" name="name" placeholder="Your Name*" 
required="required">

<label for="email">Email Address*:</label>
<input type="email" name="email" placeholder="Your Email*" 
required="required">

<label for="phone">Phone Number</label>
<input type="tel" name="phone" placeholder="1-(555)-555-5555">

<label for="male">Male</label>
<input type="radio" name="gender" />

<label for="female">Female</label>
<input type="radio" name="gender" />

<label for="other">Other</label>
<input type="radio" name="gender">

Label Tag

The <label> tag is used for creating a caption or label for input elements on your web form. It provides a short description of the input field.

You can use the <label> tag by placing the form control inside it or by adding the "for" attribute which is used for specifying the input element that is bound to the label.

We will add the <label> tag to existing input fields and also radio buttons that we will be creating by using ;

Select & Option Tags

If you need a drop-down menu with various options in your form, then you can use the <select> and the <option> tags. The tag is used for defining the selection or drop-down list itself. All the options in the list are represented by the tag.

Regarding the attributes, you can use the "name" attribute with the <select> tag as well. To define a value for each option in the drop-down list, you should add the "value" attribute to the <option> tag.

Here's an example of how it looks like;

Textarea Tag

The <textarea> tag is used for creating multi-line text areas that can have an unlimited number of characters. It is a very useful tag for having a form field to gather visitor's comments or messages.

If you want to specify the size of the text area, you can add "rows" and "cols" attributes. The "name" attribute is also used here to define the name that is sent by the browser. Another one is the "maxlength" attribute which allows you to limit the number of characters that can be entered in the text area.

Here's an example;

Optgroup Tag

As one of the lesser-known form-related HTML tags, The <optgroup> tag can be very useful if you want your visitors to choose an option from a long drop-down list in an easier way. You can group related elements within the <select> list by using the <optgroup> tag. You can add the "label" attribute to define a common name for each group of options.

Let's use the <optgroup> tag for the drop-down list that we created earlier;

Progress Tag

As one of the tags introduced with HTML5, the <progress> tag is used for creating a progress bar to display the progress of tasks like uploads or downloads. The most common use case of the tag in web forms is to represent the progress of a file uploading.

To determine the progress value, you can use "value", "min" and "max" attributes with the <progress> tag.

Let's create a progress bar for file uploading which will be displayed by the ;

Fieldset & Legend Tags

You can think of the <fieldset> tag as a container for the related form elements. It is helpful to make your form more understandable for users. The <legend> tag is there to add a title for the box that is created by the <fieldset> tag.

Let's use these tags to group some of the form elements mentioned earlier;

Output Tag

As a newly introduced and lesser-known tag compared to others, the <output> tag is used for displaying a result of a calculation or a user action performed usually by a script.

You can use the "name" attribute to indicate a name for the <output> tag. To define a unique id for any element in an HTML document, you should use an "id" attribute which allocates a unique identifier used by CSS or javascript to perform certain tasks. Another attribute that can be used with the <output> tag is the "for" attribute. It specifies the relationship between the result and the elements that are used in the calculation by listing the "id" attributes.

Let's demonstrate one of the <output> tag's use cases built with the help of ;

Button Tag

As its name signifies, the <button> tag is used for creating clickable buttons within your HTML form. You can also create buttons by using the but you can not add a text inside the button without the "value" attribute. You should add the "type" attribute to define the type of the button that is sent by browsers.

Here's how it is used;

That's it!

Lastly, let's create a complete Job Application form with the form related HTML tags that we covered earlier.

This example form contains the <form> tag with enctype="multipart/form-data" attribute to allow file uploads, <fieldset>, <legend> , <label>, <select>, <option> <optgroup>, <textarea>, <progress> and <input> tags and finally to submit the data <button> tag.

To submit the data, we will place a unique form endpoint generated on Getform and place it to action attribute, once submitted here's how it will look on Getform dashboard.

Conclusion

We hope you will find this guide useful for discovering major form-related HTML tags. If you liked this post, don't forget to share and follow us on LinkedIn and Twitter for more updates from Getform blog!

If you would like help setting up Getform on your HTML forms, feel free to reach us out at info@getform.io

You can find more information and code samples for different use cases from the resources below.

Create and Deploy Gatsby.js Forms using Getform and Vercel

Mertcan Yücel — Sun, 22 Aug 2021 21:00:27 +0000

Getform is a form backend platform built for developers and designers that handles form submissions on static sites and sends submissions via email.

Getform also provides enhanced spam protection, form automations that includes fill & download forms, automatic responses, custom notifications and connection to 3^rd^ party services such as Google Sheets, Slack, Trello and more.

In this guide, you will discover how to process a file upload form on your Gatsby.js project, handle form submissions using Getform and deploy it with Vercel.

Before getting started, sign up for a free Vercel and Getform account.

Step 1: Set Up Your Gatsby.js Project

Install Gatsby CLI from your terminal:

$ npm install -g gatsby-cli

And create a new Gatsby app:

$ gatsby new gatsby-site

Add the axios dependency to your project:

$ npm install axios

Step 2: Create your form endpoint on Getform.io

Visit your Getform Dashboard and create a new form endpoint. Getform will ask you to name your form endpoint and the timezone of the endpoint.

With your form endpoint created, you can then copy the form's endpoint from the endpoint overview page. This will be used in your project as a place to submit your form data.

Step 3: Create your form component on your Gatsby project

Create a ContactForm.js file in the /src/pages directory with the code below:

import axios from 'axios';
import React, { useState } from "react"
import 'bootstrap/dist/css/bootstrap.min.css';


const GETFORM_FORM_ENDPOINT = "YOUR-FORM-ENDPOINT";


function Form() {
    const [formStatus, setFormStatus] = useState(false);
    const [query, setQuery] = useState({
        name: "",
        email: "",
    });

    const handleFileChange = () => (e) => {
        setQuery((prevState) => ({
            ...prevState,
            files: e.target.files[0]
        }));
    };

    const handleChange = () => (e) => {
        const name = e.target.name;
        const value = e.target.value;
        setQuery((prevState) => ({
            ...prevState,
            [name]: value
        }));
    };

    const handleSubmit = (e) => {
        e.preventDefault();
        const formData = new FormData();
        Object.entries(query).forEach(([key, value]) => {
            formData.append(key, value);
        });

        axios
            .post(
                GETFORM_FORM_ENDPOINT,
                formData,
                {headers: {Accept: "application/json"}}
            )
            .then(function (response) {
                setFormStatus(true);
                setQuery({
                    name: "",
                    email: "",
                });
                console.log(response);
            })
            .catch(function (error) {
                console.log(error);
            });
    };
    return (
        <div class="container-md">
            <h2>Gatsby File Upload Form using Getform.io</h2>
            <form
                acceptCharset="UTF-8"
                method="POST"
                enctype="multipart/form-data"
                id="gatsbyForm"
                onSubmit={handleSubmit}
            >
                <div className="form-group mb-2">
                    <label for="exampleInputEmail1">Email address</label>
                    <input
                        type="email"
                        className="form-control"
                        placeholder="Enter your email"
                        required
                        name="email"
                        value={query.email}
                        onChange={handleChange()}
                    />
                </div>
                <div className="form-group mb-2">
                    <label for="exampleInputName">Name</label>
                    <input
                        type="text"
                        className="form-control"
                        placeholder="Enter your name"
                        required
                        name="name"
                        value={query.name}
                        onChange={handleChange()}
                    />
                </div>
                <hr/>
                <div className="form-group mt-3">
                    <label className="mr-2">Upload your Resume:</label>
                    <input name="file" type="file" onChange={handleFileChange()}/>
                </div>
                <hr/>
                {formStatus ? (
                    <div className="text-success mb-2">
                        Your message has been sent.
                    </div>
                ) : (
                    ""
                )}
                <button type="submit" className="btn btn-primary">Submit</button>
            </form>
        </div>
    );
}

export default Form

NOTE: Make sure to replace the value YOUR-FORM-ENDPOINT of the const GETFORM_FORM_ENDPOINT with your endpoint that you have copied in Step 2.

We pass the full form data as an object to Axios. Axios will convert this into a multipart/form-data object before submitting and Getform understands this payload.
We enable bootstrap by installing it using package managers, npm or yarn:\

with npm - npm install react-bootstrap bootstrap
with yarn - yarn add react-bootstrap bootstrap
and import it to our contact page using import 'bootstrap/dist/css/bootstrap.min.css';

You are now ready to deploy your project live and start receiving form submissions.

Step 4: Deploy with Vercel

To deploy your Gatsby + Getform app with Vercel for Git, make sure it has been pushed to a Git repository.

Import the project into Vercel using your Git provider of choice:

After your project has been imported, all subsequent pushes to branches will generate Preview Deployments, and all changes made to the Production Branch (commonly "main") will result in a Production Deployment.

Form submissions received from either your localhost or production environments will show up in your Getform endpoint dashboard list in either Smart View or Table View options.

Once deployed, you will get a URL to see your app live, such as the following: https://gatsby-vercel-getform.vercel.app/

BONUS: Getform Automations

Getform allows you to setup Automation actions for custom redirections, Google reCAPTCHA integration, custom email templates, autoresponse emails and Zapier integration.

For example, using Custom email template action, you can use your own HTML for email body and customize the From Name and Email Subject.

NOTE: You can find more information on Getform Automation action in the Getform documentation and features section on Getform.io.

Connect your HTML form with Notion using Getform

Mertcan Yücel — Thu, 27 May 2021 07:29:22 +0000

Forms are great way to collect leads or messages from your website visitors. When your visitors fills out your form, you will likely need to store and organize these form submissions properly and analyze the form data in the best way.

If you don't want to add your form data to your database or spreadsheet manually every single time but sending to one of the most popular productivity tool like Notion, then you can integrate Getform with Notion!

Getform is a modern form backend platform that lets you handle HTML form submissions on any website or application. It works great for static site form management and acts as a data manager for online forms.

Notion is an all-in-one productivity software that provides components such as notes, databases, kanban boards, wikis, calendars and reminders. It allows you to take notes, add tasks, manage projects & more. Notion provides the building blocks and you can create your own layouts and toolkit to get work done.

In this guide, we will cover how to how to connect your HTML form to Notion to collect form submissions using Getform and send them to Notion Tables.

How to Create New Notion Database Items from Form submissions using Getform

Prerequisite: You need to have at least one form created and one form submission received to your form on Getform. If you haven't received your first submission yet, check out the "Collecting form submissions" section on our docs or watch our helper video here to get started.

Sign in to your Getform account here: https://getform.io/login
Click the "+" button to create a new form that we will integrate with Salesforce. Let's name the form as "Salesforce Lead Form".
With that form created, your unique form endpoint is now ready to be inserted into your HTML form. Let's add our form and start getting our first submissions. Here is how your HTML form should look like at this point:

<form action="https://getform.io/f/{your-unique-form-endpoint-goes-here}" method="POST" accept-charset="UTF-8">
    <input type="text" name="fullname" placeholder="Full Name*" required="required">
    <input type="email" name="email" placeholder="Email address*" required="required">
    <input type="file" name="file" required="required">
    <button type="submit">Submit</button>
</form>

You can copy the Job Application Form template to start off and modify it according to your needs if you'd like.

We want to have name, email and resume info to collect on our Notion database. With a little bit of styling, here is how your form looks like this:

5. On your Getform dashboard, navigate to the "Integrations" tab under your Form Settings and click "Connect with Zapier" to start setting up our Getform-Notion Zap.

6. Search for Notion on the opening screen and go there. Zapier is a great tool to automate your workflows. What we want is to create new table rows for every time a visitor submits to our form.

To be able to do that, on the Zapier page, select "New Submission" on the "When this happens" field and pick "Create Database Item" on the "then do this" field. Then you just need to click the "Try it button to start setting up the integration.

To connect your Getform account to your zap, just paste the API Key you copied from the "Integrations" *tab and click the "Yes, Continue" *button. Then we will select our form's name to connect with our Salesforce account as follows:

7. Create a new Table on Notion where you will store the form submissions sent to your form. We will collect Name, Email and Resume from our form, so following table will cover what we need.

Now, you need to connect your Notion account by signing in on the Zap page. Click to "Connect new account". At this point, you will need to generate your token by creating a new Notion integration.

8. On Notion, go to Settings & Members > Integrations > Develop your own integrations to open your Notion integrations page. Then, click Create new integration, give it a name and choose which Notion workspace you want to use it with.

When you submit your form, Notion token for this integration will be generated and shown to you. Enter that token on Zapier to finalise connecting your Notion account.

9. Notion integrations can only access databases they've been explicitly invited to. Before it can be used with Zapier, share your database with the integration via the Share menu and select the Integration you have just created to give an access.

10. We are almost there! Go back to your Zap and on the "Action" step, enter the form submission info to the related Notion table fields that you created in Notion as follows:

11. Now our Zap is ready to test. Let's click on the *"Test&Continue" *button and check your Table(Database) on your Notion account.

That's it! Your HTML form backend that is managed by Getform is connected to Notion to send submissin data Notion databases successfully.

Click "Turn on Zap" to finalize the Zap. From now on, your form data can be automatically sent to Notion whenever your form is submitted.

Final Thoughts

I hope this article helps you automate your workflow and give a different way to collect form submissions on Notion

If you like this article, then please share and follow us on Facebook and Twitter for more updates from our blog.

Ready to start?

Get started with Getform by creating your first form and send an email to multiple recipients with only couple of clicks.

How to Create a Simple HTML Form That Sends You an Email

Mertcan Yücel — Sun, 25 Apr 2021 16:34:12 +0000

Cover Photo by Melinda Gimpel on Unsplash

This article has been originally posted on Getform Blog.

Dealing with improved UX can cost time and money. Oftentimes, problems your website visitors have simple tweaks to fix. This brings the following question:

"How do you find out if customers are enjoying the experience of your website?"

The answer may be simpler than you think. Strategically placed, thoughtfully-made web forms are critical for solving dissatisfaction in customer's experiences and understand whether they are enjoying the experience you have created for them.

If you don't have a form on your website, you could be missing out on more leads, higher conversions, and happier long-term customers. We're going to walk you through how to create a certain type of form --- one that sends an email to you, as well as the customer, to ensure the form was received.

We will be starting with the old and dirty way, then we'll show the easiest and most customizable way using Getform.

How to Get Email from an HTML Form

Let's first start with the basics.

Option-1: Using the Basics of HTML

Sending an email using just HTML after form submit. Here is a sample code to use:

<!-- Sample HTML Form -->
<form action="mailto:contact@yourdomain.com"
method="POST"
enctype="multipart/form-data"
name="EmailForm">
    Name:<br>
    <input type="text" size="19" name="Contact-Name"><br><br>
    Email:<br>
    <input type="email" name="Contact-Email"><br><br>
    Message:<br>
    <textarea name="Contact-Message" rows="6" cols="20">
    </textarea><br><br>
    <button type="submit" value="Submit">Send</button>
</form>

Simple HTML Form that "Triggers" an Email.

This sample HTML code will create a form that asks for the contact's name, email and message, and includes a button to submit to form.

Another thing to note with this code is that it doesn't directly send to email addresses, but it opens an email client or tool window to submit the form.

While you can use just basic HTML, this isn't the ideal option. Because browsers would allow you to route form submissions directly to an email address. However, the reason they don't is that emailing directly from an HTML web form would reveal the visitor's email address, making the user vulnerable to malicious activities, such as phishing.

Another problem with the mailto: option is that it isn't 100% compatible with all browsers, it isn't very user-friendly, and it's not possible to control the formatting of the data when the form is sent by the browser.

Let's move on to the second option.

Option-2: Managing your own Form backend. Really?

This is a more technical and a dirty way which definitely requires specific technical skills. Also can take your time and effort. To make your form work with your email server and send it to a mailbox, backend framework, in this case PHP, is the answer.

When the form is submitted, the browser sends the information to the backend using the link mentioned in the "action" attribute of the form tag, sending the form data to that URL.

Use PHP to create a new page

When you're creating a webpage, instead of using the ".html" extension, type ".php" instead.
By doing this, the server will know to host the PHP you write. Instead of saving the empty HTML page as such, save it as something like this: "subscriberform.php". After your page is created and saved, you'll then be able to create the form.

Use PHP to create a new page

In this step, you'll write the code to create the form. The following code is what's needed for a basic form:

<!-- Sample HTML Form -->
<form method="post" action="subscriberform.php">
<textarea name="message"></textarea>
<input type="submit">
</form>

Because this is similar to the HTML-only write-up, these lines will also create a name for the form and an area for subscribers to type a custom message and send it to you.

An important difference is the "action=contact.php" part. This portion of code is what will make the page send the form when submitted. This is the added part to the first option.

Make forms send email

After you create the form and add all the proper fixings depending on your design preferences, it's time to create the email part. To enable sending data in the email, we have to add code that will process the data. Copy the following code or create something similar:

<?php
if($_POST["Message"]) {
mail("john@johndoe.com", "Here is the sample subject line",
$_POST["Insert Your Message"]. "From: jane@janedoe.com");
}
?>

Recall that everything inside the first and last lines will tell the webpage to make these functions perform as PHP. This code also checks to see if a subscriber uses the form. From there, it checks to see if the form was sent.

If we break down the code above.

"mail()" part sends the completed form as an email to "john@johndoe.com" and the subject line is what follows.
In the next line, you can write copy of the email message inside the quotes, to be sent from whichever email address you choose. In this case from "jane@janedoe.com"

Once the form is submitted, the page sends the data to itself. If the data has been successfully sent, the page sends it as an email. The browser then loads the page's HTML -- the form included.

Managing your own form backend can be messy and not an optimal option to go with. This brings us to the third and the easiest option.

Option-3: Using a form backend platform like Getform

We know that the first option is not really helpful and the second option is definitely not an easy one and also not for everyone.

That's why form backend platforms like Getform is a great way to make your HTML forms sending an email. Another advantage of a form backend platform is that they don't have any framework or language dependency and works well with static sites like Hugo, Gatsby, 11ty and Jekyll.

1. Creating a form on Getform

Any form that is created on Getform can easily send an email to multiple recipients. Let's setup a form that sends an email to multiple recipients.

Login to your form dashboard and create a form called "HTML Email Form". Here's how your dashboard looks like after you create your form:

Getform automatically creates a unique form endpoint and shows a simple HTML form code with it.
We will change our HTML a little to make it usable on any HTML page. Sample code below is a sample form code with 3 basic fields; fullname, email and message fields.

At this point we are ready to fill out our sample form to start receiving our first submissions.
After we fill it and click "Submit", your data will automatically be sent to Getform and look like below:

2. Setting up an email notification for your form

We have successfully received our first submission. But our form is still not sending us an email. Let's setup an email notification.

Head over to "Settings" and select "Notifications".
On "Email Notification" section, you have a text field which you can enter email addresses that you want to receive submission notifications. For our case, we have entered "info@getform.io" and "help@getform.io". Click "Save Changes" to finalize this step.

Let's send another submission to our form and see if these email addresses will receive the submission data as an email
And more importantly, the submission email arrived to the email addresses we. have entered!

We have created an HTML form that sends you an email with couple of clicks. It's that easy and for free!

3. Setting up custom email notifications

If you want a full control of the email which you're sending from your HTML form, Getform has "Custom Email Notification" option.

After you successfully receive your first form submission, your custom email template section will have email, name and message form fields as embeddable tags. You should use double brackets with the related fields. For example, if you have an input named as email, you can inject its value by writing email to the template.

When you receive a new submission to your form, your email notification will be sent to your registered email with your new setup. The sample email template will look like this:

4. Setting up autoresponders for form submitters

Similar to Custom Email Templates, you can also send email autoresponses to your form submitters by setting autoresponse emails.

After you successfully receive your first form submission, your autoresponder email template section will have email, name and message form fields as embeddable tags. Please note that your form needs to contain type="email" field to be able to receive the email address to send the autoresponse mails.

When you receive a new submission to your form, your autoresponse email willl be sent to your form submitter. The sample autoresponder will look like this:

Option 3 provides a much easier workaround for basic email sending from your HTML form and also gives you the capability to setup custom email notifications and custom autoresponders to help you create a complete form experience.

Final Thoughts

I hope this article helped you learn the easiest way to send an email from an HTML form.

If you like this article, then please share and follow us on Facebook and Twitter for more updates from our blog.

Ready to start?

Get started with Getform by creating your first form and send an email to multiple recipients with only couple of clicks.

Building forms with Next.js and Getform

Mertcan Yücel — Sun, 18 Apr 2021 12:17:41 +0000

This post is originally posted on Getform Blog.

Next.js is a React based front-end framework created by Vercel for developing search engine friendly static and dynamic web applications. It enables functionality such as server-side rendering and generating static sites.

Getform is a modern form backend platform which lets you handle HTML form submissions on any website or application. It works perfectly for static site form management and acts as a data manager for online forms.

In this article, we'll cover how to add a static file upload form to your NextJS site using Getform and deploy the ready site with functioning form using Vercel.

How to build NextJS forms using Getform

Step 1: Create a Getform account and generate new form endpoint

Visit https://getform.io to create a new account.
After you login to your account, create a new form endpoint by clicking the "+" button.

Name your form e.g. "Contact Form for NextJS Site" and save it. With that form created, your unique form endpoint is now ready to be inserted to your NextJS form.

Step 2: Create a Next.js app

To start off, we need a new Next.js app from scratch. To do this, you can navigate to where you want to create the app and run:

$ yarn create next-app [project-name]
#or
$ npx create-next-app [project-name]

at this point, you will be asked to give a name to your app. In this example, we will be naming as "my-nextjs-getform-form".

Once Next.js finishes installing dependencies, it'll give you instructions to navigate to your project directory and start your development server.

$ cd my-nextjs-getform-form

And after you run yarn dev or npm run dev, you should be ready to go with your Next.js app:

Step 3: Adding an HTML form to your NextJS app

For our form, we can really use whatever we want. Contact forms can be as simple as an email address, name and message fields or it include a variety of options to help a business answer specific questions.

In this example, we are going to ask our visitors to leave their full name, email address, tell us their favourite devops platform among Bitbucket, Github and Gitlab and lastly ask them to send over their resumes.

Create a new js file and name it as contact.js file under pages directory, change its content with the following code block:

import axios from 'axios';
import {useState} from 'react'

const GETFORM_FORM_ENDPOINT = "https://getform.io/{your-form-endpoint}";

function Form() {
    const [formStatus, setFormStatus] = useState(false);
    const [query, setQuery] = useState({
        name: "",
        email: "",
        platform: "",
        file: ""
    });

    const handleFileChange = () => (e) => {
        setQuery((prevState) => ({
            ...prevState,
            files: e.target.files[0]
        }));
    };

    const handleChange = () => (e) => {
        const name = e.target.name;
        const value = e.target.value;
        setQuery((prevState) => ({
            ...prevState,
            [name]: value
        }));
    };

    const handleSubmit = (e) => {
        e.preventDefault();
        const formData = new FormData();
        Object.entries(query).forEach(([key, value]) => {
            formData.append(key, value);
        });

        axios
            .post(
                GETFORM_FORM_ENDPOINT,
                formData,
                {headers: {Accept: "application/json"}}
            )
            .then(function (response) {
                setFormStatus(true);
                setQuery({
                    name: "",
                    email: "",
                    platform: ""
                });
                console.log(response);
            })
            .catch(function (error) {
                console.log(error);
            });
    };
    return (
        <div class="container-md">
            <h2>Getform.io Next.js File Upload Form Example</h2>
            <form
                acceptCharset="UTF-8"
                method="POST"
                enctype="multipart/form-data"
                id="ajaxForm"
                onSubmit={handleSubmit}
            >
                <div className="form-group mb-2">
                    <label for="exampleInputEmail1">Email address</label>
                    <input
                        type="email"
                        className="form-control"
                        id="exampleInputEmail1"
                        aria-describedby="emailHelp"
                        placeholder="Enter email"
                        required
                        name="email"
                        value={query.email}
                        onChange={handleChange()}
                    />
                </div>
                <div className="form-group mb-2">
                    <label for="exampleInputName">Name</label>
                    <input
                        type="text"
                        className="form-control"
                        id="exampleInputName"
                        placeholder="Enter your name"
                        required
                        name="name"
                        value={query.name}
                        onChange={handleChange()}
                    />
                </div>
                <div className="form-group">
                    <label for="exampleFormControlSelect1">Favourite Platform</label>
                    <select
                        className="form-control"
                        id="exampleFormControlSelect1"
                        required
                        name="platform"
                        value={query.platform}
                        onChange={handleChange()}
                    >
                        <option>Github</option>
                        <option>Gitlab</option>
                        <option>Bitbucket</option>
                    </select>
                </div>
                <hr/>
                <div className="form-group mt-3">
                    <label className="mr-2">Upload your CV:</label>
                    <input name="file" type="file" onChange={handleFileChange()}/>
                </div>
                <hr/>
                {formStatus ? (
                    <div className="text-success mb-2">
                        Your message has been sent.
                    </div>
                ) : (
                    ""
                )}
                <button type="submit" className="btn btn-primary">Submit</button>
            </form>
        </div>
    );
}

export default Form

There are several things to check for the code block above:

We are using Axios to submit our form. You need to add axios to your repository by running yarn add axios
We are using Bootstrap classes on our form, so if you wish to keep using them, add bootstrap to your repository by running yarn add react-bootstrap bootstrap.
After successfully installing the bootstrap, add import 'bootstrap/dist/css/bootstrap.min.css to _app.js under the pages directory.
const GETFORM_FORM_ENDPOINT section is to point your Getform form endpoint. You can change it to one that you have generated on Step 0 while creating your form endpoint.

Here's how your form should look like at localhost:3000/contact if you have followed along.

Step 4: Test your form by submitting a sample form submission!

Our contact page is ready to receive submissions now. Lets fill out the fields and press submit.

Once it's submitted, here's how it looks on your Getform dashboard:

Uploaded files along with the submissions can be found and previewed under the Files tab.

You can learn more about file upload forms and supported preview file types on the following documentation link

File Upload Form Installation | Getform Documentation

That's it! Your Next.js app is now using Getform to handle form backend.

Step 5: Deploy your Next.js form to Vercel (Optional)

Vercel provides a super simple platform to deploy serverless applications. And it's out of the box support for NextJs makes it even easier.

First install the now platform globally

$ npm i -g now

And then simply type now to deploy your application to the platform.

$ now

Once the deployment is complete you should receive url to test your application online, something similar to https://nextjs-getform-example-mertcanyucel.vercel.app/.

You can run the now platform locally using the following command.

$ now dev

You can find the source code of this tutorial here.

What else can you do with Getform?

Setting up email notifications

If you wish to receive an email everytime a visitor submits to you form, you can setup email notifications using the email notification plugin.

Email Notification Plugin | Getform Documentation

Setting up advanced workflows using Zapier

Getform lets you integrate with other tools to allow you to wrangle your form submissions. Using Zapier integration, you can accept incoming submissions and connect with more 1500+ applications.

Zapier Integration | Getform Documentation

Preventing spam with reCAPTCHA integration

Spam is also a real thing. You don't want your inbox flooded with spam, so you can take advantage of Getform's Google reCaptcha Integration for both of the reCaptcha versions.

If you would like help setting up Getform on your Next.js apps, feel free to reach us out at info@getform.io

How to integrate your HTML Form to Airtable

Mertcan Yücel — Sat, 10 Apr 2021 20:17:47 +0000

This post is originally posted on Getform Blog.

When your website visitors or customers fill out your contact form on the website, you will likely need to store and organize these form submissions properly to speed up your response process and analyze the form data in the best way. If you don't want to add your contact form data to your database or spreadsheet manually every single time, then you can integrate Getform with Airtable!

After having your HTML form and form backend ready with Getform, this integration will automatically create a new record in your Airtable database with all the data you are trying to organize from each new submission received on your contact form. So that your form data will be effortlessly ready to be processed with Airtable's capabilities!

Before we get into details of how to set up Getform-Airtable integration, let's give a brief introduction on the most flexible tool for organizing any kind of data and explain what is Airtable used for;

Airtable is a user-friendly software platform that offers you the powerful features of a database and works like a spreadsheet. The hybrid structure of the Airtable app gives you the full flexibility that allows businesses to store and organize any set of data. You can use Airtable for project management, customer relationship management (CRM), tracking inventories, task management, and more.

How to create new Airtable Records from Contact Form Submissions

Sign in to your Getform account here: https://getform.io/login
Click the "+" button to create a new form that we will integrate into your specific Airtable base and table. Let's name the form as "Customer Support".
With that form created, your unique form endpoint is now ready to be inserted into your HTML form. Let's add our form and start getting our first submissions. Here is how your HTML form should look like at this point:

<form action="https://getform.io/f/{your-unique-form-endpoint-goes-here}" method="POST" accept-charset="UTF-8">
    <input type="text" name="name" placeholder="Your Name*" required="required">
    <input type="email" name="email" placeholder="Your Email*" required="required">
    <input type="text" name="phone" placeholder="1-(555)-555-5555">
    <input type="url" name="url" placeholder="https://example.com">
    <input type="text" name="message" placeholder="Your Message*" required="required">
    <button type="submit">Submit</button>
</form>

and with a little bit of styling here is how your Contact Form looks like this:

4. After we submit to the form, here is how the Getform form data looks like:

5. It's time to go to Airtable and create a new base and table to bring your form submission data together in the right place. Let's give the name "Customer Support" to our new Airtable base and "Contact Form Data" to the new table as we will be using Getform and Airtable to automate our contact form submissions collection.

(You can skip this step if you want to receive your form submissions to one of your created Airtable bases and tables.)

6. Now, let's create and customize new fields in our Contact Form Data table based on the fields in our contact form for sending the related form data to the related Airtable field.

Airtable offers various field types to customize your table according to your needs such as email, URL, checkbox, date, collaborator field types, and more. In addition to that, you can also use the Airtable linked records feature to link any of your fields to any other record that you have in different tables.

Now, our form backend is ready to integrate with our Airtable base and table by using Zapier!

7. On your Getform dashboard, navigate to the "Integrations" tab and click "Connect with Zapier" to start setting up our Getform-Airtable Zap.

8. Search for Airtable on the opening screen and go there. On the Airtable page, select "New Submission" on the "Select a trigger" field and pick "Create Record" on the "Select an action" field. Then you just need to click the "Connect Getform + Airtable" button to start setting up the integration. Click on the "Go to Advanced Mode" button on the next opening screen.

9. After you finish setting up the Trigger step, you just need to click the *"Continue" *button in the Action stage since Zapier already selected the action app and event for you. Then you need to connect your Airtable account with your zap by using the API Key. To find your API key, navigate to your account page in Airtable and On your account page, there's a button that says "Generate API key" under the API heading.

10. We are so close to finalizing our integration! Let's set up an action by selecting our specific Airtable base and table. Then you can add your form submission info to the related fields that you created in Airtable as follows:

11. Now our Zap is ready to test. Let's click on the "Test&Continue" *button and check our "*Contact Form Data" table on our "Customer Support" Airtable base.

That's it!\
Your HTML form has been connected and sent to your Airtable base and table successfully. From now on, your form data can be automatically sent to Airtable whenever your form is submitted.

Thank you for reading! You can find more information and code samples for different use cases from the resources provided below.

How to Add a Contact Form to Wix Website

Mertcan Yücel — Sun, 04 Apr 2021 19:38:42 +0000

This post is originally posted on Getform Blog.

Wix is one of the best website builders and hosting platforms with distinctive features, thousands of ready-to-use templates and plugins. Wix's drag and drop editor allows you to create professional websites in a matter of minutes. It also comes with Wix ADI which is the first artificial design intelligence that can design and build a website for you according to your preferences.

Wix offers Wix Forms to add and set up a form to collect information from your website visitors. Even though it is very useful with readymade form templates, Wix free doesn't allow users to fully customize their forms, and it limits the number and type of form fields such as adding a file upload field. At that point, users need a third-party service like Getform to get a taste of freedom to fully customise, design and manage their forms.

In this blog post, we will explain how to create a contact form by using Wix templates and then show you how to add a contact form with a file upload field and full customization by using HTML and Getform.

How to Create a Contact Form in Wix

As we stated earlier, Wix offers 2 options for you to create a website; one is the Wix Editor with its default templates and the other one is Wix ADI. We will be using the Wix Editor to go step by step to build a Wix contact form.

After choosing one of the Wix website templates, firstly you need to click on "Add" *section on the left side of the editor and then choose the "Contact & Forms"* section.

As you can see, Wix offers different types of forms such as Payment, Donation, Contest, etc. You can choose whichever form type you need and the design according to that. We will continue with the Contact form type. Just drag and drop the one you want to your Wix website.

2. Now let's take a look at what we can change on our selected form template. Click on the form and then go to "Form Settings".

Wix Forms allows you to set up email notifications to be alerted when someone submits your form, customize the submit message and create automated responses for your form submissions. It also offers to condition field types to have better form validation.

3. If you want to change or add fields to your form, click on the "Add New Field" button below your form.

Wix allows you to add different kinds of form fields such as Radio buttons, multi checkboxes, dropdowns, and more. However, if you want to add more than 10 fields, remove the limitations on multistep field types or add a file upload field then you need to pay to upgrade your Wix plan.

After making arrangements on your form, here's a basic example of how it might look like:

We managed to create a contact form by using the Wix Forms editor with ease.

If you want more customization, adding a file upload field or more without paying for an upgraded Wix plan, you can also add your contact form by embedding HTML codes to your Wix website and using a third-party service like Getform to handle your form backend and form submissions.

How to Add File Upload Forms to Wix by Using HTML and Getform

In order to add your HTML contact form to your Wix website, you need to click the "Add" Section on the left side of the editor and find the "Embed" section. Then, go to "Custom Embeds" and choose the "Embed a Widget" option to add an embedded HTML element.

2. After that you just need to paste your HTML code in the blank space below:

You can use the following HTML code block for a detailed contact form with a file upload field;

<div class="form-container">
  <div class="title">Contact Us!</div>
  <form accept-charset="UTF-8" action="https://getform.io/f/{your-form-endpoint}" method="POST" target="_blank" enctype="multipart/form-data">

    <div class='form-field'><label class='form-label'>Name</label>
      <div class="form-input-container">
        <input class="form-input" type="text" name="name" placeholder="John Doe">
      </div>
    </div>
    <div class='form-field'><label class='form-label'>Email</label>
      <div class="form-input-container">
        <input class="form-input" type="email" name="email" placeholder="john@doe.com">
      </div>
    </div>
       <div class='form-field'><label class='form-label'>Phone Number</label>
      <div class="form-input-container">
        <input class="form-input" type="number" name="phone" placeholder="xxx-xxx-xxxx">
      </div>
    </div>
    <div class='form-field'><label class='form-label'>Company Url</label>
      <div class="form-input-container">
        <input class="form-input" type="url" name="url" placeholder="https://example.com">
      </div>
    </div>
   <div class='form-field'><label class='form-label'>Message</label>
      <div class="form-input-container">
        <input class="form-input" type="text" name="message" placeholder="Your Message">
      </div>
    </div>
    <div class='form-field'><label class='form-label'>Upload a file</label>
      <div class="form-input-container">
        <input class="form-input" type="file" name="file" placeholder="Upload your resume" >
      </div>
    </div>
    <button class="form-button" type="submit">SUBMIT</button>
  </form>
</div>

<style>
  .form-container {
    border-radius: 5px;
    background-color: #ffffff00;
    padding: 20px;
    width: 95%;
  }

  .title {
    font-family: "Celias", "Helvetica Neue", Helvetica, Arial, sans-serif;
    text-align: center;
    text-transform: uppercase;
    font-size: 2em;
    font-weight: bold;
    letter-spacing: .05em;
    padding-bottom: 1em;
  }

  .form-label {
    font-family: "Celias", "Helvetica Neue", Helvetica, Arial, sans-serif;
    font-size: 15px;
    line-height: 1.42857143;
    color: #000000;
    box-sizing: border-box;
    display: inline-block;
    max-width: 100%;
    margin-top: 5px;
    margin-bottom: 5px;
    font-weight: bold;
  }

  .form-input {
    box-sizing: border-box;
    font: inherit;
    font-family: "Celias", "Helvetica Neue", Helvetica, Arial, sans-serif;
    width: 100%;
    height: 45px;
    padding: 10px 15px;
    font-size: 15px;
    color: #000000;
    background-color: #ffffff;
    border: 1px solid #000000
;
    border-radius: 4px;
    border-width: 2px;
  }

  .form-button {
    border: solid #000000;
    font-size: 16px;
    margin-top: 15px;
    font-weight: 800;
    line-height: 1.5;
    border-radius: 3px;
    padding: 16px;
    background-color: #ffffff;
    width: 100%;
    text-align: center;
    cursor: pointer;
    -webkit-transition: all .15s ease;
    transition: all .15s ease;
  }
</style>

Don't forget to change the action attribute to a form endpoint URL that you can get on Getform. If you haven't received your first submission yet, check out the "Basic Installation" section on our docs or watch our helper video here to get started.

Here's how our embedded contact form looks like;

You just managed to add a contact form with a file upload field that you can fully customize and design for your needs by just editing HTML codes!

However, your form submissions still need a hand to be managed, stored, and automated properly. That's where Getform comes into the stage.

Let's submit and see how form submissions are sent to Getform:

That's it! All the form data along with uploaded file's preview is seen on Getform's dashboard.

By having a Getform account, creating your form, and adding your form endpoint URL to the top of your HTML form code block as we did in the example above, you will have the advantages of;

Receiving email notifications when someone submits to your form,
Sending customized email autoresponses to your form submitters
Allowing you to preview and download the uploaded files.
Catching and removing any spam submissions by setting up a reCaptcha integration.
Connecting to Google Sheets, Dropbox, Google Drive, Pipedrive, Slack, and many more.

P.S. If you are willing to go for more advanced integrations, you can also use Getform Submission API to integrate your form to any custom app or website you are building.

We wanted to offer you different options to create your forms for your Wix website. You can directly use Wix Forms to create your form with default templates or if you need more customization without the cost of upgrading your Wix account, then you can use your own HTML contact form code and trust Getform to handle your form backend and form submissions.

Thank you for reading! You can find more information and code samples for different use cases from the resources provided below.

How to create file upload forms in Squarespace

Mertcan Yücel — Sat, 03 Apr 2021 14:47:21 +0000

This post is originally posted on Getform Blog.

Squarespace is a popular website building and hosting platform. It provides software as a service for website building and hosting, and allows users to use pre-built website templates and drag-and-drop elements to create and modify webpages. Squarespace sets itself apart from other website-builders by combining ease of use with stylish, professional design.

Even though Squarespace's core features appeals to a lot of website makers, experienced users might want more customization opportunities. Squarespace forms also don't support file and attachment uploads. That's where you would need a third-party service like Getform to offer a wider variety of customization and design options as well as creating file upload forms for your Squarespace website.

In this blog post, you'll learn how to build forms using Squarespace's default templates and how to make custom file upload forms using Getform.

How to create a contact form in Squarespace

While building your Squarespace, you don't need any coding skills. Most of the Squarespace templates have built-in contact pages and form sections. But you might have more specific needs that require building your own form.

Let's walk through setting up a simple contact form with Squarespace blocks. Squarespace uses Blocks to lay out content. You can find these by creating an empty page and clicking the "Add Section" button.

Then click to "Form" from the side menu. Then, select the template based on your need from the ready made ones.

Once you've chosen a form template, you can double click on it to start editing your form. You can change the name of the form, and specialize the fields or add a new one.

These field include text areas, radio and select buttons. But there is no such field for file uploads.

The Advanced options on this page lets you edit the label and alignment of the submit button. You can also change what happens after users submit the form by setting a redirect URL.

That's all you need to do to create a simple functional form on Squares. But if you are looking for more customization, i.e file upload forms where you can enable file attachments on your, then you can make your own form from scratch.

Here's what one of the default Squarespace forms looks like:

Creating Squarespace file upload forms using Code Blocks and Getform

Squarespace's default form blocks give the basic capability of form management but they don't allow you to do high level of customization, especially if you need to add additional field types and file upload capabilities. If you need to enhance your form's capabilities, then your option is to use the "Code Blocks" in Squarespace.

In the Squarespace page editor, click one of the "+" buttons to add new Content Block. It will look like below:

Then select the "Code" option to add a new Code Block.

Code block section of Squarespace

Paste the following HTML code block with Name, Email and Resume fields:

<div class="form-container">
  <div class="title">Apply Now!</div>
  <form accept-charset="UTF-8" action="https://getform.io/f/{your-form-endpoint}" method="POST" target="_blank" enctype="multipart/form-data">

    <div class='form-field'><label class='form-label'>Name</label>
      <div class="form-input-container">
        <input class="form-input" type="text" name="last_name" placeholder="John">
      </div>
    </div>
    <div class='form-field'><label class='form-label'>Email</label>
      <div class="form-input-container">
        <input class="form-input" type="email" name="email" placeholder="john@doe.com">
      </div>
    </div>
    <div class='form-field'><label class='form-label'>Upload your resume</label>
      <div class="form-input-container">
        <input class="form-input" type="file" name="file" placeholder="Upload your resume" >
      </div>
    </div>
    <button class="form-button" type="submit">SUBMIT</button>
  </form>
</div>

<style>
  .form-container {
    border-radius: 5px;
    background-color: #f2f2f2;
    padding: 20px;
    width: 95%;
  }

  .title {
    font-family: "Celias", "Helvetica Neue", Helvetica, Arial, sans-serif;
    text-align: center;
    text-transform: uppercase;
    font-size: 2em;
    font-weight: bold;
    letter-spacing: .05em;
    padding-bottom: 1em;
  }

  .form-label {
    font-family: "Celias", "Helvetica Neue", Helvetica, Arial, sans-serif;
    font-size: 15px;
    line-height: 1.42857143;
    color: #2c3e50;
    box-sizing: border-box;
    display: inline-block;
    max-width: 100%;
    margin-top: 5px;
    margin-bottom: 5px;
    font-weight: bold;
  }

  .form-input {
    box-sizing: border-box;
    font: inherit;
    font-family: "Celias", "Helvetica Neue", Helvetica, Arial, sans-serif;
    width: 100%;
    height: 45px;
    padding: 10px 15px;
    font-size: 15px;
    color: #2c3e50;
    background-color: #ffffff;
    border: 1px solid #dce4ec;
    border-radius: 4px;
    border-width: 2px;
  }

  .form-button {
    border: none;
    font-size: 16px;
    margin-top: 15px;
    font-weight: 800;
    line-height: 1.5;
    border-radius: 3px;
    padding: 16px;
    background-color: #ccc;
    width: 100%;
    text-align: center;
    cursor: pointer;
    -webkit-transition: all .15s ease;
    transition: all .15s ease;
  }
</style>

Don't forget to change the action attribute to a form endpoint URL with yours. If you haven't received your first submission yet, check out the "Collecting form submissions" section on our docs or watch our helper video here to get started.

Here's a form added to a Squarespace website using the Code Block:

You have a form that looks the way you want with a file upload field to accept resumes. You'll need a way to manage what happens when a user submits information.

Getform lets you receive email notifications when someone submits to your form, allows you to preview the uploaded files.

You can view submissions and uploaded files separately

Receive emails when someone submits to your form with uploaded file's link so you can export or download attachments like resumes or photos.

Catch and remove any spam submissions by setting up a reCaptcha integration.
Connect to Google Sheets, Dropbox, Google Drive, Pipedrive, Slack and many more.
If you are willing to go for more advanced integrations, you can also use Getform Submission API to integrate your form to any custom app or website you are building.

Thank you for reading! You can find more information and code samples for different use cases from the resources provided below.

Take your Squarespace forms to next level using Getform today and feel free to reach us out at info@getform.io or using our live chat on Getform.io if you would like help while doing that!

How to setup a contact form in Middleman

Mertcan Yücel — Tue, 20 Oct 2020 20:48:50 +0000

This post has been originally posted on Getform Blog.

Middleman is a static site generator using all the shortcuts and tools in modern web development. Middleman uses Ruby similar to another popular static site generator Jekyll, offering a pretty extensive set of features to build cool stuff.

Whereas Jekyll was born of the desire for a simple, static blogging engine, Middleman was built as a framework for more advanced marketing and documentation websites. It’s a powerful tool and fast to pick up if you’re coming from the world of Rails

But contact forms are a challenge in Middleman

Static site generators like Middleman are super fast and performant. However, there is one place they all fall short: form backends. Since there's no actual backend, there's no place to route your form submission data. That's where form builder and form backend platforms like Getform comes in.

In this article, we will walk you through the simple Middleman website setup, adding a working contact form powered by Getform's powerful form backend platform.

How to make a Middleman contact form using Getform and deploy it using Vercel

1- Login to your Getform account

The first step is to log in to your Getform account. If you don't have an account, sign up to Getform, it is super easy and free to get started. You don't need to provide any credit card info to create an account.

2- Create a new form on Getform

After you log in to your Getform account, click to the "+" button on your dashboard to create a new form, then name it e.g. "Contact Form for Middleman Site" and save it. With that form created, your unique form endpoint is now ready to be inserted into your Middleman contact form.

Your endpoint will be shown to you after your form is created as follows:

3- Getting Started with Middleman

We are going to be following the MacOS installation but if you are using Windows, you can follow the guide here.

To prepare and build your Middleman website, first step is to install XCode Command Line Tools. Xcode can be installed from the terminal:

$ xcode-select --install

Once you have Ruby and RubyGems up and running, execute the following from the command line:

$ gem install middleman

This will install Middleman, its dependencies and the command-line tools for using Middleman.

To start a new site on middleman, you can run the following command:

$ middleman init

builds a Middleman skeleton project in the current folder.

$ middleman init my-middleman-site

creates a subfolder my_middleman_site with the Middleman skeleton project. That's the option we will be using. After we run that,

cd my-middleman-site to open folder and run the following command to start a local dev server:

$ bundle exec middleman server

Middleman will start a development environment accessible by default at localhost:4567 which will look like as follows:

4- Add a contact page to your Middleman site

Now, we have our Middleman site running and welcomes us with "Middleman is Running" message on the homepage.

This homepage is represented by the source/index.html.erb. Middleman uses a file-based routing system. For example, source/contact.html.erb will be mywebsite.com/contact.html/.

Let's create our contact page.

Create a new file called contact.html.erb under source directory.
Change its content with the following code block, the contact form itself will be HTML, which will work fine.
Don't forget to change the action part of your <form> tag in your contact.html.erb file, update it with the form endpoint URL you copied in step 2.

<h1>Contact Us</h1>
      <div>
        <a target="_blank" href="https://getform.io">
        <img src='https://getform.io/_nuxt/img/095d0b3.svg'>
        </a>
        <br>
        <a target="_blank" href="https://getform.io?ref=gridsome-blog" class="mt-3 d-flex">Getform.io | Get your free endpoint now</a>
        <h2>Getform.io - Middleman Contact Form Example</h2>
            <form accept-charset="UTF-8" action="https://getform.io/f/{YOUR_UNIQUE_FORM_ENDPOINT}" enctype="multipart/form-data" method="POST"  target="_blank">
                <div>
                    <label>Full Name</label>
                    <div>
                        <input style="margin-top: 5px; background-color: #fff; height:35px; width:235px; text-indent: 5px; border-radius:5px;"
                        type="text" name="first_name" placeholder="Enter your name and surname" required="required">
                    </div>
                </div>
                <br>
                <div>
                    <label>Email address</label>
                    <div>
                        <input style="margin-top: 5px;background-color: #fff; height:35px; width:235px; text-indent: 5px; border-radius:5px;"
                        type="email" name="email" placeholder="Enter your email address" required="required">
                    </div>
                </div>
                <br>
                <div>
                    <label for="favourite-platform">Favourite Static Site Generator</label>
                    <div>
                        <select style="margin-top: 5px; background-color: #fff; height:40px; width:245px; text-indent: 5px; border-radius:5px;"
                        class="form-control" id="favourite-platform" name="platform" required="required">
                        <option>Middleman</option>
                        <option>Jekyll</option>
                        <option>Vuepress</option>
                        </select>
                    </div>
                </div>
                <div style="margin-top: 15px;">
                    <label >Upload a file:</label>
                    <input style="margin-left: 5px" type="file" name="file" required="required">
                </div>
                <br>
                <input type="hidden" name="utf8" value="✓">
                <button style="font-size:14px; background-color:#6b7ddf; color:#fff; font-weight:bold; padding:10px 35px; margin: 5px 0 0 0;
                    border: 1px solid; border-radius: 5px;"
                    type="submit">SUBMIT</button>
            </form>
        </div>

Sample form endpoint: [https://getform.io/{YOUR_UNIQUE_FORM_ENDPOINT}](https://getform.io/%7BYOUR_UNIQUE_FORM_ENDPOINT%7D)

run bundle exec middleman server and go to localhost:4567/contact.html/. Here is how your contact page looks like:

5- Test your form on your Middleman site by submitting a sample form submission!

Our contact page is ready to receive submissions now. Let's fill out the fields and press submit.

That's it! Your Middleman site is now using Getform for handling form backend and it shows us the submission details as in the image above. File upload previews are another nice thing of Getform and supported for most of the common file types such as png, pdf, jpeg and so on.

After you finish setting things up, you can also set up an email notification from form settings, use the Zapier integration to send your form submission data to 1000s of other applications and keep your form submissions spam protected by using reCaptcha integration. If you are willing to go for more advanced integrations, you can use Getform Submission API to integrate your form to any custom applications.

You can find the source code of this tutorial below. Optionally, you can use the boilerplate code to get started and even deploy this sample to a working website within couple of minutes using Vercel or Netlify.

getform / getform-middleman-example

Sample Middleman website creation using Getform and Vercel

Thank you for reading and let me know your thoughts through the comments!

Top 16 CMS Platforms for Your Website

Mertcan Yücel — Thu, 01 Oct 2020 11:35:07 +0000

This post has been originally posted on the official blog of Getform.

Content has become one of the main ways that businesses interact with their customers. Back in the old days, companies could regard content as a ‘nice to have’ side of the marketing. However content doesn’t just affect marketing, it has become a core part of every business.
Texts, pictures, videos and graphics don’t just add value for your reader or user, these are also positively effective for search engine optimization if you maintain your content in an engaging way.
That’s where the content management system (CMS) comes into play. When you use a CMS, you do not need much technical intervention. Managing and dealing content becomes automated and consistent.

In this article, we’ll be explaining why it’s so important to choose the right CMS platform for your website. We’ll also share our top 10 picks for traditional CMS platforms and the top 6 picks for headless CMS platforms.
Before jumping into the classification of Content Management Systems, let’s first understand CMS in a more detailed way.

What are Content Management Systems?

A content management system is a software that helps create, organize and maintain digital content without a high level of programming and coding knowledge. It allows multiple contributors to develop, create and publish different content types, which are stored in a database and displayed in a presentation layer that is based on a set of templates.

Content management systems provide the opportunity to have easy-going site maintenance and full control over your content. There are different types of CMS platforms available and each type serves a different purpose for different business types.

Let’s go through the classification of CMS platforms according to the way they can be embedded into your business system.

Open-Source CMS

You can easily download open-source CMS at zero initial cost. This type of content management systems are created and developed with the user community environment, where third party developers improve the original software.

It allows you to install add-ons, plugins, templates and improve their functionality. There are so many customization options that are available for different types of businesses. Examples of open-source CMSs are Wordpress and Drupal.

Proprietary CMS

The proprietary content management system comes with an initial license fee, and in some cases, there are annual charges for user support and updates. You can modify proprietary CMS with built-in functionalities but this may come at an extra cost. To avoid some additional costs, it is important to check carefully what is actually covered by the license, and what all you will have to pay in the future.

Software as a Service (SaaS) CMS

This type of content management system offers web hosting, web content management software and technical support that all covered in a single package. These SaaS CMS solutions are hosted in a cloud and based on a subscription model. Its pricing includes data and content storage, amount of transferred data and ongoing support.

Following is the Top 10 Traditional Content Management Systems that can help to maintain your content and take the right step for your business development.

WordPress
Joomla
Drupal
TYPO3
Magento
Squarespace
WIX
HubSpot CMS
Adobe Experience Manager
Shopify

WORDPRESS

WordPress is the most-used open source CMS worldwide with more than 18 million installations. It allows you to create your blog or website by using text documents, images, videos and more with little or no knowledge of programming.

Another benefit that WordPress offers is its very large user community. You can customize your website with a huge amount of theme, plugin and widget selections.

Because of the high level of circulation, WordPress is also considered as a popular target for hackers. To avoid these kinds of issues you need to update your WordPress software regularly.

JOOMLA

Joomla is considered as the second biggest CMS regarding its market coverage. It allows you to host a blog or any other web publications. It has various CMS functionalities without installing any extensions.

Joomla is based on a stand-alone Model-View-Controller which enables you to create your extensions and share it within its community.

As an open-source CMS, you will have the freedom for personalizing the elements the way you like if you decide to go with Joomla. Its interface is very impressive but not easy to use when compared to WordPress.

DRUPAL

Drupal is another popular open-source CMS for developing websites and web applications. It provides tempting features such as great security, reliable performance and easy content management processes.

Drupal is highly customizable with its more than 36000 extension modules to suit your business needs. It is preferred by designers because of these add-on modules and designs.

If you serve more than one language market, Drupal is the best CMS for your small business. This CMS software handles sites that use multiple languages with ease.

TYPO3

TYPO3 software is an open-source enterprise content management system. It is a great solution for creating corporate portals, enterprise landing pages and e-commerce platforms.TYPO3 is very easy to use and suitable for those kinds of business pages that don’t require maintenance regularly.

We would recommend you to use TYPO3 if you need to manage several sites that fall under the same umbrella. With this CMS, you can share templates, extensions and even users among your sites, which is something that most platforms don’t offer.

MAGENTO

Magento is an open-source content management system that mainly focuses on building e-commerce platforms quickly and effectively. It allows you to manage multiple stores, currencies, pricing and more. Its pros also include a flexible, secure user interface and a high level of customization capabilities.

Although it is an open-source and free CMS, you may need to pay for unlocking all the premium features. But if you need to develop a small e-commerce site then the free features of Magento will be quite enough to get started.

SQUARESPACE

Squarespace is well-known for its very simple drag and drop website builder feature. It lets you create aesthetic websites with various options of professional themes and templates. That’s why Squarespace CMS is preferred primarily by entrepreneurs, musicians, restaurants and bloggers.
You can get into details with its style editor for customizing fonts, colors, and other theme settings. It's also easier to integrate high-quality images, thanks to the ability to add on searchable Unsplash and Getty images.

WIX

Wix is a big player in the content management and website building world with hosting over 16 Million websites. You can either build your website from scratch or choose a design from the library of 500 readymade themes and templates.

It is easy to adapt this CMS for your needs. For example, you can accept payments via multiple methods, provide coupons and discounts while tracking orders of your online store. If you are a restaurant owner, it is easy to create menus, set up online ordering and let users book tables through the website.

One of its best features is its ability to automatically optimize your site for mobile. Wix automatically installs and upgrades security updates, so you’re also protected.

HUBSPOT CMS

Although HubSpot is a well-known market operation provider, it also offers a Content Management System which can integrate with all the HubSpot product suite.

It enables you to create, manage and track the performance of blog sites, landing pages and emails from one place. HubSpot CMS has drag-and-drop modules, SEO features and mobile-friendly themes that let you have full control over your website.

All of these amazing features come with a cost. HubSpot offers its minimum package for $240 per month with a plus mandatory $1,000 onboarding fee. So if you have enough budget then HubSpot would be the CMS that you can go for.

ADOBE EXPERIENCE MANAGER

Adobe Experience Manager offers a very comprehensive CMS software for building websites and mobile apps. It provides a drag-and-drop interface, template editor, marketing-friendly templates and developer-facing tools to help you create your site in the way you like.

Adobe Experience Manager allows you to handle your marketing content and property, and deliver digital activities while offering your customers a personalized experience and easy to use UI. You can contact its sales team for pricing based on your needs.

SHOPIFY

Shopify is another popular CMS software for building e-commerce platforms. You can consider it as an all-in-one hosted CMS platform. That means you don’t need to install any software, buy hosting or manage things like updates and backups.

Its drag-and-drop interface with various options for themes and templates allows you to customize your e-commerce site very easily. Another great benefit of Shopify is supporting in-store sales if you have a physical store as well as an online one.

The pricing plans vary between $29-$299 per month, and it would be good to get in touch with its sales team if you have different enterprise-level requirements.

Headless CMSs

A new type of Content Management System is on the rise to serve and maintain content.Headless CMSs seem to be very attractive at this point but why is that?

To be precise, The term “Headless” refers to the lack of a frontend. This kind of CMSs allows businesses to manage, store and track content from creation to publication, just like a traditional CMS does. The major difference is the front-end delivery layer of a website is removed from a headless CMS which means you can use any front-end tool you want to present the content that has been created.

It provides an API that enables front-end developers to carry the content from a CMS into their projects. In addition to that, it does not require any hosts for the creation process. Because of these reasons many developers choose headless CMS over traditional CMSs. and it also allows you to repurpose your content from multiple front-ends making them a perfect fit for JAMstack builds.

Let’s take a look at the 6 Most Popular Headless CMSs that you can consider to choose the right tool for your business.

1.Kentico Kontent
2.Magnolia
3.Ghost
4.NetlifyCMS
5.Contentful
6.Forestry

KENTICO KONTENT

If you are mostly focusing on the content itself and produce it continually, then Kentico Kontent can be a great option for your project. It is a headless CMS that simplifies content production for marketers without requiring any developer involvement.

Kentico Kontent also allows you the track and analyze the customer experience and collaborate with your team in a cloud-based environment. There are lots of content operation features that come with a very user-friendly interface.

MAGNOLIA

Magnolia is an open-source headless CMS that offers features such as in-context editing, full preview and personalization. It’s preferred for marketer-friendly interfaces, digital asset management and campaign management.

Magnolia has rich omnichannel delivery capabilities that can make you reuse content across any touchpoint which makes this headless CMS ideal for busy business professionals.

GHOST

Ghost is an open-source publishing platform that is easy to use, and free for everyone. It is an API-driven, headless CMS built with Node.js. Ghost can either be used in a headless manner or via templates. It does not only offer greater performance but also flexibility for organizations that wish to have greater control over their content management systems.

NETLIFY CMS

NetlifyCMS is a headless CMS built as a single page app written in React. This headless CMS is based on client-side JavaScript, reusable APIs and prebuilt Markup. Compared to traditional CMSs like WordPress, this means better performance, higher security and better developer experience.

You can use NetlifyCMS with any static site generator (such as Gatsby, Hugo or Jekyll) for a faster and flexible web project. Its editor-friendly user interface enables you to create websites in a very simple way. It also allows you to upload your website by just using the drag-and-drop option.

CONTENTFUL

You can consider Contentful as a cloud-based headless CMS solution. Their motto, “unified, connected, low risk” describes Contentful’s features very well. Its cloud platform provides a lot of support to clients while its cloud-based infrastructure makes it more reliable to use.

Contentful offers a rich editor interface, intuitive content modeling and advanced caching techniques for businesses that need fast and strong solutions. It comes with a varied range of features and prices from the free trial to custom quotes for enterprise projects.

FORESTRY

Forestry is a Git-backed headless CMS. It allows you to easily edit all flat-file based static sites and it works with every popular static site generator. Technically, it is a layer on top of Git and it’s interacting directly with the files in the repository. Every action that happens in the CMS like editing, creating and deleting is an action taken as part of the Git workflow.

Thanks to its simplicity and native Git integration it’s a perfect choice mostly for marketing teams and developers.

FINAL THOUGHTS

We wanted to make an introduction to the CMS world with its features, types and the best options that you can look out for. There are lots of CMSs available in the market and that can make you confused to choose the best one for the project or website.

It is better to decide on the purpose and aim of making your website at first. After that, you will be able to choose the right type with the needed features for your business. In some cases, traditional CMSs will fit better but on the other hand, headless CMS options are definitely worth trying out, especially with the rise of JAMStack. It is hard turning a blind eye to the benefits of using JAMstack from both web developers and marketers’ perspective. Faster performance, more security and easier scalability being top ones among many.

Have fun, check out all the top CMS platform options available, and see which one you like the best.

GETFORM

Getform is a form backend platform and form endpoint service for online web forms. After you select your CMS, while you're getting your website ready, let your forms handled by Getform.

What you need is to create your unique form endpoint on Getform and paste it on your HTML page and the rest will be handled by us. With additional features like Custom Email Notifications, Autoresponders, File Upload Support, Zapier & Webhook Integrations and Advanced Spam Filtering with Google reCaptcha will make your form perfectly managed! You can register here to get started!

Thank you for reading! I hope you enjoyed it, leave a comment below to let me know what is your go-to CMS while building your website.

Creating a WordPress contact form without a plugin

Mertcan Yücel — Mon, 06 Jul 2020 14:52:45 +0000

This post has been originally posted on Getform Official Blog

WordPress is without a doubt the most popular way to build your website and we wouldn't be wrong if we define WordPress as the operating system of your website. According to the stats as of 2020, WordPress runs 32% of all the websites around the world.

The WordPress repository has thousands of plugins, which you can use to add new features and functionality to your static WordPress website. Plugins to set up and manage web forms is one of them. However, the WordPress plugins are not always easy to manage for several reasons such as slow performance, complicated management and might cause security risks, and as much as WordPress plugins let you create forms quickly and easily, some developers and designers are looking for unique customization options that suit their expectations.

But WordPress plugins are not always the optimum solution for form setups. In this blog post, I'll show you how to set up a simple and customizable WordPress contact form on your site using a simple form backend platform Getform.

How to Create a WordPress Form Without a Plugin

If you don't have a WordPress site or don't know where to start, you can check out the easy setup guide below which shows an easy WordPress site using Docker within minutes.

1- Create a Getform account and create new form

Create an account on Getform. After you log in to Getform, click to “+” button on your forms dashboard page to create a new form then name it e.g. “Contact Form for my WordPress Site", then copy the unique form endpoint that belongs to the form you have just created, we will need it in the later steps.

2- Create a new WordPress page for your Contact Form

After setting up your WordPress site, here are the simple steps for adding an HTML coded form on a WordPress page:

Log into your WordPress dashboard, select "Pages" section, and click "Add New".

Give the page a meaningful title, like “Contact Us.”

3- Add a Custom HTML Section and setup your WordPress form

After you name your Contact page, it's now time to setup your WordPress contact form.

For this step, you have two options:

If you enable Bootstrap on your site, then you can use the code block prepared by Getform:

If you prefer to keep the full control of your whole design for your site then you can use the form code block without bootstrap:

After you pick the code block based on your WordPress site's needs, add a Gutenberg custom HTML block and paste the form code of your choice.

PS: If you are using an old WordPress version without the Gutenberg HTML block, you can click the "Text" tab and paste the form code of your choice to the section.

NOTE: Don't forget to paste the endpoint URL you have gathered in step 1 to the action attribute of the HTML block. In this way, the submissions will come to the form you have created on your Getform dashboard.
When the coded form is published on a WordPress page, the resulting output will look like as follows:

After you fill the fields and submit it, here is how your form data will look like on your Getform dashboard:

Final Thoughts

Now Getform will handle the contact form submissions on your WordPress site, all with just a few lines of code. It is a more flexible and robust solution than what you might get from a form plugin.

After you finish the setup, based on your needs you can also set up an email notification from form settings, use Zapier integration to send your form submission data to hundreds of other applications, and keep your form submissions spam protected by using reCaptcha integration.

BONUS: If you would like to check out the Wordpress themes, you can visit the themes section from here: https://wordpress.org/themes/browse/featured/ and select your preferred one.

5 Ways to Increase Form Conversion Rate

Mertcan Yücel — Sun, 14 Jun 2020 20:51:37 +0000

This post has been originally posted on Getform's Official Blog
Web forms are everywhere and millions of people submit forms every day for different purposes. Forms play such a key role in almost every online transaction - from logging in to a new online platform, event registration, job applications, survey or newsletter signups.

No matter where you go online, you’re bound to run across some little text field requiring you to submit information and this definitely won't change anytime soon.

The more that forms are used, the more users will expect something new and different to hold their attention. The best way to get your form to stand out from the thousands of other similar ones is to create a unique user experience which leads to higher form conversion.

In this article, we will look at 5 tips and best practices that you can use to improve your contact form conversion rate.

How to increase contact form conversion rate

Contact form conversion rate optimization relies on the minor details that you can apply. If you want to effectively reach the maximum conversion rate, then you need to focus on the right techniques. Here are 5 tips that you can get started:

1. Include the right number of fields on your form

Fewer form fields equal greater conversion for many cases. Your contact form should be simple.

If you take away one thing from this article, that would be eliminating unnecessary form fields that can significantly increase the conversion rate of your contact form.

According to the research by Quicksprout, limiting the number of fields to just three can guarantee a minimum conversion rate of 25 percent. But in some cases such as collecting sales leads, fewer form fields can also lead to low-quality leads and decrease the perceived value from your form.

For example, if you're giving away a free checklist, you might only want to collect basic fields like first name, last name, and email. But if you're giving away something more important like an ebook, you may want to ask for more detailed information with more form fields.

For this reason, we suggest you select the right number of fields according to your specific use case. You can also check Getform's Codepen Page to see ready-to-use simple form templates.

2. Use the right color and the right text for your Form CTA button

According to studies, the word "submit" is not descriptive enough. Your submit button is more than just a button. It's an opportunity to convince your visitors that they should fill out those last few fields. Leaving "submit" as the submit button text on your form is a missed opportunity.

Here are some examples for your form calls-to-action:

Download this ebook
Subscribe Now
Show me this presentation
Claim this offer
Save your seat

By improving the copy of your CTA, you can radically increase your form conversion rates.

Another important aspect is the color you select for your CTA button. The key is to choose a color that fits your current design, but you also want to have a button color that screams “click me.” According to several case studies, red is the highest performing color. But green and orange are other great alternatives to go with.

3. Embrace the mobile-first approach

If you’ve ever filled out a form on a phone, you know how painful each additional field can be. Thinking mobile-first is crucial in 2020. (e.g Google's mobile-first indexing approach) and forms should definitely be part of your mobile-first strategy.

There are several important design aspects that you should consider such as whether you put field labels above or to the left of your form elements and what you set as your default options for certain fields.

Coming up with a visually appealing and UX-friendly mobile form is unbeatable and they are easier to use and faster than their alternatives.

4. Make the required fields visible

Research from the Baymard Institute says it’s useful to clearly delineate which fields are optional while also noting which fields are required.

Required fields are typically denoted with an asterisk (*). Optional fields will not have an asterisk. So make sure that on your forms, you denote which fields are required and which are optional.

Check out the full list of HTML5 form validation rules explained on Getform documentation.

5. Get rid of Captcha or use the invisible one

Let's face it! Nobody likes to use Captcha even though they are doing a good job of filtering the spam submitters. According to Moz's study, having Captcha on your forms decrease conversion rates by 3%.

This isn’t to say you should forget about security. It’s a very important component of building trust. Getform provides Akismet powered machine learning spam prevention and also offers invisible reCaptcha to improve your form conversion rates. Checkout Getform documentation to set up a Google reCaptcha v3, aka invisible reCaptcha to improve your form conversion rate.

Don't let robots spam your form :)

Bonus: Consider starting A/B Testing Your Web Forms

As mentioned above, there are many things that you can use to increase your form conversion rates. If you still feel like your conversion rates aren't reaching up to your expectations, you might start testing. your forms to see what causes a negative impact. In that case you might want to dig a little deeper and start A/B Testing your forms.

Here are some factors that you can check:

The placement of your form on a landing page
The placement and color of your form CTA
Colors of surrounding images or the page branding
Words in your headlines and your surrounding copy
Form alignment, the number of form fields and form length
Form labels and text placement
Form type (full screen, pop-up, etc.)

Final Thoughts

When it comes to improving conversions on your forms, there are several key areas you need to watch out for: number of form fields, copy and color of your CTA button, embrace mobile first approach, indicate required fields and avoid using visible Captcha on your form.

Lastly, no matter what you are doing with your contact form, try to eliminate more friction to increase your form user experience. Reducing friction drives conversion rate.

We hope this article helped you learn the best ways to increase your online form conversion rates.

Ready to Start?

Get started by creating your first form endpoint on Getform and start increasing your form conversion rates while Getform is handling your form backends.

If you like this article, then follow Getform on Facebook and Twitter for more updates from our blog.

Thank you for reading! We keep enhancing Getform by listening to you, leave us your feature requests at Nolt or vote on the existing ones.

Reach me out by sending an email to mertcan@getform.io.
I would be happy to connect with dev.to community!