Form abandonment is a common problem that can have a big impact on a business's success. When a user leaves an online form without completing it, it can lead to lost sales, missed opportunities, and wasted time and money. In fact, nearly 70% of site visitors will abandon a form forever if they encounter an issue with it.

There are many reasons why people abandon forms, including:

• Complexity
• Too much required information
• Security concerns
• Poor user experience
• Lack of perceived value

It's important for businesses to track form abandonment and work to improve conversion rates. So, how can you combat form abandonment and increase conversions for your business? Here are some strategies to consider:

1. Make Your Forms Easy to Use

To reduce form abandonment, it's important to make your forms easy to use. This means:

• Keeping the number of fields to a minimum
• Using clear and concise language
• Avoiding confusing or unnecessary questions

According to Convertica, 27% of people abandon online forms due to their length, and 10% abandon forms because of unnecessary questions. By simplifying your forms, you can improve the user experience and increase the chances of successful form completion.

2. Provide Value to the User

Make sure the user understands what they will get in return for filling out the form. This could be access to exclusive content, a discount, or something else. Providing value to the user will give them a reason to complete the form and will increase the chances of successful form submission.

According to Convertica, 29% of people abandon online forms due to security concerns, and 11% abandon forms because of advertisements or upselling. By offering value to the user, you can alleviate their concerns and provide a reason for them to complete the form.

3. Use a Form Building and Integration Tool

Using a form building and integration tool can help streamline the form creation process and make it easier to manage your forms. Formcarry offers a free HTML form code generator that allows users to customize and get a beautifully styled HTML form code for their projects. With the Formcarry generator, visitors can create a responsive form with three different style options to choose from.

If you have a Formcarry account, the output will be a fully functioning form code with no additional configuration needed. Formcarry also offers integrations with Zapier and Webhook support, allowing users to automate their form messages and save them to Google Sheets. Formcarry simplifies the process of building forms, reducing it to just a few minutes.

In addition to the HTML form generator, Formcarry also provides instant email notifications, spam protection, auto-response messages, customizable thank you pages, file upload capabilities, and the ability to export submissions in CSV or JSON format. These features make Formcarry a valuable tool for improving form conversion rates and streamlining form management.

4. Test and Optimize Your Forms

Testing and optimizing your forms can help you identify and fix any issues that may be causing form abandonment. You can use tools like Google Analytics to track form abandonment rates and see where users are dropping off. You can then use this information to make changes to your forms and improve the user experience.

5. Use Retargeting and Remarketing Strategies

Retargeting and remarketing allow you to show targeted ads to users who have abandoned your forms. By using these strategies, you can remind users about your business and encourage them to return and complete the form.

There are a number of retargeting and remarketing platforms available, including Google AdWords and Facebook Ads. To use these platforms effectively, you'll need to install a tracking pixel on your website. This will allow you to track users who visit your site and show them targeted ads as they browse the web.

6. Use Visual Aids and Interactive Elements

Using visual aids like images and videos can help make your forms more engaging and improve the user experience. Interactive elements like progress bars and conditional logic can also help keep users engaged and motivated to complete the form.

7. Make Sure Your Forms Are Mobile-Friendly

With more and more users accessing the internet from their smartphones, it's important to make sure your forms are mobile-friendly. This means ensuring that your forms are easy to use on a small screen and that they load quickly.

According to WPForms, 45% of form data is now submitted from a mobile device. By optimizing your forms for mobile, you can improve the user experience and increase form completion rates.

8. Use Social Proof and Customer Testimonials

Including social proof and customer testimonials on your forms can help build trust and credibility with users. This can be especially effective if you're asking users to input sensitive information or make a purchase.

9. Use Marketing Automation and Lead Nurturing

Marketing automation and lead nurturing can help you keep in touch with users who have abandoned your forms. By sending targeted emails and offering helpful resources, you can keep users engaged and increase the chances of them completing the form at a later date.

Conclusion

Form abandonment is a common problem that can have a big impact on a business's success. By following the strategies outlined above, you can combat form abandonment and improve your conversion rates. This will help you capture valuable leads and drive business growth.

Building a contact form on your Shopify website is a great way to collect customer data and keep in touch with your customers. In this article, we will walk you through the process of adding a contact form to your Shopify website in 7 steps.

At the end of the tutorial you’ll:

• Have a working contact form on your Shopify Store
• Receive email notifications for each new submission using form backend
• Set-up auto-responses for your form

Table of Contents:

• Introduction
• Create your first form ~30 seconds
• Change your form code on your Shopify Store ~ 2 minutes
•  Option 1: Modify the existing form
•  Option 2: Add your own form code
• Testing out your form ~ 15 seconds
• Setting up email notifications ~ 20 seconds
• Setting up respondent email notifications ~ 20 seconds
• Conclusion

Introduction

Contact forms are critical for any online store to collect essential customer data and improve their customer experience.

Shopify has built-in form support but it's very limited, there are a few scenarios where it may not be sufficient for a business's needs. Some examples include:

• Integration with other tools: If you want to integrate your contact forms with other tools or platforms, such as CRM or email marketing software, Shopify's built-in forms may not offer the necessary integration options.
• Advanced features: If you need advanced features like file uploads, CAPTCHAs, or multi-page forms, Shopify's built-in forms may not offer these options.
• Large volume of submissions: If you receive a large volume of form submissions, you may need a more robust solution that can handle the load and offer features like spam protection and automatic responses.
• File uploads: The ability to upload files is an added feature that provides value to your customers and allows your store to gather more relevant information from them.

That’s why many Shopify businesses use Formcarry to process their form data. We offer a simple way to add a custom contact form to your website and process the data through our servers instead of through Shopify. With Formcarry you can automatically receive email notifications for each new submission, set auto-responder messages for the sender, and have built-in spam protection for your forms. You can sign up for a completely free account at formcarry.com.

Step 1 - Create your first form

Sign up to formcarry here. Once you’ve logged in to your dashboard, click on the “Create Form” button to create a new form. After creating your form click on the “Setup” button and save your unique endpoint URL which we are going to use later

Step 2 - Change your form code on your Shopify Store

Navigate to your Shopify Admin, click to Online Store from the sidebar, then navigate to the Themes and click the "Customize" button of your current theme. Go into the Edit Code mode then search for "form" and go into the contact-form.liquid, the name may vary in your theme. Open the find panel with CMD+F or CTRL+F and search for the following: "{%-form" once you find it, we're ready to build your form.

Now you have two options to continue:

• Modify existing form code
• Add your own form code

Option 1 - Modify existing form code

Now we are going to override the default form processing URL with formcarry, to do that you are going to need your unique form endpoint URL that you grab in Step 1.

Setting up form action:

Find the following:

{%- form 'contact', id: 'ContactForm', class: 'isolate' -%}

And add action attribute with your unique endpoint URL like this:

{%- form 'contact', action: 'PASTE THE URL THAT YOU GOT IN STEP 1', id: 'ContactForm', class: 'isolate' -%}

Make sure that you’ve replaced PASTE THE URL THAT YOU GOT IN STEP 1, it should look like https://formcarry.com/s/XXXXXXX, if you don’t replace that your form won’t work.

Setting up field names:

Now we need to give name to each field of your form, otherwise you’ll lose the data of the field.

What you need is find every form field that has name attribute like this:

<input name="contact[{{ 'templates.contact.form.name' | t }}]" ...

And change the value between “” by giving your desired name so if the field is collecting legal name, just name it legalName:

<input name="legalName" ...

Your form might not have the all possible fields but, here are the full list of possible fields that you have to name:

• Input
• Select
• Textarea

This part will require you to have basic HTML knowledge, but it's not difficult if you take a look around this awesome MDN document. It shouldn't take you more than 2 minutes. If you want a more quick solution, you can use option 2, which is just copy/paste.

Option 2 - Add your own form code

If your store does not have a pre-made form, you can use our free contact form code generator, which will give you a fully working contact form code without needing any further modifications.

After you customized your form, click the code and copy your fully working code.

Now paste your code inside the page you want:

Hooray 🎉 Now you have a working contact form!

It’s time to add some magic to it.

Step 3 - Testing out your form

Just fill out your form with real data to test it (because formcarry has built-in spam filtering), you’ll see that your forms is coming into the formcarry dashboard:

Step 4 - Setting up email notifications for your form

We have a beautiful working form but it’s not enough, let’s add some spice to it, to set-up email notifications you’ll have to go to Settings page inside your form, scroll down to the Self email notification, activate the integration, collapse down and add your desired emails to the notification list, like below:

Once you completed, submit your form again and you’ll get the email notification instantly:

If you don’t got the email, it’s possible that you filled out a test data and formcarry identified it as a spam, By default we don’t send you email notifications if we mark a submission as spam to keep your inbox safe and sound. However, if you wish to disable this feature, you can do so by following the instructions in the screenshot provided below.

