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

In today’s digital landscape, a professional website is incomplete without an effective way for visitors to get in touch. Whether you’re running a small business, a personal blog, or an e-commerce store, a contact form serves as a crucial bridge between you and your audience. It not only streamlines communication but also projects an image of professionalism, helps deter spam, and ensures you capture essential inquiries directly into your inbox.

While simply listing your email address might seem convenient, it often leads to an influx of spam and makes it harder for users to provide specific information. A well-designed contact form, however, guides your users, ensures you receive all necessary details, and provides a more secure way for them to reach out.

In this comprehensive tutorial, we’ll walk you through the process of creating a custom contact form for your WordPress website using WPForms Lite. WPForms is a popular, user-friendly, and powerful drag-and-drop form builder that makes adding various types of forms to your site incredibly simple, even if you have no coding experience. The “Lite” version is free and offers robust features perfect for most basic contact needs.

By the end of this guide, you’ll have a fully functional contact form embedded on your WordPress site, ready to capture inquiries from your visitors.

Step 1: Install and Activate WPForms Lite

The first step is to get the WPForms Lite plugin installed on your WordPress website. This is a straightforward process familiar to anyone who has added plugins before.

1. Access Your WordPress Dashboard: Log in to your WordPress admin area. This is typically found by navigating to ZEALTERCODE0.
2. Navigate to Plugins: In the left-hand sidebar of your dashboard, hover over “Plugins” and click on “Add New.”
3. Search for WPForms: On the “Add Plugins” page, you’ll see a search bar on the right-hand side. Type “WPForms” into this search bar and press Enter.
4. Install WPForms Lite: You’ll see a list of plugins matching your search. Look for “WPForms Lite – Drag & Drop Contact Form Builder for WordPress” by WPForms. Click the “Install Now” button next to it. WordPress will download and install the plugin for you.
5. Activate the Plugin: Once the installation is complete, the “Install Now” button will change to “Activate.” Click “Activate” to enable the plugin on your website.

Tip: After activation, WPForms might prompt you with a welcome screen or a setup wizard. While the wizard can be helpful, for the purpose of this tutorial, we’ll proceed with creating our form manually to give you a deeper understanding of the process. You can simply close or skip any initial wizard screens if they appear. You’ll now see a new menu item called “WPForms” in your WordPress dashboard sidebar.

Step 2: Create Your First Form

With WPForms Lite activated, you’re ready to build your contact form. WPForms offers various pre-built templates to get you started quickly, which we’ll leverage here.

1. Access the Form Builder: In your WordPress dashboard, click on “WPForms” in the left sidebar, then select “Add New.” This will open the WPForms builder interface.
2. Name Your Form: At the top of the form builder, you’ll see a field 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 and won’t be visible to your website visitors.
3. Choose a Template: Below the name field, WPForms presents several “Select a Template” options. For a standard contact form, the “Simple Contact Form” template is perfect. Click on it.

Example: When you select “Simple Contact Form,” WPForms will automatically pre-populate your form with basic fields like Name, Email, and Message. This gives you a great starting point, saving you time.

Tip: While there are other templates like “Newsletter Signup Form” or “Suggestion Form,” stick to “Simple Contact Form” for now. You can explore these other options once you’re comfortable with the basics.

Step 3: Customize Your Form Fields

Now that you have a basic form, it’s time to tailor it to your specific needs. The WPForms builder is a drag-and-drop interface, making it incredibly intuitive to add, remove, and reorder fields.

On the left side of the builder, you’ll see “Standard Fields” and “Fancy Fields” (some of which are exclusive to the Pro version). On the right is a live preview of your form.

1. Adding New Fields:

• To add a field, simply click on it from the “Standard Fields” list, or drag it from the left panel and drop it onto your form preview on the right.
• Common fields to consider adding:
• Dropdown: For options like “How did you hear about us?”
• Multiple Choice: For “What is your primary interest?”
• Phone: If you need to collect phone numbers (ensure you make it optional unless absolutely essential).
• Single Line Text: For a specific subject line.
• Paragraph Text: If you need an additional, longer text area.

Example: Let’s add a “Subject” field.

• From “Standard Fields,” drag “Single Line Text” and drop it between the “Email” and “Message” fields.
• Click on the newly added “Single Line Text” field in the preview to open its Field Options.
• Change the “Label” to “Subject.”
• Check the “Required” box if you want users to always fill this out.

1. Editing Existing Fields:

