Words on a Page Writings about writing

Adding a contact form to your website or blog using JotForm

A woman typing an email on a laptop

So you’re a freelance writer with a website or a blog. Maybe both. How do you let clients and prospective clients get in touch with you? To be honest, it’s not a wise move to put your email address on the web, unless you want to receive an flood of spam.

A contact form, however, is a great choice. It not only lets gives clients a way to get in touch, it can also let them choose what the email is about — for example an inquiry about your services, a press contact, and the like.

You can find some nice-looking contact forms, free or paid, that you can add to your site or blog. But if you want to make changes to them, you’re going to have to know some HTML. Not all writers do.

If you can click and drag, and copy and paste, then you can create a custom, attractive contact for using JotForm. Let’s look at how.

Getting started

The first thing you’ll have to do is sign up for an account. That only takes a few seconds.

A basic JotForm account is free, and you can stay on that kind of account if you’re going to receive 100 or fewer submissions from your contact form each month. Otherwise, you’ll have to pay $19 (USD) and up a month.

Before you begin

Before you jump into building a form, think about what information you want to collect from someone using your contact form. With the forms I use on my website, for example, I want to get:

  • The person’s name
  • The person’s email address
  • Why they want to contact me
  • A short message from them

Your needs might be different. In any case, you might find it helpful to do a rough sketch of how you want your form to look. If you don’t know where to start, visit a favourite website or two and check out their forms for ideas.

Building your form

You’ve got your account. You’ve logged into JotForm. Now what? Start building a form, that’s what.

Click the My Forms tab, then click the Create Form button. You can choose to create a blank form or use a template. I’ve never tried the third option, importing an existing form.

Choosing how to create your form

Let’s say you’re being adventurous and decide to use a blank canvas. Click Create. You’ll be asked for a name for the form. Make that name as descriptive as possible. Then, click Continue. Your empty form appears in the Form Builder.

JotForm Form Builder

You’ll see a number of form elements on the left side of the Form Builder. Drag the ones you want to use from left side into the main part of the Form Builder.

You can double click the headings of those elements to change them. Or, you can click the gear icon for each element to get access to more advanced options like:

  • Changing the width of a field or a text box
  • Adding options to a list
  • How to align labels
  • Pointing to an image you want to include in the form to brand it
  • Limiting the type and size of a file a person can upload

And a whole lot more.

Remember what I usually include in a contact form? Here’s what it looks like while being edited:

A form being edited in Jotform

Adding some style to your form

The basic form is functional, but a bit bland. You can add a theme to your form by clicking the Setup and Embed tab, then clicking Themes. You can find a number of free themes, and ones that you can buy for anywhere from 99 cents to $10.

When you choose a theme, you get a preview that won’t be applied until you save your form or buy the theme and save the form.

Previewing a themed form in Jotform

Adding your form to your website or blog

I’ve found that the easiest way to include a form on my site is to embed the code on my contact page. That’s pretty easy to do.

In JotForm, click My Forms to return to the list of your contact forms. You’ll probably only have one at this moment.

When your form is ready to go, click the name of your form and then click More. In the menu that appears, click Publish.

A small window appears. Click EMBED. Then, click COPY CODE.

Publishing a form in Jotform

From there, just paste the code into a page on your website.

A live form

If you’re using a popular blogging platform or content management system like WordPress or Blogger, click the PLATFORMS tab, then click your the name of your blogging platform. JotForm gives you code that you can copy and tells you how to embed that code in your blog.

Once the form is live, any submissions are sent to the email address you used to sign up to JotForm.

A form submission in an email client

Final thoughts

There’s a lot more to JotForm than what I’ve discussed in this post. It gives you a lot of control over the content, look, and feel of your forms. Best of all, it’s easy to use.

Thoughts? Let's start a conversation on Twitter.