How to create a contact form as easy as 1-2-3!

If you’re looking for a guide on how to create a contact form for your website, consider reading this documentation. 123FormBuilder is a professional web form builder that not only creates user-friendly contact forms, but also covers them with many features that you might find useful. Know that you can build a contact form with the forever free plan (Basic), while the paid plans enable more advanced features for your contact form.To create a contact form, sign up for the 123FormBuilder service and follow the steps below:

1. Sign up or log into 123FormBuilder with your account credentials. If you’ve just signed up, you’re already logged in. If you already had an account, enter your username and password on the login page.

2. Click Create New Form on the top left side of your dashboard, under the header.

3. You can select the form template Contact & Lead Form or you can create the contact form from scratch. If that is the case, select Blank Form. Click the canvas to proceed.

4. Type in the name of the form. This is how you see it listed in your account, not the name that will appear to your form users. Press Ok to continue.

5. You are now in the Form Editor, where you can adjust the form fields and form layout (if you’ve selected the contact form template) or add your form fields to the form.

6. There are three types of fields: basic fields, specific fields and other fields . To add a field to the form, select it and drag it to the layout. Hold the click on the field while placing it on the form. You can drag and drop the fields that are already included in the form layout if you want to change the order in which they appear. By hovering on the sides of the form, you can adjust the layout and design of the form. You can also add multiple fields on one row and adjust their sizes.

You can edit a form field by selecting it and using the panel on the left. For example, you can select a Short text field within the form layout and use the Edit Field panel on the left to change its properties and further customize that field.

You may also change the design of the form by clicking on the Show Theme Options button in the right corner of the screen next to the Preview button.

7. You’re currently in the Edit tab, but now we move to the settings part.

The Settings section has many options that you may use, but in this article we are going to set up the email notification that we receive and the confirmation message/ autoresponder that the form user will receive after the contact form is submitted.

8. The email address associated to the 123FormBuilder account is automatically the recipient of the email notifications for each created form. You may change this by hovering over the email address and press the Edit button. You can also add new recipients by using the New Recipient button and create branches based on certain conditions.

9. Under Email Header and Content customize the email notification template as you need it sent to your inbox. Associate the name field to the name of the sender, email address to the sender email, the email address you want to reply to and the message subject. You can create several templates that you may select through the dropdown. Use the Customize button to edit the selected template. Be careful, however, as the default template cannot be edited. But you can create a new one that copies the same layout.

10. Next, change tab to Form User Options and tick the box under Autoresponder. The settings are similar as in step 9, with the mention that you can only customize autoresponder templates on the Gold plan.

11. Press Save changes on top to proceed.

12. Finally, hit the Publish tab on top to get the publishing code. 123FormBuilder is packed with many publishing option, but let’s assume we’re going to use the embed code – JavaScript.

13. In Publish, click on the Embed Code tab on the left.

14. Copy the Javascript code and paste it within the source code of your contact web page.

And there you have it! A great contact form that will allow your audience to communicate with you fast and easy. And as you’ve seen, no coding skills were needed. If you want to build more advanced contact forms, feel free to browse around your 123FormBuilder account and create new contact forms. If you require assistance, our Support Team will more than gladly help. Just drop them a message at support@123formbuilder.com and they will reply as soon as possible.

Thank you for using 123FormBuilder!