• To modify any field (including the ones from the template), simply click on it in the form preview. The “Field Options” panel will appear on the left.
• Label: Change the text that appears above the field (e.g., change “Name” to “Your Full Name”).
• Format (for Name field): For the Name field, you can choose “Simple” (one input field) or “First Last” (two separate input fields). “First Last” often looks more professional.
• Description: Add a small helper text below the field (e.g., “Please provide your best contact email address”).
• Required: Check this box if you want to make the field mandatory for submission. Users won’t be able to submit the form without filling out required fields.
• Placeholder Text: (Available in Pro version for some fields) This text appears inside the input field before the user types anything.
• CSS Classes: (Advanced) For custom styling.

Example: Let’s make the “Message” field required.

• Click on the “Message” field in the form preview.
• In the Field Options on the left, check the box next to “Required.”

1. Reordering Fields:

• To change the order of fields, simply click and hold a field in the form preview, then drag it to its new position. A blue line will indicate where it will be placed.

1. Deleting Fields:

• To remove a field you don’t need, hover over it in the form preview. A small trash can icon will appear in the top right corner of the field. Click it to delete the field.

Tip: Always aim for simplicity. Only ask for information that is absolutely necessary. The more fields a form has, the higher the chance users will abandon it. Keep your form concise to encourage completion. For a contact form, Name, Email, Subject, and Message are often sufficient.

Step 4: Configure Your Form Settings

Once your fields are set up, it’s crucial to configure the form’s backend settings. This includes how the form behaves, what messages users see, and where submissions are sent.

In the form builder, switch from the “Fields” tab to the “Settings” tab on the left sidebar.

4.1. General Settings

• Form Name: You already set this in Step 2, but you can change it here if needed.
• Form Description: Add an optional description for internal use.
• Submit Button Text: This is the text displayed on the button users click to submit the form. Change it from the default “Submit” to something more actionable like “Send Message,” “Get in Touch,” or “Send Inquiry.”
• Submit Button Processing Text: The text shown while the form is being submitted (e.g., “Sending…”).
• Spam Protection: This is vital.
• Enable anti-spam honeypot: This is a simple, invisible field that catches bots without bothering human users. It’s highly recommended and effective for most basic spam. Check this box.
• (Optional) Enable Google reCAPTCHA: If you need more robust protection, you can integrate Google reCAPTCHA. This requires some initial setup with Google, but WPForms makes it relatively easy. For WPForms Lite, the honeypot is often sufficient.

4.2. Notifications

This is where you tell WPForms where to send the form submissions. By default, it sends to your WordPress admin email address.

• Send To Email Address:
• The default is ZEALTERCODE0, which sends to the email address set in Settings > General in your WordPress dashboard.
• If you want submissions to go to a different email (e.g., ZEALTERCODE0 or ZEALTERCODE1), replace ZEALTERCODE2 with the desired email address. You can also enter multiple email addresses, separated by commas, if you want several people to receive notifications.
• Email Subject: This is the subject line of the email you’ll receive. Change it to something clear like “New Contact Form Submission from [Your Site Name]” or “Website Inquiry from {{formname}}”. The ZEALTERCODE_0 smart tag will automatically insert the name of your form.
• From Name: This is the name that appears as the sender of the notification email. Change it to your website’s name or company name (e.g., “Your Company Website”).
• From Email: This is crucial for email deliverability. Ideally, this should be an email address associated with your domain (e.g., ZEALTERCODE0). Using a generic email like ZEALTERCODE1 can sometimes cause emails to be marked as spam.
• Reply-To: By default, this is set to ZEALTERCODE0 (which is typically the user’s email field). This allows you to simply hit “Reply” in your email client to respond directly to the person who filled out the form. Leave this as is.
• Message: This field uses smart tags to pull the submitted data. The default ZEALTERCODE0 is usually fine, as it sends all submitted information in an organized format.

Tip: After setting up notifications, it’s essential to test them (see Step 6) to ensure emails are being sent and received correctly. Sometimes, server configurations can prevent emails from being delivered, so testing is crucial. Consider installing an SMTP plugin like WP Mail SMTP if you encounter deliverability issues.

4.3. Confirmations

This is the message your visitors will see immediately after they submit the form.

• Confirmation Type:
• Message (default): This displays a simple message on the same page. This is the most common and easiest option.
• Page: Redirects the user to a specific page on your site (e.g., a “Thank You” page). This is a Pro feature and requires a bit more setup.
• Go to URL (Redirect): Redirects the user to any custom URL (e.g., an external landing page). Also primarily a Pro feature.
• Confirmation Message: If you selected “Message,” customize the text here. Something like “Thank you for contacting us! We’ve received your message and will be in touch shortly.” is polite and informative.

Once you’ve configured all your settings, remember to click the “Save” button at the top right of the form builder.