Step 5 - Setting up auto response emails

In most cases, the contact forms don't work and users don't get any response, so the best solution is to set up an auto-response email to let them know you have received their message and will reply to them shortly. Luckily it’s really easy to set-up auto-responses with Formcarry.

To be able to set auto-responses the field that you collect user email must be named as “email” if you have used one of our templates then you don’t need to worry about that, but if you have your own HTML form, then make sure that you modify it before setting-up this feature.

To setup, get into your form and navigate to your Settings, then scroll down to Respondent Email Notification, and enable the toggle.

After that click the pen icon on the right of the toggle and customize your template:

Formcarry provides dynamic tags that can be embedded in your email templates. These tags can automatically populate the recipient's name and other details in the form. You can use those to send more personalized messages.

Once you are done with your template click save and now your form is ready to send auto-responses.

Going further

After covering all of these basics, it’s also worth to mention that formcarry is an official Zapier partner

Zapier is a tool for primarily non-technical users to connect together web apps. An integration between two apps is called a Zap. A Zap is made up of a Trigger and one or more Actions or Searches. Whenever the trigger happens in one app, Zapier will automatically perform the actions or searches in another app in order.

Which means you can create complex marketing integrations with Formcarry using your form data, which is really powerful.

Some ideas for you to automate your form:

• Send data to Google Sheets every time a submission is received
• Automatically export submissions to your CRM after each form is submitted
• Create Google Calendar events for new leads or customers captured by your forms
• Create Mailchimp campaigns for new leads or customers captured by your forms
• Create Zendesk tickets to capture form data as a new ticket
• Get SMS notifications when you get a new submissions using Twilio

For more information about Zapier, I highly suggest watching this video.

Conclusion

Thank you for taking your time to read this article, I hope it will help you set up your contact form on your website.

In this guide I’m going to show you how to create a HTML contact form that sends you an email by bare minimum code.

Collecting form submissions is an essential part of any business. There are drag-and-drop form builders, but sometimes you might want to use just your HTML form. Let's get started!

You can scroll down to see HTML code for contact form👇 on front-end, followed by the PHP code for processing form data👇 that delivers your form to email.

Table of contents:

• HTML Form Code
• CSS Style Code
• Form Processing Code
• Option 1: Form processing with PHP
• Option 2: Form processing using Form Backend
• HTML Label Field
• HTML Text Field
• HTML Textarea Field
• HTML Email Field
• HTML Telephone Field
• HTML Date Field
• HTML Password Field

The form we’re building is very simple, if you want to achieve advanced features like file upload or spam protection please take a look at our file upload form ↗️

Already have a HTML form and not much time? We offer spam protection, google sheets integration, and email notifications for free at formcarry ↗️

Create a Simple HTML Contact Form

Copy and paste this code to your HTML page, this is going to be the base of our form.

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <meta http-equiv="X-UA-Compatible" content="ie=edge" />
    <title>Contact Form</title>
    <!-- Form styling -->
    <link rel="stylesheet" href="formcarry-form.css" />
  </head>
  <body>
    <div class="formcarry-container">
      <form action="#" method="POST" class="formcarry-form">
        <label for="name">Your Name</label>
        <input type="text" id="name" name="fullName" required />

        <label for="email">Your Email Address</label>
        <input type="email" id="email" name="email" required />

        <label for="message">Your Message</label>
        <textarea name="message" id="message" cols="30" rows="10"></textarea>

        <button type="submit">Send</button>
      </form>
    </div>
  </body>
</html>

CSS codes for your HTML form

File name: formcarry-form.css (Please save using exact name)

Paste this code to make styling work

@import url("https://fonts.googleapis.com/css2?family=Inter:wght@400;700&display=swap");

/* 
  CONTACT FORM EXAMPLE FOR FORMCARRY

  IMPORTANT NOTE:
  PLEASE ADD formcarry-form class to your form element
  to apply the styles.
*/

.formcarry-container * {
  box-sizing: border-box;
	font-family: "Inter", sans-serif;

  /* colors */
  --color-blue: #2552d0;
  --color-light-blue: #3266e3;
  --color-gray: #e5e7eb;
  --color-dark-gray: #9da3ae;
  --color-pink: #edadd2;
}

.formcarry-container {
  /* container */
  --c-width: 50%;
  --c-max-width: 500px;

  width: var(--c-width);
  max-width: var(--c-max-width);
  display: block;
  margin: 10vh auto 0 auto;
}

.formcarry-form label {
  display: block;
  padding: 12px 0 2px 0;
  letter-spacing: -0.2px;
  cursor: pointer;
  font-size: 16px;
  font-weight: 700;
}

.formcarry-form input,
.formcarry-form textarea {
  font-size: 16px;
  display: block;
  width: 100%;
  padding: 10px;
  background-color: var(--color-gray);
  border: none;
  border: 4px solid var(--color-gray);
  outline: none;
  border-radius: 8px;
  color: var(--color-dark-gray);
}

.formcarry-form input:focus,
.formcarry-form textarea:focus {
  background-color: #fff;
  color: var(--color-dark-gray);
}

.formcarry-form input:focus:required:invalid {
  border-color: var(--color-pink);
  background-color: #fff;
}

.formcarry-form button {
  display: block;
  margin-top: 12px;
  width: 100%;
  padding: 12px 20px;
  border-radius: 8px;
	border-color: transparent;
  background-color: var(--color-blue);
  color: #fff;
  font-weight: 700;
  font-size: 18px;

  transition: 300ms all;
}

.formcarry-form button:hover {
  background-color: var(--color-light-blue);
}

.formcarry-alert {
  padding: 12px;
  border-radius: 10px;
  color: #fff;
  font-size: 14px;
  font-weight: 400;
  margin-top: 12px;
  display: none;
}

.formcarry-alert.visible {
  display: block;
}

.formcarry-alert.success {
  background: #69cf9d;
}

.formcarry-alert.error {
  background: #de524c;
}

Bonus: Free HTML5 Contact Form Generator

We have created a form generator that you can use to build your own contact forms and completely customize it with your brand or website's color scheme and design style. They are free to download and can be used on your personal or commercial projects.

Click here to check out our free form generator ↗️

Option 1: HTML Form Processing with PHP

First replace the # with form-process.php like below

<!-- Replace this -->
<form action="#" method="POST" class="formcarry-form">
<!-- With this -->
<form action="form-process.php" method="POST" class="formcarry-form">

Why? because action part of the form element tells your browser to where to send form data, in this case we need to point our form data to form-process.php

Then create a file called: form-process.php (should be exact name)

<?php
if (isset($_POST['email'])) {

    // REPLACE THIS 2 LINES AS YOU DESIRE
    $email_to = "you@awesomecompany.com";
    $email_subject = "You've got a new submission";

    function problem($error)
    {
        echo "Oh looks like there is some problem with your form data: <br><br>";
        echo $error . "<br><br>";
        echo "Please fix those to proceed.<br><br>";
        die();
    }

    // validation expected data exists
    if (
        !isset($_POST['fullName']) ||
        !isset($_POST['email']) ||
        !isset($_POST['message'])
    ) {
        problem('Oh looks like there is some problem with your form data.');
    }

    $name = $_POST['fullName']; // required
    $email = $_POST['email']; // required
    $message = $_POST['message']; // required

    $error_message = "";
    $email_exp = '/^[A-Za-z0-9._%-]+@[A-Za-z0-9.-]+\.[A-Za-z]{2,4}$/';

    if (!preg_match($email_exp, $email)) {
        $error_message .= 'Email address does not seem valid.<br>';
    }

    $string_exp = "/^[A-Za-z .'-]+$/";

    if (!preg_match($string_exp, $name)) {
        $error_message .= 'Name does not seem valid.<br>';
    }

    if (strlen($message) < 2) {
        $error_message .= 'Message should not be less than 2 characters<br>';
    }

    if (strlen($error_message) > 0) {
        problem($error_message);
    }

    $email_message = "Form details following:\n\n";

    function clean_string($string)
    {
        $bad = array("content-type", "bcc:", "to:", "cc:", "href");
        return str_replace($bad, "", $string);
    }

    $email_message .= "Name: " . clean_string($name) . "\n";
    $email_message .= "Email: " . clean_string($email) . "\n";
    $email_message .= "Message: " . clean_string($message) . "\n";

    // create email headers
    $headers = 'From: ' . $email . "\r\n" .
        'Reply-To: ' . $email . "\r\n" .
        'X-Mailer: PHP/' . phpversion();
    @mail($email_to, $email_subject, $email_message, $headers);
?>

    <!-- Replace this as your success message -->

    Thanks for contacting us, we will get back to you as soon as possible.

<?php
}
?>

