How to Create a Custom Contact Form in WordPress Using WPForms Lite

Every professional website needs a reliable way for visitors to get in touch. Whether it’s for customer inquiries, support requests, or partnership opportunities, a well-placed contact form is essential for facilitating communication. It not only makes it easy for users to reach you without revealing your direct email address (which can attract spam), but it also helps you gather specific information you need through structured fields.

In this comprehensive tutorial, we’ll walk you through the process of creating a custom contact form for your WordPress website using one of the most popular and user-friendly plugins: WPForms Lite. We’ll cover everything from installation and basic setup to form customization and embedding, ensuring you have a fully functional contact form by the end. WPForms Lite is the free version of the plugin, offering robust features for most basic contact form needs, making it an excellent choice for this guide.

Prerequisites: Before we begin, you’ll need:

• A self-hosted WordPress website.
• Administrator access to your WordPress dashboard.
• An active email address where you want to receive form submissions.

Let’s get started!

Step 1: Install and Activate the WPForms Lite Plugin

The first step is to get WPForms Lite installed on your WordPress site.

1. Log in to your WordPress Dashboard: Go to yourdomain.com/wp-admin and enter your credentials.
2. Navigate to Plugins: In the left-hand sidebar of your dashboard, hover over “Plugins” and click on “Add New.”
3. Search for WPForms: In the “Search plugins…” field on the top right, type “WPForms.”
4. Install the Plugin: Look for “WPForms – Drag & Drop Form Builder for WordPress” by WPForms. Click the “Install Now” button.

• Tip: Ensure you’re installing the correct plugin by checking the author name and the number of active installations (it usually has millions).

1. Activate the Plugin: Once installed, the “Install Now” button will change to “Activate.” Click “Activate.”

Upon activation, you’ll be redirected to a welcome screen for WPForms, indicating that the plugin is ready to use. You’ll also notice a new “WPForms” menu item in your WordPress dashboard sidebar.

Step 2: Create Your First Form

Now that WPForms Lite is installed, it’s time to build your contact form.

1. Go to WPForms: In your WordPress dashboard, click on “WPForms” in the left-hand sidebar, then click “Add New.”
2. Name Your Form: A new screen will appear asking you to “Name Your Form.” Give it a clear, descriptive name like “Website Contact Form” or “General Inquiry Form.” This name is for your internal reference only and won’t be visible to your website visitors.
3. Select a Template: WPForms offers several pre-built templates to get you started quickly. For a standard contact form, we recommend selecting the “Simple Contact Form” template. Click on it.

• Example: If you needed a newsletter signup, you’d pick that template. For now, “Simple Contact Form” is perfect.

1. Understand the Form Builder: The WPForms builder interface will now load. It’s divided into three main sections:

• Left Panel (Fields and Settings): This is where you’ll find available fields to add to your form (under “Add Fields”) and where you’ll configure form settings (under “Settings”).
• Right Panel (Form Preview): This displays a live preview of your form as you build it.
• Top Bar: Contains buttons to “Save” your form, “Embed” it, or “Go Back.”

The “Simple Contact Form” template automatically includes the most common fields: Name (First and Last), Email, and Message.

Step 3: Customize Your Form Fields

While the “Simple Contact Form” is a great start, you might want to add, remove, or modify fields to better suit your needs.

1. Adding New Fields:

• In the “Add Fields” section on the left, you’ll see various standard fields (e.g., Single Line Text, Paragraph Text, Dropdown, Checkboxes). WPForms Lite offers a good selection of these.
• To add a field, simply drag it from the left panel and drop it into your form preview on the right.
• Example: Let’s add a “Phone” number field. Drag “Single Line Text” from the “Standard Fields” section and drop it below the “Email” field in your form.

1. Editing Field Options:

• To customize any field, click on it directly in the form preview. The left panel will then switch to “Field Options” for that specific field.
• For our new “Single Line Text” field, you’d change its:
• Label: Change “Single Line Text” to “Phone Number.”
• Format (for Name field): For the Name field, you can choose “First Last” or “Simple.” “First Last” is usually preferred.
• Description: (Optional) Add a brief explanation for the user.
• Required: Toggle this on if you want to make the field mandatory before submission. Click the toggle to turn it blue for “Required.”
• Placeholder Text: Text that appears inside the field before the user types anything (e.g., “Enter your phone number”).
• CSS Classes: (Advanced) For custom styling.
• Tip: Always make sure essential fields like Name, Email, and Message are marked as “Required” to ensure you get the necessary information.

