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 two types of fields: basic fields and advanced 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.
You can edit a form field by selecting it and using the panel on the left. For example, you can select a textbox within the form layout and use the Edit Field panel on the left to change its width in pixels.
You may also change the layout itself by using the layout options that appear under the Show Layout Options button. Just click the button to change settings.
Note: We support text direction from right-to-left and form width up to 1920 pixels. Use the slider to change the form width. Use the mouse to drag the slider left or right, as you see fit for your contact form.
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, scroll down 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.
13. In Publish, click on the Embed Code tab on the left.
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 email@example.com and they will reply as soon as possible.
Thank you for using 123FormBuilder!