Beginner's guide to create HTML forms

Many users of our services are absolute beginners, with little or no knowledge about HTML and HTML forms. So we decided to create this guide, which shows exactly how to create and use a basic HTML contact form.

Step 1: If you haven't done it already, sign up for a free 123ContactForm account.
Step 2: Log in to your 123ContactForm account, using your username and password.
Step 3: In your dashboard, click on Create New Form (Image 1).
Step 4: Select the first option, Contact Form (Image 2).
Step 5: Type in the name of your contact form (e.g. My Contact Form) and press OK.
Step 6: You will be taken to the Form Editor. For this simple form, you don't need to edit or customize anything, so press Continue in the top right corner of the editor.
Step 7: The next section is Form Settings. Don't customize any settings for now. Press the Continue button again.

Image 1

Image 2

Image 3

Step 8: You've arrived to the Publish section. Click on the tab Embed Code in the left panel and focus on the third option, Inline HTML (Image 3). Click on the code to select it and then copy it (CTRL + C keyboard combination). When you acquire a bit of experience with our form engine, you'll be able to use other publishing options (such as JavaScript) and publish your forms on Facebook, WordPress and many other platforms.
Step 9: Create a new HTML file, using your favourite web editor (e.g. Microsoft Frontpage, CoffeCup HTML Editor or even Notepad).
Step 10: Paste the HTML code of the contact form in this new file (CTRL + V keyboard combination).
Step 11: Save the file on your hard drive as contactus.html.
Step 12: Upload contactus.html to your server, using your favourite FTP Client (e.g. GoFTP, FileZilla, SmartFTP).
Step 13: If you did all steps correctly, when you open your contact page (e.g. http://www.yoursite.com/contactus.html) in the browser, your contact form will show up.
Step 14: Test the form by filling out all the fields and pressing the Send Email button. You should receive the email within seconds. By default, form submissions are sent to the email address you have used for creating your account.

After you've got used to creating basic contact forms, it's time to go further. Add and edit form fields to get precisely the information you are interested in. Don't forget to customize the appearance of your form and make it blend with your web site – we all know branding is a must these days.

Visit our Help & Documentation section to learn more about 123ContactForm web forms and contact us if you encounter any difficulties. Enjoy!