This is how your form supposed to look like:

While this will create a working HTML form that sends you an email, you need to be aware of:

• No spam protection: spam submissions can be 90% of the total submissions if there is no protection in-built which takes time to implement and improve.
• Emails can land into the spam folder: you need to check your SMTP server health regularly, your server might crash and you won’t notice it for a long time, which can cost very bad for your business.
• File upload takes time to implement: In case you need to upload files from your form, be aware that implementation of it takes a lot of time, and creates a lot more complexity and security concerns to deal with.

Option 2: HTML form processing with Formcarry

If you need more functionalities from your form, you need to deal with the complexity that comes with it. If you want to make a working simple HTML contact form backend without PHP, we have the solution.

Try our product formcarry ↗️ for free which can be a perfect solution for you, it works with your own HTML code, you just need to change your form action attribute.

Create a form in formcarry

Create an account ↗️ then create a form like below

Integrate your HTML form

Copy your form endpoint by clicking copy clipboard button, then change your HTML form code that we used above.

<!-- Replace this -->
<form action="#" method="POST" class="formcarry-form">
<!-- With this -->
<form action="{PASTE YOUR FORM ENDPOINT HERE}" method="POST" class="formcarry-form">

That’s all you need to process your form now

Try your form

Just by changing your action attribute, you can achieve:

• 3 different thank you page ↗️ for your form.
• Email notifications ↗️ for new submissions
• Auto-responses ↗️ for your submitters
• A dashboard that you can sort, filter and export your form data
• Easy file uploads ↗️
• Integrations with Google Sheets and 1000+ other apps ↗️

Take a look at your dashboard and you’ll see your new submission:

Also email notification for the new submission, which you can add as many emails as you like from the self email notification settings.

Creating a working form with formcarry less than 2 minutes, and it’s free up to 100 submissions per month.

HTML Form Field examples

It's possible for you to ask which HTML element is used to create an HTML form for user input? Let us show you the fields that you can use in your form, just copy and paste the codes below.

HTML Label Field

Label field is the text that’ll focus to the desired form element on click, to target a field you need to give target element id inside the label elements for attribute like this:

<!-- insert the ID of target element inside the for attribute -->
<label for="myElement">Focus to the field</label>
<!-- give an ID attribute to the target element so label can work -->
<input id="myElement" type="text" />

HTML Text Field

Text field is the most used form field on the web, this is widely used for short texts.

<label for="name">Text Field</label>
<input type="text" id="name" name="fullName" />

HTML Textarea Field

Textarea is like text field but it’s for much bigger content, like messages.

<label for="message">Textarea Field</label>
<textarea type="text" id="message" rows="5" cols="5" name="message"></textarea>

rows and cols attributes allow you to specify width and height of textarea yet you can always manipulate that using CSS.

HTML Email Field

Some HTML fields have built in validations, Email input is one of them, it will complain unless you enter a valid email address, and it won’t let you submit.

<input type="email" />

Try to submit by entering normal text, the field will warn you that it requires a valid email address

Notice how input border color reacts to validity of your input, until you enter a valid email address you’ll see a red color, I’ve implemented this for demo purposes so that’s not the default behavior.

HTML Telephone Field

You specify a number pattern with telephone field, and it will complain unless you enter phone number through the pattern you have specified.

<input type="tel" pattern="[0-9]{3}-[0-9]{2}-[0-9]{3}" />

Tel field also shows num pad on mobile devices.

HTML Date Field

Date field is very handy most of the time, because it’s a native type all devices will show some sort of date selector to the user, you can specify minimum and maximum ranges for dates to be chosen.

<input type="date" value="2022-10-29" min="2022-01-01" max="2022-12-31" />

HTML Password Field

Password field is normal text field but the difference is the value you entered will be masked with asterisks to hide sensitive information.

<input type="password" />

Uploading files using Base64 encoding is a common practice, the usage of the technique has been increased since React and Vue.js like frameworks gained popularity.

In this guide I'm going to show you how to upload files using base64 encoding

What's Base64 Encoding?

Base64 is a encoding algorithm that allows you to transform any characters into an alphabet which consists of Latin letters, digits, plus, and slash. You can convert images into a “readable” string, which can be saved or transferred anywhere.

To understand it better I recommend you to take a look at that wonderful article from base64.guru and What is Base64 Encoding by Akshay Kumar

What's Data URI?

We can't just send the Base64 string to our server and process it, what makes it different than any other string? How do you know the file is a image or PDF file? That's where Data URI comes in.

Data URI or Data URL is a format that we can use some data as an inline string. In order to process our Base64 data in server we need to know the mime type (which can be tricked), which Data URI format provides this.

This is the Data URI or Data URL format:

data:[<mime type>][;charset=<charset>][;base64],<encoded data>

For example this a Base64 string wrapped as a Data URI:

<img src="data:image/jpeg;base64,/9j/4AAQSkZJRgABAQAAAQABAAD/2wCEAAoHCBUWFRgVFRYZGRgZHBgYGBwYGhgYGBoYGBgaGhoZGBgcIS4lHB4rIRgYJjgmKy8xNTU1GiQ7QDs0Py40NTEBDAwMEA8QHBISGjQh...3000 more characters" />

The output:

Live demo

Try it yourself! Choose a file and see base64 encoding of it.

Wanna play with it? Use our CodeSandbox Example

Create your HTML Form

Let's create a very simple form, we are going to handle it with Javascript

<form id="formcarryForm">
 	<label for="nameInput">Name</label>
 	<input type="text" id="nameInput" />

	<label for="messageInput">Message</label>
 	<textarea id="messageInput" cols="30" rows="2"></textarea>

	<input type="file" id="pictureInput" />

  	<button type="submit">Submit</button>
</form>

Update 6 Jan, 2023:

We have built free form generator tool that you can customize and get HTML code, make sure you check it out if you need form template.

Add your Javascript code

In order to upload files as Base64, we need to listen the change event of our file input, and the process is async so we need to hold some state to determinate whether we can submit the form or not.

Let's start with our file input.

const fileInput = document.getElementById('pictureInput')

// This is for storing the base64 strings
let myFiles = {}
// if you expect files by default, make this disabled
// we will wait until the last file being processed
let isFilesReady = true

fileInput.addEventListener('change', async (event) => {
  const files = event.srcElement.files;

  console.log(files)
})

We are going to use isFilesReady later to check if the async process has been completed or not, it's true by default because there are no files in the input when the page loads, if you want to make it required you can change it to isFilesReady = false

Let's try what happens:

As you can see, we can access our files, now it's time for the fun part.

Converting input file to base64 string

We are going to use native FileReader API to read files from the input

fileInput.addEventListener('change', async (event) => {
  // clean up earliest items
  myFiles = {}
  // set state of files to false until each of them is processed
  isFilesReady = false

  const files = event.srcElement.files;

  const filePromises = Object.entries(files).map(item => {
    return new Promise((resolve, reject) => {
      const [index, file] = item
      const reader = new FileReader();
      reader.readAsBinaryString(file);

      reader.onload = function(event) {
        // handle reader success

        resolve()
      };

      reader.onerror = function() {
        console.log("couldn't read the file");
        reject()
      };
    })
  })

  Promise.all(filePromises)
    .then(() => {
      // if each file processed successfuly then set our state to true
      isFilesReady = true
    })
    .catch((error) => {
      console.log(error)
      console.log('something wrong happened')
    })
})

Now we can access FileReader data using event.target.result but we need to transform it to Base64 string, let's do that:

fileInput.addEventListener('change', async (event) => {
  // clean up earliest files
  myFiles = {}
  // set state of files to false until each of them is processed
  isFilesReady = false

  const files = event.srcElement.files;

  const filePromises = Object.entries(files).map(item => {
    return new Promise((resolve, reject) => {
      const [index, file] = item
      const reader = new FileReader();
      reader.readAsBinaryString(file);

      reader.onload = function(event) {
        // Convert file to Base64 string
		// btoa is built int javascript function for base64 encoding
        myFiles['picture'] = btoa(event.target.result)

        resolve()
      };
      reader.onerror = function() {
        console.log("can't read the file");
        reject()
      };
    })
  })

  Promise.all(filePromises)
    .then(() => {
      console.log('ready to submit')
      isFilesReady = true
    })
    .catch((error) => {
      console.log(error)
      console.log('something wrong happened')
    })
})

So now we have converted our file to Base64 string and pushed it inside the myFiles object. every time our input get changes, myFiles is going to erase all the data it holds and will process everything again.

Converting files to Data URI

We have converted our files to Base64 string but that's not enough to upload files, we need to convert it to Data URI, it should look like this;

