A Step by Step Guide for Building Your First Online Form

 Building Your First Web Form Guide

Maybe you need an online form on your website for lead generation, event registration or for a streamlined ordering process. Or perhaps you need a web form to gather customer feedback or simplify your HR processes and you chose 123ContactForm for that. Great choice my friend!

Now if you’ve never used 123ContactForm before and you have no idea where to start, you’ve come to the right place.

Our online form builder is made to be simple for everyone to use, it doesn’t require technical skills or coding experience, nonetheless offering the power and flexibility needed to create any type of online forms.

However, being all new information, it’s best to master the basics before going into the difficult stuff and this practical guide will help you do just that.

We’re not called 123ContactForm for nothing, but precisely because the form building process takes just 3 simple steps: editing, tweaking the settings and publishing the form. Let’s cover each of these process steps below:

Step #1: Edit the form

So you’ve logged into your account and you want to create your first form. You’re now in the Dashboard area and all you have to do is click the  button you’ll find in the top left-hand corner of the page. Once you did that, you’ll be able to start creating a new form.

As you’ll see, you have two options now: You can start from zero with a blank form and add from the beginning all the fields you need. If that is the case, simply hit the  button. Or you can start with one of the many free form templates we provide.

*As a starting point, it will definitely be easier for you to begin with a form template and customize it however you see fit, by adding or removing fields. For a more structured list, scroll all the way to the bottom until you can see the Other Form box and at the bottom of the box, click See All Templates.

On the left side you’ll have a variety of business fields and a number of relevant forms, popular in those particular fields. So if for example, you’re an event organizer and you need to create a Booking Form or maybe an Online Event Registration Form, this is where you’ll easily find the form templates to start with.

Simply click the Use This Template button and the form will open in the Editor section. That’s where you’ll also get if you go for the other option of starting with a blank sheet.

The type of fields you can add on your form are divided into BASIC FIELDS, SPECIAL FIELDS and OTHER FIELDS, just to make it easier for everyone to differentiate them.

The BASIC FIELDS (click to see each field detailed) are quite self-explanatory: you’ll be able to choose from Short Text and Long Text type of fields to a Heading field and Image. These are the type of fields you would normally need for most online forms.

The SPECIAL FIELDS are the ones you might or might not need to add to your form, depending on your particular needs. Here you’ll find fields such as Name and Email or Date and Time.

The OTHER FIELDS will help you personalize your form even more: maybe you need to add fields like a Google Map or Social buttons.

* How to add a field on the form? Simply drag it with the mouse from the left side to the form canvas and place it wherever you want to. Also with Drag and Drop you’ll be able to move its position.

If you click on a field, you’ll see 3 little icons on its top right: by clicking on each of them you’ll be able to either Duplicate, Resize or Delete that specific field. On the left, you’ll see the customizing options available for that field.

*The form editor has real-time preview. What does this exactly mean? It means that you can immediately see the changes you make by adding or editing fields. Simply click the View Form button and it will open in another page showing your form the way it will be seen by form users.

Step #2: Tweak the settings

Right after the Edit section, you’ll see the Settings tab. Once clicked, it will open with the specific options in the left panel. Each option, again, once clicked will be detailed on the right.

Here are the type of Settings you can tweak:

Notifications (click for details) allow you to determine which form users get specific submissions, who receives all of them, allow you to set the message your visitors will see after submission, if they will receive their submissions copy or a confirmation message and more.

Thank You Page and Redirects is where you can customize the content of the Thank You page and also from where you can redirect form visitors to a web page you own.

Themes, where you can manage and customize the form themes, choose a predefined one for your form or start building one from scratch.

Applications  are also known as third party apps( such as MailChimp and Zoho CRM)  that you can integrate with your web forms.

Payments allow you to set up details concerning the type of payment you accept, assign prices to your items,  customize notifications and integrate your order form with a payment gateway.

Security to protect your forms through various methods such as CAPTCHA, country filters, password protection and limiting submissions per IP.

Rules also known as conditional logic, can help you change the behavior of the form based on the submitted answers.

Translations enable you to create a multilingual form but also translate current default system messages on your form, such as alerts or placeholders.

Advanced settings for even more flexibility.

Step #3: Publish the form

So you got to the final part. Bravo! Now let’s get your form published.

Hit the Publish tab and as usual, you’ll see in the left panel all of the publishing methods available:

Form Link- for posting a simple text or image link, link you can afterword send to others by email.

Embed Code- helps you embed the web form in your your website as JavaScript (recommended), as an iFrame or as inline HTML. By using the JavaScript embed method, you no longer need to update your web page whenever you’ve modified your form. Moreover, by using the JS code you can benefit from more accurate results from the feature that you are using.

Facebook- With the 123ContactForm application for Facebook it’s super easy. Once you click the Facebook option, you’ll see a handy video tutorial in the right panel.

Blogger- Use the embed code for Blogger to publish your form in any post or page of your blog.

WordPress- For WordPress publishing you can either publish and install the 123ContactForm plugin for WordPress or use our dedicated WordPress Form Builder Plugin and create your online forms straight from your WordPress dashboard.

Joomla- With the 123ContactForm extension for Joomla forms, you can easily publish your web forms on your Joomla website.

ExactTarget– With the 123ContactForm – ExactTarget integration, you can integrate your forms with your ExactTarget email marketing campaigns. Simply create and customize them, then add them in the email messages your subscribers receive.

Unbounce– With the embed code we provide you with, you can publish your online forms on Unbounce as well.

Google Sites- With the link generated for your form you can add a form to you Google Sites page.

Twitter- By copying the link generated for your form and pasting it in your tweets, you can share your web forms on Twitter.

All you have to do now is choose your preferred publishing method. And that’s about it. You’ve successfully completed our  step by step guide for building your first web form! Now here’s a quick tour video video to better visualize the steps we talked about:

*Are you a Wix user? Follow our guide on how to use the 123 Form Builder app for Wix that will assist you in creating and publishing the forms or surveys that you need on your website.

Still have questions? We’re here to help!

For even more tips and how-to guides on different topics, you can visit our Knowledge base.

And apart from that, if you need assistance, you can contact us by live chat or email.

Claudia Borceanu
Claudia Borceanu
is a Social Media Community Manager at 123ContactForm. She manages our social media presence and contributes to the overall communication strategy. Claudia loves nature, music, reading, traveling and learning new things.

Leave a Reply

Your email address will not be published. Required fields are marked *