Step 5: Embed Your Form on a Page or Post

Now that your form is complete, it’s time to display it on your website. WPForms makes embedding incredibly easy with multiple methods.

1. Save Your Form: Ensure you’ve clicked the “Save” button in the WPForms builder if you haven’t already. You can then click the “X” to close the builder.

1. Choose Your Embedding Method:

Method 1: Using the WPForms Block (Gutenberg Editor)

This is the recommended method for modern WordPress sites using the Block Editor.

• Navigate to Pages > Add New or Posts > Add New (or edit an existing page/post) in your WordPress dashboard. A dedicated “Contact Us” page is highly recommended.
• Inside the Block Editor, click the “+” (Add block) icon.
• Search for “WPForms” or scroll down to the “Widgets” section and select the “WPForms” block.
• Once the block is added, you’ll see a dropdown menu. Select the form you just created (e.g., “Website Contact Form”) from the list.
• The form will appear directly in your editor preview.
• Click “Publish” or “Update” to make your page live.

Method 2: Using the Shortcode Block (Gutenberg Editor or Classic Editor)

Every WPForms form has a unique shortcode. You can find this in two ways:

• From the form builder: After saving, click the “Embed” button at the top of the builder. A popup will appear with options; select “Use a Shortcode” and copy the provided shortcode (e.g., ZEALTERCODE0).
• From WPForms > All Forms: Go to WPForms > All Forms in your dashboard. You’ll see a list of all your forms, along with their respective shortcodes in the “Shortcode” column. Copy the shortcode for your new form.

Once you have the shortcode:

• Go to the page or post where you want to embed the form.
• If using the Block Editor, add a “Shortcode” block and paste your shortcode into it.
• If using the Classic Editor, simply paste the shortcode directly into the content area.
• Click “Publish” or “Update.”

Method 3: Using a Widget

You can also embed your form in a sidebar, footer, or any other widget-ready area of your theme.

• Go to Appearance > Widgets in your WordPress dashboard.
• Find the “WPForms” widget from the list of available widgets.
• Drag and drop the “WPForms” widget into your desired widget area (e.g., “Sidebar” or “Footer Area”).
• In the widget settings, select your form from the “Select a Form” dropdown.
• You can also add a title for your widget (e.g., “Contact Us”).
• Click “Update” or “Save” (depending on your theme’s widget interface).

Tip: For most websites, creating a dedicated “Contact Us” page and embedding your form there using the WPForms Block is the cleanest and most user-friendly approach. Ensure the page is easily accessible from your website’s main navigation menu.

Step 6: Test Your Form Thoroughly

This is a critical step that many people overlook! After all your hard work, you need to ensure your form is working perfectly from the user’s perspective and that you are receiving submissions correctly.

1. Visit Your Live Page: Go to the page on your website where you embedded the contact form.
2. Fill Out All Fields:

• Enter realistic test data for each field (e.g., “John Doe” for Name, ZEALTERCODE0 for Email, “Testing my new contact form” for Subject, and a detailed test message).
• Crucially, test both required and optional fields. Try submitting the form without filling out a required field to ensure the validation message appears.

1. Submit the Form: Click your customized submit button (e.g., “Send Message”).
2. Verify Confirmation:

• Check that the confirmation message you set in Step 4.3 appears correctly on the page.

1. Check Your Email:

• Open the email inbox you configured in Step 4.2.
• Look for the notification email with your customized subject line (e.g., “New Contact Form Submission from [Your Site Name]”).
• Crucially, check your spam or junk folder if you don’t see it in your primary inbox. If it landed in spam, you may need to adjust your email settings or consider an SMTP plugin.
• Open the email and verify that all the submitted information is accurately displayed.

1. Check WPForms Entries:

• Go back to your WordPress dashboard.
• Click on WPForms > Entries in the left sidebar.
• You should see your test submission listed there. Click on it to view the full entry details within your WordPress site. This acts as a backup of all your submissions, even if email delivery fails.

Tip: If you have multiple people responsible for inquiries, ask them to test the form as well. Different email providers or settings can sometimes affect deliverability.

Conclusion

Congratulations! You’ve successfully created and implemented a professional contact form on your WordPress website using WPForms Lite. This form is now ready to gather inquiries, feedback, and leads, providing a clear and efficient communication channel for your visitors.

Remember, a well-placed and easy-to-use contact form is an essential element of any professional website, enhancing user experience and fostering better engagement. Feel free to return to the WPForms builder to refine your form’s fields, messages, and settings as your needs evolve. WPForms offers many more advanced features in its paid versions, but the Lite version provides an incredibly solid foundation for effective communication.