1. Rearranging Fields:

• You can easily reorder fields by dragging and dropping them into your desired position in the form preview.
• Example: If you want “Phone Number” to appear above “Email,” simply click and drag it upwards.

1. Deleting Fields:

• To remove a field, click on it in the form preview, and then click the red trash can icon that appears in the “Field Options” panel. Confirm the deletion.
• Example: If you only need a single “Name” field instead of “First Last,” you could delete the existing Name field and add a “Single Line Text” field instead, labeling it just “Name.”

Once you’re satisfied with your form fields, click the “Save” button at the top right of the builder.

Step 4: Configure Form Settings

After setting up your fields, you need to configure how your form behaves, what happens after submission, and where notifications are sent. Click on “Settings” in the left panel of the form builder.

1. General Settings:

• Form Name: This is the internal name you gave the form (you can change it here).
• Form Description: (Optional) An internal description for your reference.
• Submit Button Text: The text displayed on the button that users click to submit the form (e.g., “Send Message,” “Submit Inquiry”).
• Submit Button Processing Text: Text shown while the form is being submitted (e.g., “Sending…”).
• CSS Classes: (Advanced) For custom styling.
• Enable anti-spam honeypot: (Recommended) This adds a hidden field that helps block spam bots without bothering real users. Turn this on.

1. Notifications:

This is critical for ensuring you receive an email when someone submits your form.

• Send To Email Address: This is where the submission email will be sent. By default, it’s set to ZEALTERCODE0, which is the email address configured in your WordPress General Settings. You can keep this or enter a different email address (e.g., [email protected]).
• Tip: If you want multiple people to receive notifications, separate their email addresses with a comma (e.g., ZEALTERCODE0).
• Email Subject: The subject line of the email you receive (e.g., “New Entry from Your Website Contact Form”). You can use “Smart Tags” here, like ZEALTERCODE0 for the name field, to personalize the subject with the submitter’s name.
• From Name: The name that appears as the sender of the notification email (e.g., “Your Website Name”).
• From Email: The email address that appears as the sender of the notification email. It’s often best to use an email address associated with your website (e.g., ZEALTERCODE0 or ZEALTERCODE1). Using a generic Gmail address here might cause issues with email delivery.
• Reply-To: This is important! Set this to ZEALTERCODE0 (or whatever the field ID for your Email field is). This allows you to directly reply to the user who submitted the form by simply hitting “Reply” in your email client.
• Message: This is the content of the email you receive. The default ZEALTERCODE0 Smart Tag is usually sufficient, as it includes all submitted form data. You can customize this if you want.
• Enable User Notification (Optional): If you want to send a confirmation email to the person who filled out the form, you can enable an additional notification. This is good practice for confirmation and reassurance. You’d set the “Send To Email Address” to the Email field’s Smart Tag (ZEALTERCODE0), and customize the subject and message appropriately.

1. Confirmations:

This defines what users see immediately after they successfully submit your form.

• Confirmation Type:
• Message (default): Displays a simple message on the same page after submission (e.g., “Thanks for contacting us! We will be in touch shortly.”). You can customize this message.
• Show Page: Redirects the user to a specific page on your website after submission. This is useful for a custom “Thank You” page where you might provide additional information or a call to action. You’d select the page from a dropdown.
• Go to URL (Redirect): Redirects the user to any specific URL, even an external one.
• For a simple contact form, the default “Message” confirmation is usually fine.

After configuring your settings, remember to click the “Save” button at the top right.

Step 5: Embed Your Form on a Page or Post

Your form is built and configured; now it’s time to make it visible on your website. You can embed your form in a page, a post, or even a sidebar widget.

1. Go to the “Embed” Button: In the WPForms builder, click the “Embed” button at the top right.
2. Choose an Embedding Option: WPForms will give you a couple of options:

• Create a New Page: The easiest method. WPForms will automatically create a new page and add your form to it. You’ll just need to give the page a title.
• Select an Existing Page: If you already have a “Contact Us” page, you can choose this option and select it from the dropdown.
• Use a Shortcode: This is the most flexible option if you’re embedding in an existing post, widget, or using a classic editor.

