Tutorials›Adding a Contact Form to Your Website with JotForm

Allowing visitors to send you feedback is useful for a number of reasons, so making it as easy as possible should be a priority. One of the simplest and most common ways to do this is to embed an email contact form on your website. This tutorial will walk you through adding such a form using the slick and easy to use JotForm service.

Overview

• 1. Create a JotForm account
• 2. Build the contact form
• 3. Embed the form code

1. Create a JotForm account

Before we begin, let's create a JotForm account:

1. Click the Create an Account button on the JotForm homepage.

   

2. Choose a username and password, enter your email address (which is where your form messages will end up), then click Create My Account.

   

Your account is now created. Click Start Creating Forms to, well, start creating your form.

2. Build the contact form

Now, let's put together our form. For this tutorial, we're just going to build a simple contact form with these fields: full name, email, subject, and message.

1. First, we need to add our full name field. Click the Quick Tools tab and click Full Name.

   

   This will add the field and display it in the form builder area to the right.

   

2. Next we'll add our email field. Click E-mail to add it.

   

3. Next up is our subject field. Click the Form Tools tab and click Text Box. This will add a generic text box field.

   

4. Change the name of new text box field to "Subject".

   

5. Finally, we need our message field. Click Text Area to add a generic text area field.

   

6. All that's left now is to change the name of our new field to "Message".

   

Our form is done, so the last thing we have to do is embed it on our website.

3. Embed the form code

With our form completed, let's get it embedded on our website so visitors can actually use it.

1. Click the Setup & Embed tab.

   

2. Click Embed Form.

   

3. Now we get to decide how we want to embed our contact form. There are several options available, but for now just click Embed.

   

4. Select the form code and copy it to your clipboard.

   

5. Use your text editor (or HTML editor in Code View) to open the page in which you want your form to appear and paste in the form code. Save your changes and, if necessary, upload the modified page to your web host.

   

Now, open the page you just edited and you should see your brand new form, ready to go.

Done!

That's all there is to it, though feel free to give your form a test to make sure it works. You'll receive form submissions by email but you can also manage them from your JotForm account.

Now, while JotForm makes implementing contact forms ridiculously easy, it's capable of way, way more than what little we demonstrated in this tutorial. If you're interested in learning more about JotForm, check out their FAQ or their website.