data:image/jpeg;base64,/9j/4AAQSkZJRgABAQAAAQABAAD/2wCEAAoHCBUWFRgVFRYZGRgZHBgYGBwYGhgYGBoYGBgaGhoZGBgcIS4lHB4rIRgYJjgmKy8xNTU1GiQ7QDs0Py40NTEBDAwMEA8QHBISGjQh...3000 more characters

The format is;

data:[<mime type>][;charset=<charset>][;base64],<encoded data>

Fortunately, we can access the MimeType, so that's going to be easy like that:

// Convert Base64 to data URI
// Assign it to your object
myFiles['picture'] = `data:${file.type};base64,${btoa(event.target.result)}`

So now it's ready to upload. But let's make some tweaks before we go on.

I have named our file input as picture for the example, let's make our code dynamic so it can get the file input name attribute

// this is to get the input name attribute, in our case it will yield as "picture"
// I'm doing this because I want you to use this code dynamically
// so if you change the input name, the result also going to effect
const inputKey = fileInput.getAttribute('name')

then change this;

myFiles[inputKey] = `data:${file.type};base64,${btoa(event.target.result)}`

that way if you change your input name to resume it will yield as myFiles['resume']

Converting multiple files to base64 at once

Let's cover our code so it can support multiple file input;

<input type="file" id="pictureInput" multiple/>

So in that case, we want to check if input has single or multiple files, if it has single file we want to name it right according to input name, in our example it would be picture but if it has more than one file, we are going to name with file lengths such as picture[0], picture[1]

here's the code:

+ // if it's multiple upload field then set the object key as picture[0], picture[1]
+ // otherwise just use picture
+ const fileKey = `${inputKey}${files.length > 1 ? `[${index}]` : ''}`
+ // Convert Base64 to data URI
+ // Assign it to your object
- myFiles[inputKey] = `data:${file.type};base64,${btoa(event.target.result)}`
+ myFiles[fileKey] = `data:${file.type};base64,${btoa(event.target.result)}`

Handle the form submit event

Let's cover our form submit event, what we want to do in that case is we will check if the files are ready, if they're not we are going to show an alert to user

const formElement = document.getElementById('formcarryForm')

const handleForm = async (event) => {
  event.preventDefault();

  if(!isFilesReady){
    alert('files still getting processed')
  }
}

formElement.addEventListener('submit', handleForm)

All of the code we wrote so far should look like this;

const fileInput = document.getElementById('pictureInput')

// This is for storing the base64 strings
let myFiles = {}
// if you expect files by default, make this disabled
// we will wait until the last file being processed
let isFilesReady = true

fileInput.addEventListener('change', async (event) => {
  // clean up earliest items
  myFiles = {}
  // set state of files to false until each of them is processed
  isFilesReady = false

  // this is to get the input name attribute, in our case it will yield as "picture"
  // I'm doing this because I want you to use this code dynamically
  // so if you change the input name, the result also going to effect
  const inputKey = fileInput.getAttribute('name')
  var files = event.srcElement.files;

  const filePromises = Object.entries(files).map(item => {
    return new Promise((resolve, reject) => {
      const [index, file] = item
      const reader = new FileReader();
      reader.readAsBinaryString(file);

      reader.onload = function(event) {
        // if it's multiple upload field then set the object key as picture[0], picture[1]
        // otherwise just use picture
        const fileKey = `${inputKey}${files.length > 1 ? `[${index}]` : ''}`
        // Convert Base64 to data URI
        // Assign it to your object
        myFiles[fileKey] = `data:${file.type};base64,${btoa(event.target.result)}`

        resolve()
      };
      reader.onerror = function() {
        console.log("can't read the file");
        reject()
      };
    })
  })

  Promise.all(filePromises)
    .then(() => {
      console.log('ready to submit')
      isFilesReady = true
    })
    .catch((error) => {
      console.log(error)
      console.log('something wrong happened')
    })
})

const formElement = document.getElementById('formcarryForm')

const handleForm = async (event) => {
  event.preventDefault();

  if(!isFilesReady){
    console.log('files still getting processed')
	return
  }
}

formElement.addEventListener('submit', handleForm)

Let's create an object of our form values in the form submit event;

const formElement = document.getElementById('formcarryForm')

const handleForm = async (event) => {
  event.preventDefault();

  if(!isFilesReady){
    console.log('files still getting processed')
    return
  }
 
  const formData = new FormData(formElement)

	// get name and message input from our <form> element
  let data = {
    'name': formData.get('name'),
    'message': formData.get('message')
  }

	// iterate over the base64 files we've converted
  Object.entries(myFiles).map(item => {
	// destruct the file
    const [key, file] = item
	// append it to our data object
    data[key] = file
  })

  console.log(data)
}

formElement.addEventListener('submit', handleForm)

Let's try it out:

What's next?

We've done all the necessary stuff on the front-end except network request part.

At formcarry we allow our customers to upload files as Base64 (pro feature).

You can either use our service to handle your form, or you can write a server code to process Base64 Data URI.

Luckily for you, I'm going to cover both of them.

1.1- Uploading Base64 to formcarry

Now we can send our data to formcarry, the important thing in this step is converting our object to JSON and setting the Content Type as application/json.

const handleForm = async (event) => {
  event.preventDefault();

  if(!isFilesReady){
    console.log('files still getting processed')
    return
  }
 
  const formData = new FormData(formElement)

  let data = {
    'name': formData.get('name'),
    'message': formData.get('message')
  }

  Object.entries(myFiles).map(item => {
    const [key, file] = item
	// append the file to data object
    data[key] = file
  })

  fetch('https://formcarry.com/s/{Your-Unique-Endpoint}', {
    method: 'POST',
    body: JSON.stringify(data),
    headers: {
      'Content-Type': 'application/json',
      Accept: 'application/json'
    }
  })
  // convert response to json
  .then(r => r.json())
  .then(res => {
    console.log(res);
  });
}

Change  https://formcarry.com/s/{Your-Unique-Endpoint} with your unique form ID

1.2- Try it out

Submit your form by filling out all of the fields, then refresh your dashboard

Formcarry will automagically convert your base64 to download-ready file.

2- Uploading Base64 to NodeJS

I'm going to use Express.js for our example, let's create an express app using express-generator

$ npx express-generator 

Approximately Base64 files are 33% heavier than the original file, you might want to keep that in mind.

Now, let's allow our server to process large body data by getting into the app.js and change:

-app.use(express.json());
-app.use(express.urlencoded({ extended: false }));
+app.use(express.json({limit: '50mb'}));
+app.use(express.urlencoded({ extended: true, limit: '50mb' }));

Also we need to enable CORS to perform request from our front-end app:

npm i --save cors

Enable it like this:

var express = require('express');
var ba64 = require('ba64');
var cors = require('cors');

var app = express();

app.use(cors());

I'm going to remove all the unnecessary stuff, you can replace this with your app.js:

var createError = require('http-errors');
var express = require('express');
var path = require('path');
var cors = require('cors')

var app = express();

app.use(cors());

app.use(express.json({limit: '50mb'}));
app.use(express.urlencoded({ extended: true, limit: '50mb' }));
app.use(express.static(path.join(__dirname, 'public')));

// catch 404 and forward to error handler
app.use(function(req, res, next) {
  next(createError(404));
});

// error handler
app.use(function(err, req, res, next) {
  // set locals, only providing error in development
  res.locals.message = err.message;
  res.locals.error = req.app.get('env') === 'development' ? err : {};

  // render the error page
  res.status(err.status || 500);
  res.render('error');
});

module.exports = app;

2.1- Creating our process route

Now we need to create a Express route to process our form data.

But first we are going to use a tiny package called ba64 which will help us to save base64 images to our disk.

The flow should be like this;

• Check the key is a valid Data URI
• If it's valid extract the Base64 string from Data URI
• Extract the mimetype from Data URI
• Save to the disk

That's where ba64 package comes in, it will automatically extract Base64 string from Data URI, and append the file extension after the file name automatically.

npm i --save ba64

Import it in our app.js

var ba64 = require('ba64')

Let's create our route, go to app.js and add following:

app.post('/upload', async (req, res, next) => {
  // exclude name and message for the sake of demo
  // all other body items will be considered as a file
  const { name, message, ...files } = req.body

  for(let key in files){
    const base64 = files[key]

    // check if it's correctly formatted Base64 Data URI
    if(checkBase64(base64)){
      // Write it to our root directory using input key as filename
      // eg. picture[1]
      ba64.writeImageSync(key, base64)
    }
  }

  res.send({files})
})

function checkBase64(string){
  const B64_REGEX = /^data:.*;base64,([0-9a-zA-Z+\\/]{4})*(([0-9a-zA-Z+\\/]{2}==)|([0-9a-zA-Z+\\/]{3}=))?$/i 

  return B64_REGEX.test(string)
}

Final code should look like:

var createError = require('http-errors');
var express = require('express');
var path = require('path');
var ba64 = require('ba64')
var cors = require('cors')

