WPForms is a popular plugin for WordPress that makes it easy to add forms to posts and pages, but it doesn’t let you override the form’s “submit” action. In fact, using the free version of WPForms doesn’t store the data at all, and with a paid plan, it stores the data in your WordPress installation’s MySQL database, so that you can view it both in the WP Admin Console and by querying your MySQL database directly.

In many cases though, you may want the data stored elsewhere, like a SQL Server database, if your backend is Microsoft-based. Or you may want your own code to do something specialized with the form data upon submission. You might want to send a confirmation email to the subscriber that goes beyond WPForms’ email notification functionality (like attaching a file to the email), or you might want to make an API request to your CRM system, like Salesforce.com.

Here is how you can work around the WPForms limitations to get your form to do exactly what you want.

While you can’t override where the form “submits,” you can use the URL Redirect feature to take over the form’s flow to do whatever you want. But first, if you want to customize how the form works and override what WPForms actually does, why use WPForms or another WordPress forms plugin at all? In my case, the reason is that I hate building forms, and really anything UI-related. I’m a great backend developer, but trying to get a form to be aesthetically pleasing, responsive, and having to validate form fields makes my skin crawl. I just want the form design part done for me, and that’s the value I get from using WPForms.

The basic steps we’ll implement to control the flow of form data will be:

1. Use the WPForms URL redirect feature to send the form data to a custom .NET controller.
2. The .NET controller will store the form data in SQL Server, do other data processing, and then redirect the user back to the form with a “thank you” message.
3. We’ll add custom JavaScript to the form so that when there are URL parameters present, the “thank you” message is displayed using a nice Bootstrap alert box.

Let’s get started. I’m not going to cover the basics of how to use WPForms to design and insert a form into your post, because that’s been covered a million times elsewhere. To keep things simple, let’s say your form is a basic email signup form.

1. Modify the form’s confirmation settings

Change the confirmation settings from the default “thank you” message to a URL Redirect. This will allow you to redirect the user to your .NET Controller after submitting the form. Now redirecting to the generic controller without the form values won’t do you any good, so you have to use this WPForms hack [link] to add the form’s values as URL parameters.

Notice that WPForms refers to the “{field_id=”1″}” part as a Smart Tag. It is nothing more than a variable, or a placeholder. Why they’re inventing their own language, calling it a “Smart Tag,” is probably some slick marketing move, but there’s nothing smart about this “tag.”

When the form is submitted, you want the user to be redirected to your controller, in this format:

https://www.yourwebsite.com/controller/[email protected]

which in the above example translates to:

https://www.gmass.co/gmass/[email protected]

2. Write the .NET Controller

Now we write our controller to store the data in SQL Server and do any other processing we want on the form data, like perhaps sending a notification email. Note that WPForms already has a email notification option, but perhaps you want more control over how that notification email is sent. There are some things you cannot do with the default WPForms email notification system:

1. You can’t include attachments in the email.
2. You can’t include embedded inline images.
3. You can’t send one email to the subscriber and a different email to the admin.

Here’s the code from my simple Controller that handles the form data.

 
        public ActionResult MobileHandler(string email)
        {

            //save in database
            using (var db = new GmassDBEntities())
            {

                db.mobilesignups.Add(new mobilesignup
                {
                    emailaddress = email,
                    useragent = Request.UserAgent.Truncate(500),
                    insertedon = DateTime.UtcNow
                }
                );

                db.SaveChanges();
            }

            //send email. this uses a custom email function that routes the email via Gmail, but normally you would just use an SMTP service
            var template = Gmass.Controllers.GmassController.GetGmailDraftIntoMimeKit("[email protected]", "r4325624252226116662");
            SmtpHelper.SendTextEmail("[email protected]", email, template.Subject, template.HtmlBody, "[email protected]", true);

            //redirect the user back to the page with the form, with a URL parameter added so I know the form has been successfully submitted
            return Redirect($"/mobile?email={email}");

        }
 

At the end of your controller, redirect the user back to the form.

3. Add JavaScript to the form page to say “thank you.”

Ultimately, you want your user to end up back on a page that confirms that the form submission worked, or just thanks them. You could create a separate .NET view, or build a custom page for this, but I find the best form flows are where I end up back on the form with a thank you message, so that I can submit the form again if I want.

My controller above redirects the user back to the form at gmass.co/gmass/[email protected]

I want to make it so that the page displays a nice confirmation message if the URL parameter “email” is present, because that’s how I know the form was just submitted successfully.

Using JavaScript, this is easy, but it might not be obvious how to add JavaScript to an individual WordPress page/post. You might think, as I did, that you can just add some JavaScript to the Text Source of a page, but that doesn’t work so well, because WP will add formatting and <p> tags to your code, breaking your JavaScript.

If you manually add JavaScript to the “text” view for a post/page in WordPress, it ends up being reformatted withtags when you publish, rendering the JavaScript broken.

I chose to use the Code Embed plugin. This makes adding JavaScript to an individual page easy.

The JavaScript simply looks for URL parameters, and if it finds one called “email,” then it sets the innerHTML of a DIV and makes it appear. Here’s the code:

//generic routine to get a parameter's value from the URL
function getUrlParameter(name) {
    name = name.replace(/[\[]/, '\\[').replace(/[\]]/, '\\]');
    var regex = new RegExp('[\\?&]' + name + '=([^&#]*)');
    var results = regex.exec(location.search);
    return results === null ? '' : decodeURIComponent(results[1].replace(/\+/g, ' '));
};

//if the email parameter is present in the URL, then display the confirmation message
if (getUrlParameter('email').includes('@')){
	document.getElementById("confirmation").innerHTML = "Now get to your desktop and check your email for that link.";
	document.getElementById("confirmation").style.display = "block";
}

Conclusion!

And that’s it. If you want to see a working example, go to https://www.gmass.co/mobile. I built this page as a landing page for mobile device users. The page works just as I’ve described above:

• This is a WordPress page with a WPForms form on it.
• I’m using the free version of WPForms.
• When you fill out the form, it’s handled by WPForms, and then redirects to gmass.co/gmass/mobilehandler, which is a .NET controller Action method.

The code for that controller Action method is above. You can do a “View Source” on gmass.co/mobile to see the JavaScript that displays the green confirmation message when the page is redirected by the controller.

Other ways?

I find the above technique the simplest way to control what happens to the form data when using WPForms, but there are other ways. If you upgrade WPForms so that it actually stores the data in your MySQL database, you could easily export the data out of MySQL into SQL Server or your CRM either manually, with code, or even Zapier. In the case of getting the data into SQL Server, Zapier has a specific zap for that , but it requires providing direct access to SQL Server, which you might not want to do. I tend to prefer Zapier-less solutions anyway. MySQL stores the form data in two tables, wp_wpforms_entries and wp_wpforms_entry_meta, as described in the WPForms docs.

Other ways to mix WordPress and .NET?

If you liked this article, check out my other article on combining a WordPress installation with a .NET website to create magic.

Ajay Goel

Ajay is the founder of GMass and has been developing email sending software for 20 years.