Elementor Pro has a Form widget that you can use to create a wide range of form types. However, creating a form with this widget might is not as easy as it looks like especially if your website is hosted to a shared hosting service. When testing your form, you might see a “Server error. Form not sent” message like the following.
You will see the error message above if you set the button action to email (which means your form submissions will be sent to the specified email address). In this post, we will show you how to fix the error.
The Error Cause
There is a function called wp_mail in WordPress. Elementor uses this function to send emails. When you click the submit button on your form, your web hosting service takes the sent email, processes it, and sends it to the specified email address. Unfortunately, some web hosting providers disable the PHP function used to send emails.
The WordPress wp_mail function uses the PHP send_mail function by default. So, when this function is disabled by your hosting provider, WordPress unable to send emails.
How to Fix the Problem
There are two ways you can do to fix this problem. First, you can contact your web hosting provider and request to enable the PHP send_mail function. Alternatively, you can use an SMTP server.
In this post, we will show you how to fix this problem using the second method. No, you don’t need to install an SMTP server. We will use a plugin to add an SMTP feature to your WordPress. The plugin is Post SMTP and it’s completely free. This plugin allows you to use either an SMTP server of your own or SMTP server of services like Gmail, Mandrill, and SendGrid (via an API). We use Gmail in this case. You can use whether the free version of Gmail (gmail.com) or G Suite (Gmail with a custom domain).
- Get the Google app Client ID and Secret Key
Before installing and using the Post SMTP plugin, you need to create a Google app to get its Client ID and Secret Key. To do so, visit Google API Console and login with your Google account. Select a project from the dropdown menu on the top side.
If you have no project yet, create a new one by clicking NEW PROJECT.
Give your project a name and click the CREATE button.
Before getting the client ID and the Secret Key, you need to add your domain first. Make sure that your domain has been verified via Google Search Console (formerly Google Webmasters). Also make sure that you use the same Google account for the verified domain. To add your verified domain, click Domain verification on the left panel and click the Add Domain button.
Type your domain name (without http:// or https://) and click the ADD DOMAIN button. A little note, if you use “www” on your site, make sure to type it on the field.
Once your domain is added, click OAaut consent screen on the left panel, select the External option, and click the CREATE button.
Add Application name, select Support email and add Authorized domain. Then click on the Save button on the bottom.
Click Credentials on the left panel. Click the Create credentials button and select OAuth client ID.
A popup will appear, showing your client ID as well as client secret.
- Install Post SMTP plugin
To install the Post SMTP plugin, login to your WordPress dashboard and go to Plugins -> Add New. Type “POST SMTP” on the search box and click the Install Now button once you found it.
Activate the plugin immediately once installed. You will see a new menu item on your WordPress dashboard called Post SMTP. Click this menu item and select Post SMTP.
Click the Start the Wizard button.
Type the email address you use on your Elementor form and click the Next button.
On the next page, click the Next button.
Select the socket and authentication method. Since we use Gmail, we recommend you to choose the SMTP – gmail.com:587 and the OAuth 2.0 (requires Client ID and Client Secret) options. Click the Next button once you make your choice.
Enther the client ID as well as the client secret you have just created above and click the Next button.
Select a notification service to notify you when an email is failed to deliver and click the Next button.
On the next page, click the Finish button.
You need to grant permission to the Post SMTP plugin to send the email. To do so, click the Grant permission with Google link.
On the next step, you will be asked to select your Google account. After selecting your account, big chances are you will see the following error message. If so, click the Advanced link followed by Go to yourdomain.com (unsafe).
On the appearing popup, click the Allow button.
Perform a test by clicking the Send a Test Email link.
If you see a Success message like the following, then everything has gone well.
Return to the Elementor editor to edit your form. Open the Email option and make sure that you have entered the same email address as the one you used on Google API Console we have covered at length above. Click the UPDATE button.
Alternatives to Post SMTP
In our example, we use Post SMTP to configure the SMTP server in WordPress. If you don’t the find the plugin suit you, there are some alternatives you can use. You can read this article to learn more.
Here are five of the alternatives you can replace Post SMTP.
- WP Mail SMTP
- SMTP Mailer
- Gmail SMTP
- WP Mail Bank
- Easy WP SMTP
The Bottom Line
WordPress comes with a built-in mail delivery function called wp_mail. The function requires the send_mail function belongs to PHP to work. Unfortunately, not all web hosting providers enable the send_mail function. As a result, the wp_mail function of WordPress unable to work. You can configure an SMTP to replace the job of wp_mail function to handle the mail delivery on your WordPress system. In the context of Elementor, you can set the form action to other options like Collect Submissions or Webhook instead of Email.