var app = express();

app.use(cors());

// view engine setup
app.use(express.json({limit: '50mb'}));
app.use(express.urlencoded({ extended: true, limit: '50mb' }));
app.use(express.static(path.join(__dirname, 'public')));


app.post('/upload', async (req, res, next) => {
  // exclude name and message for the sake of demo
  // all other body items will be considered as a file
  const { name, message, ...files } = req.body

  for(let key in files){
    const base64 = files[key]

    // check if it's correctly formatted Base64 Data URI
    if(checkBase64(base64)){
      // Write it to our root directory using input key as filename
      // eg. picture[1]
      ba64.writeImageSync(key, base64)
    }
  }

  res.send({files})
})

function checkBase64(string){
  const B64_REGEX = /^data:.*;base64,([0-9a-zA-Z+\/]{4})*(([0-9a-zA-Z+\/]{2}==)|([0-9a-zA-Z+\/]{3}=))?$/i 

  return B64_REGEX.test(string)
}

// catch 404 and forward to error handler
app.use(function(req, res, next) {
  next(createError(404));
});

// error handler
app.use(function(err, req, res, next) {
  // set locals, only providing error in development
  res.locals.message = err.message;
  res.locals.error = req.app.get('env') === 'development' ? err : {};

  // render the error page
  res.status(err.status || 500);
  res.render('error');
});

module.exports = app;

Now run the app using:

$ npm start

2.2 - Configure Front-end

Let's get back to our front-end code and point our form to the back-end our server runs at http://localhost:3000 and our route is localhost:3000/upload

const handleForm = async (event) => {
  event.preventDefault();

  if(!isFilesReady){
    console.log('files still getting processed')
    return
  }
 
  const formData = new FormData(formElement)

  let data = {
    'name': formData.get('name'),
    'message': formData.get('message')
  }

  Object.entries(myFiles).map(item => {
    const [key, file] = item
	// append the file to data object
    data[key] = file
  })

  fetch('http://localhost:3000/upload', {
    method: 'POST',
    body: JSON.stringify(data),
    headers: {
      'Content-Type': 'application/json',
      Accept: 'application/json'
    }
  })
  // convert response to json
  .then(r => r.json())
  .then(res => {
    console.log(res);
  });
}

Let's try it:

It works!

Conclusion

Thanks for following the blog post to the end, base64 is a tricky issue that's why I wanted to prepare an end-to-end fully functional tutorial.

I hope it's beneficial for you, if you have any questions just leave a comment and I'll try my best.

If you want to support us, just take a look at our service formcarry for a hassle free form handling.

One of the most time consuming thing about forms is definitely uploading files, sometimes you may need an HTML form with file upload functionality, in this guide we are going to start by as simple as possible than we are going to jump to advanced techniques

After you read this guide

• You can create a file upload form in 5 steps, under 3 minutes
• You can get email notifications from your HTML form
• You can export your contact form submissions as CSV and JSON
• You don't have to deal with any back end code stuff (Php, Go, Node.js etc.)

Step 1 — Create your HTML Form

First, you'll need an HTML form in your web page, which is not a big deal, a basic HTML upload form will look like this.

<form action="#" method="POST" enctype="multipart/form-data">
	<label for="nameInput">Name</label>
	<input type="text" id="nameInput" />

	<label for="messageInput">Message</label>
	<textarea id="messageInput" cols="30" rows="2"></textarea>

	<input type="file" id="pictureInput" />

	<button type="submit">Submit</button>
</form>

Your form element have to include enctype="multipart/form-data" to upload files

A basic form in HTML is just a static thing that's only obligated to deliver the user input to a back-end script. You have to point the form to some script to actually process the data.

if you want to have a fully styled form you can use our free form generator tool to generate a customized form code.

By default, file input only allows you to choose a single file from your device, if you want it to allow multiple files then you can use the multiple attribute

<input type="file" id="pictureInput" multiple />

Step 2 — Structure your form data

In order to send your form data to a script you need to name each of your fields so the script can match the values with the names (or the key).

You can add as many fields as you want.

Let's uniquely name each of our fields using name attribution.

<form action="#" method="POST" enctype="multipart/form-data">
	<label for="nameInput">Name</label>
  	<input type="text" id="nameInput" name="name" />

	<label for="messageInput">Message</label>
	<textarea id="messageInput" cols="30" rows="2" name="message"></textarea>

	<label for="pictureInput">Picture</label>
	<input type="file" id="pictureInput" name="picture" />

	<button type="submit">Submit</button>
</form>

Now we have a file upload form that's ready to deliver the data to a script.

Step 3 — Point your form to backend

There are two ways to handle this step, this part is the most time consuming stuff due to you have to check files, rename them uniquely save to database and upload to somewhere along with you'll also probably going to need a email server to send emails, which you always have to make sure that emails are delivered.

Option 1 — Create your own form back-end

You need to have a form backend to collect submissions and files from your form, this is typically done by some backend languages such as PHP, Node.js, Go etc.

We have a detailed guide on How to create a form backend with file upload

How to create an HTML contact form with file upload | Actionable Guide

In this tutorial, we are going to create a sample app using Express.js to uploadfiles to Amazon S3, then we are going to save our submission to the MongoDB Prerequisites for the tutorialI don’t want to cover some things that would over-complicate this tutorial,therefore I assume you know how to:…

Formcarry BlogNusu Alabuga

Take a look at that post if you want to build it on your own

Option 2 — Use Formcarry - File upload ready form backend

Formcarry is a free, no-code form backend for your HTML forms, in this tutorial I'm going to show you how can you create a file upload form under 3 minutes while it at least takes 1 hours if you do it on your own. Also you can get notification emails from your form, protected from spam by default and integrate your submission data with other apps using Zapier.

Sign Up to formcarry for free, then click Add New to get your unique form backend URL

Then copy your unique form endpoint

Step 4 — Integrate your form with formcarry

Copy your endpoint and paste it into action part of your form

- <form action="#" method="POST" enctype="multipart/form-data">
+ <form action="https://formcarry.com/s/{Your-Unique-Endpoint}" method="POST" enctype="multipart/form-data">

Step 5 — Collect submissions

Let's try out our form:

Now, let's take a look at our dashboard:

That's all you need to upload files when you are using formcarry, that's how deadly simple it is. We have covered the basics, now let's jump into something a little bit advanced.

Uploading files from your form using Javascript

Uploading files with raw HTML form is not so time consuming, but if you are trying to upload it with javascript it's possible that you are going to spend some time on figuring out what's going wrong.

First add our form id="formcarryForm"

- <form action="https://formcarry.com/s/{Your-Unique-Endpoint}" method="POST" enctype="multipart/form-data">
+ <form id="formcarryForm" method="POST" enctype="multipart/form-data">

Important note before we switch back to code

Common mistake while implementing a file upload in javascript is setting Content-Type as multipart/form-data while this is partly true, it's also very wrong approach.

