How to add a Contact Form in WordPress

Priyadarshini

by Priyadarshini on November 15, 2024

Jetix

/

Blog

/

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.

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! 🚀

  • Go to your WordPress Dashboard and navigate to Plugins > Add New Plugin
WordPress Add New Plugin Dashboard
  • In the search bar, type WPForms. Find WPForms in the results, click Install Now.
WordPress Add New Plugin Search for WPForms
  • Once Installed, then Activate. After activation WPForms will appear in your dashboard.
WPForms plugin Activation

Now that WPForms is installed, you’re ready to create your first form.

  • From your dashboard, Go to WPForms > Add New.
Add new contact form in WPForms Configuration
  • 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.
Naming Contact Form
  • 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.
Selecting Contact Form 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.
customizing the fields setting in WPForms
  • For an example here we have drag and dropped the ‘Paragraph Text‘ in our Contact Form.
Addng Paragraph Text in Contact Forms
  • On Clicking > Field Options you can Customise the fields more.
Configuring Contact Form with Fiels options
  • 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.
Contact Form Comment Section
  • Once done, you can see the ‘Comment or Message’ field mandatory and click on > Save.
save Changes in Contact form

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
Enabling Contact Form 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.
Setting up notifications
  • Set a Email subject line that helps you identify incoming mails quickly, like “New Contact Form Submission- Name” or “New Entry: Contact Us”.
Setting up Email Subject Line in Contact Forms
  • 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.
Setting up Smart tags in contact form
  • 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.
additional notificaion configuration
  • 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.
Setting Up confirmations for Contact Form
  • Seelect the Confirmation type as > Message or Show Page or URL.
Setting Up confirmation message
  • 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.
Save changes in WP Forms
  • 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.
View Contat form in Dashboard

WPForms makes it easy to add your new contact form to any page or post.

  • From your dashboard, navigate to > Pages > All Pages.
WordPress All Pages  Dashboard
  • 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’.
WordPress dashboard selecting page to add contact form
  • In the editor, click on the ‘+ icon ‘ to add a new block, then search for WPForms with a ‘/
add contact form to wordpress website
  • Select the WPForms block and choose your contact form from the dropdown menu.
select the form from WP Forms
  • Here we have selected our contact form that we created.
select the form from WP Forms
  • 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.
Wordpress Block Settings
  • Once you are done with this, click on > save. When you publish the page you will have your contact form visible on the page.
Save Chages in Block editor

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.

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.
WordPress Dashboard Appearance settings
  • Here, you’ll see different areas where you can place widgets, including the sidebar. In the Widgets section, click > ‘+’ icon.
Add contact form to wordpress site sidebar
  • Search for WPForms widget.
Select contact form in widgets
  • 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
preview the contact form
  • 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.
Update changes
  • 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.

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! 🌟

Leave a Reply

Your email address will not be published. Required fields are marked *