How to add a Contact Form in WordPress
by Priyadarshini on November 15, 2024
A contact form is more than just a feature on your website, it’s an open door for connection. Whether you’re a blogger, a small business, or an e-commerce site , setting up a contact form on your website is essential for allowing visitors to easily get in touch with you.
It’s important that we select a contact form that matches our needs, has a good design, is easy to setup and protects us from spam protection etc. In this guide, I’ll show you how to add contact form on your WordPress website using a simple plugin and also how to add a Contact Form Widget to your sidebar.
Which Contact Form Plugin to select?
When it comes to adding a contact form to your WordPress website, you have plenty of options. Plugins like Contact Form 7, Formidable Forms, and Gravity Forms are popular choices with unique features. However, not all of them are entirely free, and some require coding knowledge for customization. If you’re looking for a user-friendly and free solution, plugins like WPForms and Ninja Forms are excellent options.
In this guide we will create a contact form using WPForms which is a beginner-friendly plugin that lets you add a professional contact form in minutes, without needing any coding experience. Let’s Begin! 🚀
Step 1: Install and Activate WPForms in WordPress
- Go to your WordPress Dashboard and navigate to Plugins > Add New Plugin
- In the search bar, type WPForms. Find WPForms in the results, click Install Now.
- Once Installed, then Activate. After activation WPForms will appear in your dashboard.
Step 2: Create Your Contact Form with WPForms
Now that WPForms is installed, you’re ready to create your first form.
- From your dashboard, Go to WPForms > Add New.
- At top, you will find an option to name your form. Here we have named it ‘Contact Us’. Yoy can skip this for later as well.
- Below this, you’ll see various templates. Select any template according to your needs. Here we have selected Simple Contact Form. This template includes essential fields like Name, Email, and Message. Click on > Use Template.
- You can customize the fields by clicking on each one to edit its details or dragging new fields from the left panel. The free version has useful fields, but you can also upgrade to paid versions and unlock more options.
- For an example here we have drag and dropped the ‘Paragraph Text‘ in our Contact Form.
- On Clicking > Field Options you can Customise the fields more.
- You can see an Asterisk (*) besides name and Email, which makes it madatory fields to be filled. You can make more fields mandatory like the comment or message field. Click on the > Required toggle, to make the respective field mandatory.
- Once done, you can see the ‘Comment or Message’ field mandatory and click on > Save.
Step 3: Configure Form’s Settings
With your fields in place, it’s time to adjust the form’s settings for a seamless experience.
Setting up Spam Protection and Security
By enabling spam protection and security settings in WPForms, your inbox will be free from spam while ensuring a secure experience for genuine users.
- Navigate to Settings > Spam Protection and Security and make sure to enable Modern anti-spam protection and if needed you can also enable the minimum time to submit for additional protection.
Setting up Notifications
- Notifications: WPForms will send you an email notification whenever someone submits the form. To customize the email recipient, go to Settings > Notifications
- By default, WPForms will send notifications to the WordPress admin email. You can change this to any preferred email address where you’d like to receive notifications.
- Set a Email subject line that helps you identify incoming mails quickly, like “New Contact Form Submission- Name” or “New Entry: Contact Us”.
- By clicking on > Show Smart tags you can further add specific details that is entered by the user like Name, Email etc which can be pretty handy for you.
- In the ‘From Name‘, set the sender name to something recognizable, such as your website’s name, so that the user immediately knows where the message is coming from and Use an email address associated with your domain (example : contact@yourwebsite.com) for a more professional touch and improved deliverability.
- ‘Reply-To‘ option is to ideally set to the visitor’s email field from the form. This allows you to respond directly to the visitor who submitted the form and ‘Email Message‘ is for you to customize the email body to display all fields and messages you’d like to receive. WPForms will populate this by default, but you can tailor it to highlight key fields or include additional context.
Setting Up Confirmations
Setting up a confirmation message reassures visitors that their submission was successful. This enhances user experience and preventing duplicate entries.
- Navigate to Settings > Confirmations.
- Seelect the Confirmation type as > Message or Show Page or URL.
- Customize the confirmation message to let visitors know their submission was successful. You can set up a brief thank-you message or redirect users to a dedicated “Thank You” page.
- Once you are done with setting up notifications, Spam Protection, confirmations etc. Click on > save on the top and click on the Cross icon ‘❌’ to exit from WPForms builder.
- Once you exit, you will find the Contact form you created (in this case we named it ‘Contact Us’) under the WPForms section whih now can be added to pages.
Step 4: Embed the Contact Form on Your Site
WPForms makes it easy to add your new contact form to any page or post.
- From your dashboard, navigate to > Pages > All Pages.
- Create or open the page where you’d like the form to appear (example -Contact Us). Here we are adding the contact form to our ‘Sample Page’.
- In the editor, click on the ‘+ icon ‘ to add a new block, then search for WPForms with a ‘/‘
- Select the WPForms block and choose your contact form from the dropdown menu.
- Here we have selected our contact form that we created.
- You can customise the block additionaly. On the left side you will find ‘Block‘ where you can choose to ‘show title‘ of the contact form, ‘show description’ etc.
- Once you are done with this, click on > save. When you publish the page you will have your contact form visible on the page.
Note: Testing your contact form is crucial to ensure it’s working as expected. Submit a message through the form to check if you receive the notification email and that your confirmation message etc appears as expected.
How to Add a Contact Form Widget to Your Sidebar
If you prefer your contact form to be available in the sidebar, adding it as a widget is a great choice. This approach keeps the form visible on every page that includes a sidebar, allowing visitors to reach out from anywhere on your site without navigating to a separate contact page. To add a Contact form from widget to your sidebar, you can follow these steps-
- From your dashboard navigate to > Appearance > Widgets.
- Here, you’ll see different areas where you can place widgets, including the sidebar. In the Widgets section, click > ‘+’ icon.
- Search for WPForms widget.
- Select the Contact form you want to add from the dropdown menu and it will be displayed. On clicking the contact form widget, on the right side, you can also do some additional settings like choose to show title , description etc
- Once everything is set up, click > Update to apply changes. Visit your website to confirm that the contact form appears in the sidebar as expected.
Additional Tips for an Effective Contact Form
- Keep your contact form short. Limit your form fields to keep it user-friendly.
- Enabling reCAPTCHA protects your form from spam and can be set up under WPForms > Settings.
- Adding Custom Placeholder Text guides users with example text in the fields, making it clear what information is required.
Conclusion
Adding a contact form to your WordPress website with WPForms is an easy and efficient way to encourage visitor engagement. With this setup, you’re all set to provide a professional and user-friendly way for people to reach out in just a few minutes — for free! 🌟
Hope this article helped you and if you have any questions about , adding a Contact Form in WordPress feel free to share them in the comments section.
Also, Explore our JetixWP blog for more awesome and insightful articles like this one! 🌟
Happy website building! 🌟
Trending Posts
How to add Featured Videos to WooCommerce Products?
Adding Featured Videos to WooCommerce Products can display product features in a better way and enhance buying experience. Read More here.
How to add Featured Videos to WordPress?
A featured video serves as a preview to the content of a post or page. Read more on how to add featured video to wordpress in this blog.
How to Add Custom Fonts in WordPress
Fonts can significantly impact your website’s design and readability, learn how to add Custom Fonts in WordPress.
👋 We’re now JetixWP Plugins
There is a lot to say, but I’ll try to keep this one short here.
Continue reading…
Leave a Reply