Any content-type starts with multipart/* is required to have boundary, based on my own experiences and the support request we got from formcarry, we found out the ideal way to upload files from javascript is using the FormData class

const formElement = document.getElementById('formcarryForm')

const data = new FormData(formElement)

this will get each field from your form, but if you want to add some additional data, that you don't want to store in the HTML, you can add your additional data like that;

const formElement = document.getElementById('formcarryForm')

const data = new FormData(formElement)

data.append('language', window.navigator.language)

Uploading files from your form using Fetch API

Fetch API is an embedded request API for javascript, it's widely supported among modern browsers, check Fetch API compability.

Add this script before the </body> tag

<script>
  const formcarryForm = document.getElementById('formcarryForm')

  const sendFormData = async (event) => {
    // this will prevent your form to redirect to another page.
    event.preventDefault();
		
    // get our form data
    const formData = new FormData(formcarryForm)
    // add some additional data if you want
    // formData.append('language', window.navigator.language)

    fetch('https://formcarry.com/s/{Your-Unique-Endpoint}', {
      method: 'POST',
      body: formData,
      headers: {
		// you don't have to set Content-Type
		// otherwise it won't work due to boundary!
        Accept: 'application/json'
      }
    })
    // convert response to json
    .then(r => r.json())
    .then(res => {
      console.log(res);
    });
  }

  // Bind our sendFormData function to our forms submit event
  formcarryForm.addEventListener('submit', sendFormData);
</script>

Uploading files from your form using Axios

Axios is an promise based HTTP client for the browser and node.js, it's lightweight and a common library for making HTTP requests, it's a nice alternative for Fetch API

Add this script before the </body> tag

<script>
  const formcarryForm = document.getElementById('formcarryForm')

  const sendFormData = async (event) => {
    // this will prevent your form to redirect to another page.
    event.preventDefault();
		
	// get our form data
	const formData = new FormData(formcarryForm);
	// add some additional data if you want
	// formData.append('language', window.navigator.language)

    axios
      .post("https://formcarry.com/s/{Your-Unique-Endpoint}", formData, {
        headers: { 
			// you don't have to set Content-Type
			// otherwise it won't work due to boundary!
			Accept: "application/json" 
		},
      })
      .then(function (response) {
        console.log(response);
      })
      .catch(function (error) {
        // this is an error related to request
        console.log(error);
      });
  };

  // Bind our sendFormData function to our forms submit event
  formcarryForm.addEventListener('submit', sendFormData);
</script>

Uploading Files from your form with React

Using FormData class in React is a little bit tweaky, but let's take a look how to upload files with React.

We need to use useRef to access our form element, here's a sample component for you to upload files with React:

import React, { useRef } from "react"

const Form = () => {
  // create a Ref to access our form element
  const formRef = useRef(null)

  const sendFormData = async (event) => {
    // this will prevent your form to redirect to another page.
    event.preventDefault();

    if(!formRef.current){
      console.log('something wrong with form ref')
      return
    }
		
    // get our form data
    const formData = new FormData(formRef.current)

    // add some additional data if you want
    // formData.append('language', window.navigator.language)

    fetch('https://formcarry.com/s/{Your-Unique-Endpoint}', {
      method: 'POST',
      body: formData,
      headers: {
		// you don't have to set Content-Type
		// otherwise it won't work due to boundary!
        Accept: 'application/json'
      }
    })
    // convert response to json
    .then(r => r.json())
    .then(res => {
      console.log(res);
    });
  }

  return (
	// bind formRef to our form element
    <form ref={formRef} onSubmit={sendFormData}>
      <label htmlFor="nameInput">Name</label>
      <input type="text" id="nameInput" name="name" />

      <label htmlFor="messageInput">Message</label>
      <textarea id="messageInput" name="message"></textarea>

      <label htmlFor="pictureInput">Picture</label>
      <input type="file" id="pictureInput" name="picture" />

      <button type="submit">Submit</button>
    </form>
  )
}

export default Form

That's all! here's the live demo: codesandbox

Conclusion

I hope this guide was helpful for you, at formcarry our mission is providing an easy way to handle your HTML forms also we are trying to release form related in-depth guides, make sure you've subscribed our newsletter to get the latest posts.

Contact forms are one of the best ways to convert more leads, and get the information you need from your visitors in a specific order, but usually it's not so easy to craft, in this guide we are going to make it easy like a cake!

Sometimes you may want to create a contact form without PHP, if that's the case, this tutorial might be really helpful to you.

After you read this guide

• You can create a working HTML contact form in 4 steps, under 3 minutes for free
• You'll have a predefined CSS for you to quickly start
• You can get email notifications from your contact form
• You can export your contact form submissions as CSV and JSON
• You don't have to deal with any back end code stuff (Php, Go, Node.js etc.)

Step 1 — Create your HTML Form and CSS

First, you'll need an HTML form in your web page, which is not a big deal, a basic HTML contact form will look like this.

<form class="formcarryForm" action="#" method="POST">
  <label for="firstNameInput">First Name</label>
  <input type="text" id="firstNameInput" />

  <label for="lastNameInput">Last Name</label>
  <input type="text" id="lastNameInput" />

  <label for="emailInput">Email</label>
  <input type="email" id="emailInput" />

  <label for="messageInput">Message</label>
  <textarea id="messageInput" cols="30" rows="10"></textarea>

  <button type="submit">Submit</button>
</form>

A basic form in HTML is just a static thing that's only obligated to deliver the user input to a back-end script. You have to point the form to some script to actually process the data.

I have created a sample design for the sake of our blog post, which you can use it in your website for free.

Here's the CSS code that you can copy and use:

<style>
    @import url("https://fonts.googleapis.com/css2?family=Inter:wght@400;700&display=swap");

    /* 
    CONTACT FORM EXAMPLE FOR FORMCARRY

    IMPORTANT NOTE:
    PLEASE ADD formcarryForm class to your form element
    to apply the styles.
    */

    * {
        box-sizing: border-box;

        /* colors */
        --color-blue: #2552d0;
        --color-light-blue: #3266e3;
        --color-gray: #e5e7eb;
        --color-dark-gray: #9da3ae;
        --color-pink: #edadd2;

        /* container */
        --c-width: 50%;
        --c-max-width: 500px;
    }

    body {
        font-family: "Inter", sans-serif;
    }

    .formcarryContainer {
        width: var(--c-width);
        max-width: var(--c-max-width);
        display: block;
        margin: 10vh auto 0 auto;
    }

    .formcarryForm label {
        display: block;
        padding: 12px 0 2px 0;
        letter-spacing: -0.2px;
        cursor: pointer;
        font-size: 16px;
        font-weight: 700;
    }

    .formcarryForm input,
    .formcarryForm textarea {
        font-size: 16px;
        display: block;
        width: 100%;
        padding: 10px;
        background-color: var(--color-gray);
        border: none;
        border: 4px solid var(--color-gray);
        outline: none;
        border-radius: 8px;
        color: var(--color-dark-gray);
    }

    .formcarryForm input:focus,
    .formcarryForm textarea:focus {
        background-color: #fff;
        color: var(--color-dark-gray);
    }

    .formcarryForm input:focus:required:invalid {
        border-color: var(--color-pink);
        background-color: #fff;
    }

    .formcarryForm button {
        display: block;
        margin-top: 12px;
        width: 100%;
        padding: 12px 20px;
        border-radius: 8px;
        background-color: var(--color-blue);
        color: #fff;
        font-weight: 700;
        font-size: 18px;

        transition: 300ms all;
    }

    .formcarryForm button:hover {
        background-color: var(--color-light-blue);
    }

    .formcarry-alert {
        padding: 12px;
        border-radius: 10px;
        color: #fff;
        font-size: 14px;
        font-weight: 400;
        margin-top: 12px;
        display: none;
    }

    .formcarry-alert.visible {
        display: block;
    }

    .formcarry-alert.success {
        background: #69cf9d;
    }

    .formcarry-alert.error {
        background: #de524c;
    }
</style>

Here's the live CodeSandbox demo

Update 6 Jan, 2022:

We have built free form generator tool that you can customize and get HTML code, make sure you check it out if you need form template.

Step 2 — Structure your form data

In order to send your form data to a script you need to name each of your fields so the script can match the values with the names (or the key).

You can add as many fields as you want.

Let's uniquely name each of our fields using name attribution.

<form class="formcarryForm" action="#" method="POST">
  <label for="firstNameInput">First Name</label>
  <input type="text" id="firstNameInput" name="firstName" />

  <label for="lastNameInput">Last Name</label>
  <input type="text" id="lastNameInput" name="lastName" />

  <label for="emailInput">Email</label>
  <input type="email" id="emailInput" name="email" />

  <label for="messageInput">Message</label>
  <textarea id="messageInput" cols="30" rows="10" name="message"></textarea>

  <button type="submit">Submit</button>
</form>

Now we have a contact form that's ready to deliver the data to a script.

Step 3 — Point your form to backend

There's two ways to handle this step, this part is the most time consuming stuff due to you have to check fields, implement spam protection, create a mail server and make sure that it's working.

You can code your form backend on your own, or you can use Formcarry — form backend to process your form for free, that way you can get notification emails, use best in class spam protection and connect your submission data with other apps using Zapier.

If you want to code your own back-end take a look at How to create a contact form backend on your own.

Step 3.1 —  Create a form in formcarry

Sign Up to formcarry for free, then click Add New to get your unique form backend URL

Then copy your unique form endpoint

Step 3.2 — Integrate your form with formcarry

Copy your endpoint and paste it into action part of your form

- <form class="formcarryForm" action="#" method="POST">
+ <form class="formcarryForm" action="https://formcarry.com/s/{Your-Unique-Endpoint}" method="POST">

Step 4 — Collect submissions

We have crafted our form under few minutes and now you are ready to collect submissions, let's try our form!

Easy peasy 🙂, now refresh your formcarry dashboard to see the submission;

That's how easy it is, you can filter, sort and export your submissions from your formcarry dashboard.

You'll also get an email to the email addresses you have specified when you are creating the form;

Conclusion

I hope this blog post helped you! feel free to ask down there if anything didn't go expected.

It's really time consuming thing to create your own form backend but formcarry offers you the best solution, here's other things that you can benefit from using formcarry:

• Upload files to your form
• Integrating your submissions to other apps like, Integrate formcarry with Google Sheets
• Auto Responders
• Customize your Emails
• Analytics

At formcarry all of our job is to make sure that your form endpoint is always online, provide you the best spam protection and allow you to always receive email notifications whenever you got a new submission!

