Intro
In this blog post, I’m going to show you how to design your own contact form for free and modify your labels according to your preferences. Having a contact form is essential if you’re running any kind of business on your website because your website visitors can contact you any time. You can even set up automatic reply-back message if you’re busy or maybe on a vacation. Foundations we need are: wordpress friendly website, elementor page builder and pro elements widgets which are crucial! So if you missed my blog post on how to use elementor professional widgets completely for free, here’s the link:
Secret Website To Download Elementor Pro Widgets For Free!
As we have our foundations ready, we can get started.
Add Your Contact Form
Log in to your wordpress dashboard. On the navigati0n menu to the left, select ”Pages” and click on ”All Pages.” We’re going to add Professional Contact Form to our desired website page. In this tutorial, I’m going to use my homepage. Simply click on ”Edit with Elementor.” Afterwards, you need to find ”Form” widget under ”Pro” widgets section. Drag and drop it to the empty container section of your page. Consequently, default contact form is going to appear containing ”Name”, ”Email” and ”Message” labels. Modify it however you wish. Remove all the default labels and add your own custom ones, if desired.
Modify Form Fields Labels
For the sake of this blog post, I’m going to modify my contact form so it contains labels ”First Name”, ”Last Name”, ”Email”, ”Where Did You Hear About Us” and ”Message.” Additionally, I’m going to set all of them as required fields when someone submits their contact form message. How to do it? Come to ”Content” in your Contact Form, under ”Form Fields” – delete and create your desired labels, name them in the ”Label” & ”Placeholder” empty field space. Make sure to leave ”Type” for ”Message” label as ”Textarea” because we need more typing space for message (just common sense, there needs to be more space for message). For all other labels, you can choose ”Type” as ”Text” because we don’t need that much typing space for ”First Name”, ”Last Name”, ”Email”, ”Where Did You Hear About Us”, etc. Set all labels that you want as required by turning ”Required” button from ”No” to ”Yes” (individually for each label). Finally, we also need to turn ”Required Mark” button from ”Hide” to ”Show” which is below all form fields, just under ”Label” which also needs to be turned on to ”Show” if you want your form fields labels to be visible, Lastly, you can come to ”Style” and change your ”Send” message button text font & colour + background colour. Play around and select your favourite colours, I will use white text colour and blue background colour. Once you’re done, ”Update” your changes, refresh your page and boom! Your professional contact form is up-and-running!
Bottom Line
Purpose of this blog post was to learn how to create your own professional contact form and modify it however you choose to so you can later receive and reply back to your submitted messages from your website visitors. I’ve shown you how to change and modify form fields according to your specific needs. Making them as ”Required” fields when someone submits their information when contacting you. Change your ”Send” button text & background colors from default to your favourite ones. All we needed to do was to add ”Form” widget to our desired website page where we want to display our professional contact form. Appreciate your time reading this post! Enjoy using your new wordpress contact form!