Let’s assume you’re embedding it on a new page using the Gutenberg block editor (the default WordPress editor).

Embedding using the WPForms Block (Gutenberg Editor):

1. Navigate to Pages or Posts: In your WordPress dashboard, go to “Pages” > “Add New” (or edit an existing page).
2. Add the WPForms Block:

• Click the “+” (Add block) icon in the editor.
• Search for “WPForms” and select the WPForms block.

1. Select Your Form: In the WPForms block, you’ll see a dropdown menu labeled “Select a Form.” Choose the name of the form you just created (e.g., “Website Contact Form”).
2. Publish/Update: Publish the new page or update the existing one.

Embedding using a Shortcode (for Classic Editor or Widgets):

If you’re using the classic editor, or embedding in a widget area, you’ll use a shortcode.

1. Retrieve the Shortcode: When you click “Embed” in the WPForms builder and then “Use a Shortcode,” WPForms will display a shortcode like ZEALTERCODE0. Copy this entire shortcode.

• The ZEALTERCODE0 number will be unique to your form.
• ZEALTERCODE0 means the form’s title won’t be displayed automatically; you can change this to ZEALTERCODE1 if you want the title to show.

1. Embed in a Post/Page: Paste the shortcode directly into your post or page content. In the Gutenberg editor, you can use a “Shortcode” block.
2. Embed in a Widget:

• Go to “Appearance” > “Widgets” in your dashboard.
• Drag a “Shortcode” widget (or “Text” widget for older themes) to your desired sidebar or footer area.
• Paste your WPForms shortcode into the widget’s content area. Save the widget.

Step 6: Test Your Contact Form

Testing is crucial to ensure everything is working correctly.

1. View Your Page: Open a web browser (preferably in incognito or private browsing mode) and navigate to the page or post where you embedded your contact form.
2. Fill Out the Form: Act as a visitor. Fill in all the required fields with test data (e.g., Name: “Test User,” Email: “[email protected],” Message: “This is a test message.”).
3. Submit the Form: Click your “Submit” button.
4. Check Confirmation: Verify that you see the confirmation message or are redirected to your “Thank You” page as configured in Step 4.
5. Check Your Email: Log in to the email account you set as the “Send To Email Address” in your WPForms settings.

• Look for the Notification: You should receive an email with the subject line you configured (e.g., “New Entry from Your Website Contact Form”) and the content of your form submission.
• Check Spam/Junk Folder: If you don’t see it in your inbox, always check your spam or junk folder. Sometimes, initial form submission emails can be flagged.
• Verify Reply-To: Open the email and try to reply. Ensure that the “Reply To” address is correctly set to the email address you entered in the form.

If you received the email and everything looks correct, congratulations! Your custom contact form is live and fully functional.

Tips for Success:

• Reliable Email Delivery: Sometimes, WordPress email notifications can be unreliable because they use the default PHP ZEALTERCODE0 function, which hosting servers might block or flag as spam. For guaranteed email delivery, especially if you experience issues during testing, install a dedicated SMTP plugin like WP Mail SMTP. This plugin routes your emails through an external mail service (like your host’s SMTP, Gmail, SendGrid, etc.), drastically improving deliverability.
• Keep Forms Simple: While WPForms allows for complex forms, for a general contact form, keep it as simple and concise as possible. The more fields you ask for, the higher the chance of visitors abandoning the form.
• Spam Protection: While WPForms Lite includes a honeypot, for more robust spam protection, consider adding reCAPTCHA. The WPForms Pro version includes reCAPTCHA integration, or you can use a separate plugin like reCAPTCHA by BestWebSoft.
• A/B Test Your Forms: Over time, consider trying different field arrangements, submit button texts, or confirmation messages to see which versions yield better engagement and conversions.
• Regularly Check Submissions: Besides email notifications, WPForms also stores all form submissions within your WordPress dashboard under “WPForms” > “Entries.” It’s a good practice to check this section periodically, especially if you suspect email delivery issues.

By following these steps, you’ve successfully added a professional, user-friendly contact form to your WordPress website, opening up a clear line of communication with your audience.