If you haven't registered yet, Register Formcarry for Free Now!

Although email is an old technology, it's still preserves its popularity. According to a 2017 Zapier blog post:

The number of people using email for team communication is more than 2.5 times higher than team chat apps like Slack.

Email newsletters are great for following the industry, or getting couple of discount codes. I think I have at least 15 subscriptions to different email newsletters.
Yes, email is still popular, but there's a problem that wastes our time. At formcarry, our mission is saving people from wasting time. Creating email templates is a hassle, because there are various email clients, even though email is an old technology and doesn't support a big amount of HTML and CSS features. In general we mostly see that email templates are being created using HTML tables. Often the file is also full of unnecessary code: it's so big that you don't even want to edit it.

Thanks to the Open Source, somebody made a solution for this: MJML

What is MJML?

MJML is made by Mailjet. It's a component based markup language that allows you to create responsive emails blazing fast and easier than ever. When you finish the project, it converts your MJML code to the HTML so you can use it for your projects.

Creating an Email Template with MJML

We will code an email template design using MJML in this blog post.

The Design

I have designed a minimal email template:

How to install MJML

MJML comes with several installing options for different platforms:

• MJML App - This app is built just for MJML, it has an editor and live preview feature.
• Visual Studio Code plugin - It's also has a live preview feature like the MJML App.
• Atom Plugin - It requires installing more than one package
• Sublime Text Plugin - It's just highlighting the MJML code. (Ohh sublime, you were a legend in the earliest days.)
• Node.js - npm install mjml

More information

We will stick with the MJML App for this demonstration. When we open the app this screen appears

There were some good features in options, such as minifying the exported code, configuring tab size and creating snippets are the ones I liked. I also recommend you to select the minifying option for exported code, as 27 lines of MJML turns into 296 lines of HTML, and you can leverage this.

Click the New Project, enter the project's name and you'll see this screen:

You have options in there: you can go with basic empty layout or you can choose something from the gallery

We're going to code it from scratch, so let's go with single file, basic layout.

First look

Let's observe the code. It seems there are so many things in common with HTML:

• An HTML file will start with <html> and end with </html>, MJML is using the same methodology
• <mj-head></mj-head> is equivalent of <head></head> tags in the HTML, same way the <mj-body></mj-body> is <body></body>
• We can define our styles in <mj-attributes></mj-attributes> just like in the HTML <style></style>
• We can give an inline-style like in the HTML, yet while HTML wraps the style attributes in style="" block, MJML uses it directly with property name and value
• mj-section and mj-column is using a grid system. (What is a grid system ?)

After the quick overview, let's code. First of all let's clean the unnecessary codes in our file.

<mjml>
  <mj-head>

  </mj-head>
  <mj-body>
    
  </mj-body>
</mjml>

A reminder of our design:

I have used the Montserrat font, which is free to use, for this demo. In order to add fonts in MJML, we need to add this code right after the <mj-head>.

<mj-head>
  <mj-font name="Montserrat" href="https://fonts.googleapis.com/css?family=Montserrat:400,500,600,700" />
  <mj-attributes>
    <mj-all font-family="Montserrat" />
  </mj-attributes>
</mj-head>

I also added the mj-attributes for setting Montserrat as the default font for this template.

Now I'm going to export my sample logo and paste it into the MJML project directory.

<mj-hero padding="40px">
  <mj-image align="left" width="138px" src="logo.png"/>
</mj-hero>

By default images aligned at center, if you want to align it to the left or right, you need to set "align" attribute.
This is how it looks right now:

Then we need 3 text elements and one button; Let's do that, we will use mj-text for texts and mj-button for button and a padding for mj-section

<mj-section padding="40px">

    <mj-column>

        <mj-text>
          Verify Your Email
        </mj-text>

        <mj-text>
          Hi Jhony! Use the link below to verify your email
    address.
        </mj-text>

        <mj-button>
            It's Me, Jhony!
        </mj-button>

        <mj-text>
          If you are not the Johny, we are sorry.
        </mj-text>

    </mj-column>

</mj-section>

How it looks:

Now we need to style that and finish our example. We just have to use CSS attributes in mj-text and mj-button elements.

<mj-text font-size="29px" font-weight="700" color="#222222" padding-bottom="30px">
    Verify Your Email
</mj-text>

Now style the paragraph and the notice text.

<mj-text font-size="18px" color="#9798A4" font-weight="400" line-height="27px" padding-bottom="60px">
  Hi Jhony! Use the link below to verify your email
address.
</mj-text>
...
<mj-text font-size="11px" color="#9798A4" font-weight="500" padding-top="30px">
      If you are not the Jhony, we are sorry.
</mj-text>        

How it looks:

We just have to style our button right now; let's do it.

<mj-button href="#" width="100%" inner-padding="25px" border-radius="6px" background-color="#005BF2" font-size="22px" font-weight="500" color="#fff">
      It's Me, Jhony!
</mj-button>

Looks perfect:

Without the spaces, this is only 22 lines of code, yet when we transform it to the HTML it becomes 296 lines of code (unminified).

We can export our file in the dropdown menu. Click to the down arrow to open it.

Looks perfect. If you want to dive deeper you can take a look at MJML Documentation

In this tutorial, we are going to create a sample app using Express.js to upload files to Amazon S3, then we are going to save our submission to the MongoDB

Prerequisites for the tutorial

I don't want to cover some things that would over-complicate this tutorial, therefore I assume you know how to:

• Get your API keys from Amazon AWS
• Create a bucket on Amazon S3

If you don't know how to do that, you can take a look at this blog post, it's fairly simple to follow.

Steps we are going to follow

• Create a Contact Form using HTML
• Bootstrap an Express.js app
• Parsing form data
• Uploading the file to S3
• Saving the data to MongoDB

Let's create a simple contact form using HTML

The key things when creating an upload form are the attributes you defined in <form>.

Let's create a simple form:

<form action="#" method="POST">
    <label for="email">Email Address</label>
    <input type="email" id="email" name="email">

    <label for="fullName">Full Name</label>
    <input type="text" id="fullName" name="fullName">

    <label for="message">Message</label>
    <textarea name="message" id="message"></textarea>

    <label for="photo">Photo</label>
    <input type="file" id="photo" name="photo">

    <button type="submit">Submit</button>
</form>

We have built free form generator tool that you can customize and get HTML code, make sure you check it out if you need form template.

In the software world, most of the configurable options have a default value that will apply unless you override it, and one of these for form is enctype.

When you make an request to the backend, you have to encode the form data, there are 3 options available for enctype:

• application/x-www-form-urlencoded (default)
• multipart/form-data
• text/plain

Through the w3 specification;

The content type "application/x-www-form-urlencoded" is inefficient for sending large quantities of binary data or text containing non-ASCII characters.
The content type "multipart/form-data" should be used for submitting forms that contain files, non-ASCII data, and binary data.

Also unless you really know what you are doing, do not ever use text/plain (click here for why.)

So what we want to do is set enctype to multipart/form-data

- <form action="#" method="POST">
+ <form action="#" method="POST" enctype="multipart/form-data">
	<label for="email">Email Address</label>
    <input type="email" id="email" name="email">

    <label for="fullName">Full Name</label>
    <input type="text" id="fullName" name="fullName">

    <label for="message">Message</label>
    <textarea name="message" id="message"></textarea>

    <label for="photo">Photo</label>
    <input type="file" id="photo" name="photo">

    <button type="submit">Submit</button>
</form>

Now we have a simple contact form that's ready to send data to our express app that we're going to develop now. Let's save this to somewhere for now.

Bootstrap an Express.js app

I assume that you've already installed Node.js.
Let's create and directory for our application using terminal/bash

$ mkdir my-form my-form/views
$ cd my-form

Use the npm init command to initialize our project.

$ npm init

Just hit enter for everything, and install express.js using:

$ npm install express express-fileupload --save
$ npm install nodemon -g

Now we have a directory structure like this:

.
|____my-form
| |____package.json
| |____views

Save the form that we created in the beginning under the views folder as form.html

.
|____my-form
| |____index.js
| |____package.json
| |____views
| | |____form.html

Let's create our index.js:

const express = require('express')
const app = express()
const fileUpload = require('express-fileupload')

app.use(fileUpload({
  // 50mb file limit
  limits: { fileSize: 50 * 1024 * 1024 },
  abortOnLimit: true
}));

app.get('/', (req, res) => {
  res.sendFile('views/form.html' , { root : __dirname});
})

// endpoint that will handle the form
app.post('/submit', (req, res) => {
  const {body, files} = req
  res.send({body, files})
})

const port = 3031

app.listen(port, () => {
  console.log(`Application is available at http://localhost:${port}`)
})

Save it, then open the form.html and point the form to the /submit endpoint we just created with express app:

