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 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 SMTP 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 https:// 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.
On the Application type section, select Web application. Enter your domain on the Authorized JavaScript origins and the redirect page (https://www.yourdomain.com/wp-admin/options-general.php?page=postman) on the Authorized redirect URls section and click the Create button.
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.
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.
5 thoughts on “How to Fix “Server error. Form not sent” When Creating a Form in Elementor”
I am having a heck of a time fixing this error with GoDaddy. I’ve spent hours with GoDaddy support and Elementor support. Currently I’m using the WP SMTP plugin (with help from GoDaddy on the settings which took some trial and error). All emails are being sent successfully but I still get “Server error. Form not sent” – and the form redirect does not work. Any pointers?
SAME HERE! I have GoDaddy as well. Was this ever resolved for you? If so, how? Thank you!
Didn’t work for me, still getting the ‘server error’ message 🙁
from email id and reply to email id should be same. this error is because reply to email id is different.
This solved it for me! I cannot believe I tried eveything, only for it to be such a menial issue!!!!! Thanks a lot