- <form action="#" method="POST" enctype="multipart/form-data">
+ <form action="/submit" method="POST" enctype="multipart/form-data">

Don't have much time for a form?

File upload is not something you can achieve instantly, so if you want to have a quick and simple solution, check out our other blog post.

How to create a file upload form with formcarry

One of the most time consuming thing about forms is definitely uploading files,sometimes you may need an HTML form with file upload functionality, in thisguide we are going to start by as simple as possible than we are going to jumpto advanced techniques After you read this guide * You can crea…

Formcarry BlogNusu Alabuga

Now let's add some style:

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Contact Form</title>
  <link href="https://fonts.googleapis.com/css2?family=Inter&display=swap" rel="stylesheet">
  <style>
    body {
      font-family: "Inter";
    }

    label, button {
      font-size: 16px;
      cursor: pointer;
    }

    input, textarea {
      border: 3px solid #eee;
      padding: .4em 1em;
      border-radius: 6px;
    }

    form {
      display: grid;
      grid-row-gap: 10px;
      justify-content: center;
    }

    button {
      margin-top: 10px;
      background: #133EF5;
      color: #fff;
      padding: 10px 0;
      border: 0;
      border-radius: 6px;
    }
  </style>
</head>
<body>
  <form action="/submit" method="POST" enctype="multipart/form-data">
    <label for="email">Email Address</label>
    <input type="email" id="email" name="email">

    <label for="fullName">Full Name</label>
    <input type="text" id="fullName" name="fullName">

    <label for="message">Message</label>
    <textarea name="message" id="message"></textarea>

    <label for="photo">Photo</label>
    <input type="file" id="photo" name="photo">

    <button type="submit">Submit</button>
  </form>
</body>
</html>

Finally run:

$ nodemon index.js

Then visit http://localhost:3031 from your browser:

Fill out the form with sample data and file then submit.
You will see something like this:

use JSONView Chrome Extension to display JSON content like 👆

Great, now we are ready to do the rest, let's clarify something before getting going:

As you can see with the picture above, whatever you define for name will be present on the backend with same value, so if you don't name your fields then you can't parse them.
This is an common mistake so be careful 🕵️

Configuring AWS-SDK

Let's install aws-sdk:

$ npm install aws-sdk --save

Then import it and use the keys that you have obtained from AWS:

const express = require('express')
const app = express()
const fileUpload = require('express-fileupload')
+ const AWS = require('aws-sdk')

+ AWS.config.update({
+  accessKeyId: '<Replace with your access key>',
+  secretAccessKey: '<Replace with your secret key>'
+ })

+ const s3 = new AWS.S3({ params: { Bucket: '<Replace with your bucket name>' }});

app.use(fileUpload({
  // 50mb file limit
  limits: { fileSize: 50 * 1024 * 1024 },
  abortOnLimit: true
}));

app.get('/', (req, res) => {
  res.sendFile('views/form.html' , { root : __dirname});
})

app.post('/submit', (req, res) => {
  const { body, files } = req
  res.send({body, files})
})

const port = 3031

app.listen(port, () => {
  console.log(`Application is available at http://localhost:${port}`)
})

Uploading File

We are ready to upload now, first let's transform our function to an async function:

- app.post('/submit', (req, res) => {
+ app.post('/submit', async (req, res) => {

Then let's add the code that manages upload:

app.post('/submit', async (req, res) => {
  const { files } = req

  try {
    const upload = new AWS.S3.ManagedUpload({
      params: { 
        // pass directly the buffer string
        Body: files.photo.data, 
        // pass the file name
        Key: files.photo.name,
        // make it public
        ACL: 'public-read'
      },
      // use the const s3 that we defined above
      service: s3,
    })

    const response = await upload.promise()

    res.send(response)
  } catch (error) {
    res.send(error)
  }
})

So what's happening there?

We destructured the req object that holds the files, so const files is equivalent of req.files.
Let's remember our test payload.

Everything under files key is provided by express-fileupload module, which handles the files and returns them in a nice and usable structure.

AWS.S3.ManagedUpload and AWS.S3.Upload can accept  Buffer, Typed Array, Blob, String, ReadableStream. While our files.photo.data is a Buffer we can directly pass that to the Body parameter .

ACL is shorthand for Access Control List, which we've set to public-read to view the uploaded file.

Key is the name of our file.

Let's try it

Visit http://localhost:3031/ and fill out the fields. You don't necessarily have to fill anything other than the file because we haven't done anything with it yet.

After you click the Submit button, you will see something like this:

Then check your bucket and you will see the file in the bucket.

It worked! Now we have form data and the uploaded file details, we can use this data to save to the database or send some webhook.

Renaming the files

It's not a wise choice to use the original file name, in case someone else uploads a file with the same name, it's better to write a simple function to generate a random name:

const path = require('path');

const generateUniqueFileName = (fileName) => {
  const extension = path.extname(fileName)
  const date = Date.now();

  let randomHash = ''
  const characters = 'ABCDEFGHIJKLMNOPQRSTUVWXYZabcdefghijklmnopqrstuvwxyz0123456789';
  
  new Array(20).fill(null).map(_ => {
    randomHash += characters.charAt(Math.floor(Math.random() * characters.length));
  })

  return `${randomHash}-${date}${extension}`
}

It's not even a wise choice to depend on only a random generated string: it's better to add something unique to that time, like time ⏱ itself using Date.now();

const upload = new AWS.S3.ManagedUpload({
  params: { 
    // pass directly the buffer string
    Body: files.photo.data, 
    // pass the file name
-   Key: files.photo.name,
+   Key: generateUniqueFileName(files.photo.name),
    // make it public
    ACL: 'public-read'
  },
  // use the const s3 that we defined above
  service: s3,
})

Saving the messages to the MongoDB (Optional)

Now, because we have the file and form message, we can save them into the database.
I'm going to use MongoDB for this purpose. I assume that you have a working MongoDB setup; if you don't you can checkout this page

I'm going to use mongoose npm package in order to do the operations inside our express.js app

Install Mongoose

$ npm install mongoose --save

Create A MongoDB Database

$ mongo
$ use contactform

Import Mongoose

Add this code to index.js

const mongoose = require('mongoose')

mongoose.connect('mongodb://localhost:27017/contactform');

Create Model

First let's create a directory called models under our project root, than create form.js into it

mkdir models
touch models/form.js

Open the empty form.js using your code editor, and paste this:

const mongoose = require('mongoose');

const form = new mongoose.Schema({
  fullName: String,
  email: String,
  message: String,
  photo: String,
});

module.exports = mongoose.model('form', form);

Models are basically MongoDB Schema on steroids - you can take a look at them here to learn more. All of the fields I defined are the fields we have in our form.html

Import our Model

Let's import our model into the index.js

const mongoose = require('mongoose')

mongoose.connect('mongodb://localhost:27017/contactform');

+ const Form = require('./models/form')

Saving the form message

Let's change our main route for saving the submission:

app.post('/submit', async (req, res) => {
  const { files } = req

  try {
    const upload = new AWS.S3.ManagedUpload({
      params: { 
        // pass directly the buffer string
        Body: files.photo.data, 
        // pass the file name
        Key: generateUniqueFileName(files.photo.name),
        // make it public
        ACL: 'public-read'
      },
      // use the const s3 that we defined above
      service: s3,
    })

    const response = await upload.promise()

+    const { fullName, email, message } = req.body
+    const submission = new Form({
+      fullName: fullName,
+      email: email,
+      message: message,
+      photo: response.Location
+    })

+    submission.save()

-    res.send(response)
+    res.send(submission)
  } catch (error) {
    res.send(error)
  }
})

Little trick

While the key and the value are same we can convert our code to this:

const submission = new Form({
  fullName,
  email,
  message,
  photo: response.Location
})

Let's try it

Visit https://localhost:3031 and fill the fields

Click Submit, then:

That's it! now you have a perfectly functional form.

Alternative and Simple Way: Use Formcarry

By no means all of those process are time consuming stuff, we have an offer for you, feel free to try formcarry - form backend, instead of coding everything on your own you can have a file upload ready form in under a minute just by changing your form's action attribute

<form action="https://formcarry.com/s/{YOUR_FORM_ID}" method="POST" enctype="multipart/form-data">
    <label for="email">Email Address</label>
    <input type="email" id="email" name="email">

    <label for="fullName">Full Name</label>
    <input type="text" id="fullName" name="fullName">

    <label for="message">Message</label>
    <textarea name="message" id="message"></textarea>

    <label for="photo">Photo</label>
    <input type="file" id="photo" name="photo">

    <button type="submit">Submit</button>
  </form>

Comparing the steps above, formcarry is a very fast and secure way to collecting submissions with file attachments, use it in your contact forms, job application forms, or event forms as you need.

Grab your Form ID from here for free!