Contents<\/strong><\/p>\n\n\n\n WPForms is a reliable, simple, and optimized WordPress form plugin with over 3 million downloads. You can use it to create all sorts of forms, but, in this tutorial, I’ll only focus on creating a contact form using its free version.<\/p>\n\n\n\n Its actual name in the WordPress repository is “Contact Form by WPForms \u2013 Drag & Drop Form Builder for WordPress”. For obvious reasons, I’ll only use the short version. \ud83d\ude42<\/p>\n\n\n\n Install and activate the WPForms<\/a> plugin. If you need help, here’s how to install a plugin in WordPress using 4 different methods<\/a>.<\/p>\n\n\n\n After activating the plugin, you’ll be redirected to a “Welcome to WPForms” page, where you can click on the Create Your First Form<\/strong> button.<\/p>\n\n\n\n Or, you can go to WPForms<\/strong> > Add New<\/strong> from your dashboard’s menu. Both ways will send you to the same place, where you can start creating your contact form for WordPress.<\/p>\n\n\n\n Add a name for your contact form in the Form Name<\/strong> field, then select the Simple Contact Form<\/strong> template so you don’t have to start from scratch.<\/p>\n\n\n\n You’ll see a WordPress contact form that contains the following default fields:<\/p>\n\n\n\n If you’re ok with those, you can leave it like that and skip to step 5. Otherwise, check the next step to see how you can edit the contact form. <\/p>\n\n\n\n To edit the default fields or others that you might add, just hover over them with your mouse cursor and click them. Once you click them, a panel with options will appear on the left.<\/p>\n\n\n\n There, you can edit several things for that field, such as changing the Label or Format, making it required or not, and so on. <\/p>\n\n\n\n If you want to add more fields to your WordPress contact form, you need to have the Add Fields<\/strong> tab selected, then drag & drop what you want, where you want it. <\/p>\n\n\n\n As a quick example, let’s add a Privacy consent checkbox for the European Union’s GDPR law<\/a>. The users will have to check the box if they understand and agree that the information from the contact form will be collected in order to be contacted. <\/p>\n\n\n\n The GPDR law is very confusing, so I don’t know if such a checkbox is necessary, or if it’s only necessary in certain cases. Some add it, some don’t… I recommend doing some research yourself.<\/p>\n\n\n\n So, drag & drop a Checkbox<\/strong> field somewhere on your WordPress contact form. Normally, a checkbox like this is added right before the submit button.<\/p>\n\n\n\n By default, multiple checkboxes will appear with the label Checkboxes<\/strong>. We’ll have to do some modifications.<\/p>\n\n\n\n So:<\/p>\n\n\n\n The result will be something like this:<\/p>\n\n\n\n As you can see in my description, I also added a link to the Privacy Policy page. That’s possible because WPForms accepts HTML on some labels and text areas.<\/p>\n\n\n\n To add a link, add this HTML code, but add your own<\/strong> page slug (e.g. or <\/p>\n\n\n\n Looking to Buy or Sell WordPress Sites?<\/p>\n\n\n\n At ReadyShip, we offer an all-in-one WordPress solution for those looking to start a blog or site, as well as the opportunity for WordPress developers or professionals to sell their products!<\/p>\n\n\n\n Once you’re done editing the WordPress contact form, go to the Settings<\/strong> > Notifications<\/strong> section. The important part here is to make sure that you have the correct email address where the WPForms plugin will send the messages to.<\/p>\n\n\n\n By default, the Send To Email Address<\/strong> field will be set to Editing the General settings is one of the most important things to do after installing WordPress<\/a>. Make sure you go through them.<\/p>\n\n\n\n So, if you’re ok with that email address receiving the contact form messages, leave it as is in the WPForms Notifications settings. Otherwise, remove it and add the one that you want (e.g. You can also add multiple email addresses separated by a comma if you want the messages to be sent to more than one email address.<\/p>\n\n\n\n If you’re not<\/span> using an SMTP (more details in the next section), you can leave the From Email<\/strong> field set to In any case, the email address in the From Email<\/strong> field should be based on your domain (e.g. Don’t confuse the From Email<\/strong> field with the sender’s email address, as in the user who fills out the form. The user is sending the message from your site, from the contact form. So, WordPress is sending you the email with the message first. Then, when you’ll reply from your webmail tool (e.g. Gmail), it will reply to the email address added by the user in the Email field.<\/p>\n\n\n\n Once you’re done creating the contact form for WordPress, click on the big Save<\/strong> button in the top-right.<\/p>\n\n\n\n Now, let’s see how to add the contact form in WordPress. The way to add depends on what you’re using to build the page. I’ll show you how to do it based on the most common methods.<\/p>\n\n\n\n If you’ve created the page using the default Gutenberg editor, then all you have to do is to:<\/p>\n\n\n\n Now, choose the name of the contact form that you want to add to your WordPress page. I simply named it Contact Form.<\/p>\n\n\n\n Publish\/Update\/Preview the page, and you should see it there. You can also see a preview inside Gutenberg, but it will most likely look a bit different than on the actual page.<\/p>\n\n\n\n To add the WPForms contact form in Elementor, you have to:<\/p>\n\n\n\n Then, select the name of the contact form that you want to add to the WordPress page. I simply named it Contact Form.<\/p>\n\n\n\n A lot of WordPress users still hate Gutenberg, so they’re using the Classic Editor. If you’re one of them, then here’s what you need to do to add a contact form.<\/p>\n\n\n\n Edit the page and click on the Add Form<\/strong> button found above the editor.<\/p>\n\n\n\n Select the contact form that you want, in case you have more than one, then click on the Add Form <\/strong>button.<\/p>\n\n\n\n If you’re using some method or tool where you can’t simply select a contact form created with WPForms, then you’ll have to use a shortcode to display it.<\/p>\n\n\n\n To get the shortcode, go to WPForms<\/strong> > All Forms<\/strong> from your dashboard’s menu. There, from the table, copy the shortcode for the contact form that you want to add in WordPress.<\/p>\n\n\n\n Now, depending on what you’re using to build the page, paste the shortcode somewhere in that tool.<\/p>\n\n\n\n Once the setup is done, all that remains is to test the contact form. So, go to the WordPress page where you added it, such as the Contact page, insert the info in the fields, and click the submit button. <\/p>\n\n\n\n Then, check your email to see if the message was sent successfully.<\/p>\n\n\n\n In some cases, you might not receive emails, or they end up in the Spam folder. That most likely means you’ll need an SMTP service.<\/p>\n\n\n\n The WPForms plugin relies on WordPress to send emails. And, by default, WordPress relies on the PHP So, in those cases, you’ll need to get an SMTP (Simple Mail Transfer Protocol)<\/a> service, such as SendGrid<\/a>, Mailgun<\/a>, Elastic Email<\/a>, etc. SendGrid has a free plan, so you might one to use that, especially if you’re new to this.<\/p>\n\n\n\n Then, you need to set it up in WordPress. But don’t worry! I’ve written a step-by-step tutorial on how to configure SMTP in WordPress with the \u201cWP Mail SMTP\u201d plugin<\/a>, which is a plugin created by the WPForms developers. So, you’ll also have maximum compatibility between the two plugins.<\/p>\n\n\n\n I always recommend getting an SMTP service and not relying on WordPress’ default mailing system unless you rarely receive emails, and they’re not vital for your business.<\/p>\n\n\n\n Looking for an All-in-One WordPress Solution?<\/strong><\/p>\n\n\n\n ReadyShip offers you ready-made WordPress sites and blogs, plus high-quality managed AWS hosting with free SSL and CDN, at no initial cost!<\/strong><\/p>\n\n\n\nAdd a Contact Form in WordPress Using the WPForms Plugin<\/h2>\n\n\n\n
![\"wpforms](\"https:\/\/readyship.co\/blog\/wp-content\/uploads\/2020\/11\/wpforms-plugin.png\")
<\/figure><\/div>\n\n\n\nStep 1<\/h3>\n\n\n\n
Step 2<\/h3>\n\n\n\n
![\"create](\"https:\/\/readyship.co\/blog\/wp-content\/uploads\/2020\/11\/create-first-form.png\")
<\/figure><\/div>\n\n\n\n![\"add](\"https:\/\/readyship.co\/blog\/wp-content\/uploads\/2020\/11\/wpforms-add-new.png\")
<\/figure><\/div>\n\n\n\nStep 3<\/h3>\n\n\n\n
![\"simple](\"https:\/\/readyship.co\/blog\/wp-content\/uploads\/2020\/11\/simple-contact-form-template.png\")
<\/figure><\/div>\n\n\n\n![\"editing](\"https:\/\/readyship.co\/blog\/wp-content\/uploads\/2020\/11\/editing-contact-form.png\")
<\/figure><\/div>\n\n\n\nStep 4 (Optional – if you want to edit the default template)<\/h3>\n\n\n\n
![\"editing](\"https:\/\/readyship.co\/blog\/wp-content\/uploads\/2020\/11\/editing-field-contact-form.png\")
<\/figure><\/div>\n\n\n\n![\"checkboxes](\"https:\/\/readyship.co\/blog\/wp-content\/uploads\/2020\/11\/default-checkboxes.png\")
![\"adding](\"https:\/\/readyship.co\/blog\/wp-content\/uploads\/2020\/11\/editing-checkbox-wpforms.png\")
<\/figure><\/div>\n\n\n\n\/privacy\/<\/code>) or full link (e.g. https:\/\/example.com\/privacy\/<\/code>) between the quotes of the href<\/code> attribute.<\/p>\n\n\n\n<a href=\"\/policy\/\">Privacy Policy<\/a><\/code><\/pre>\n\n\n\n<a href=\"https:\/\/example.com\/privacy-policy\/\">Privacy Policy<\/a><\/code><\/pre>\n\n\n\nStep 5<\/h3>\n\n\n\n
![\"wpforms](\"https:\/\/readyship.co\/blog\/wp-content\/uploads\/2020\/11\/send-to-email-address.png\")
<\/figure><\/div>\n\n\n\n{admin_email}<\/code>. This means that it will use the email address added in WordPress, in Settings<\/strong> > General<\/strong>.<\/p>\n\n\n\n![\"wordpress](\"https:\/\/readyship.co\/blog\/wp-content\/uploads\/2020\/11\/wordpress-administration-email-1.png\")
<\/figure><\/div>\n\n\n\njohndoe@example.com<\/code> or johndoe@gmail.com<\/code>).<\/p>\n\n\n\n![\"send](\"https:\/\/readyship.co\/blog\/wp-content\/uploads\/2020\/11\/send-to-email-address-custom.png\")
<\/figure><\/div>\n\n\n\n![\"multiple](\"https:\/\/readyship.co\/blog\/wp-content\/uploads\/2020\/11\/multiple-email-addresses.png\")
<\/figure><\/div>\n\n\n\n{admin_email}<\/code>. If you’re using an SMTP, you should add the email address that you used to set it up; otherwise, the emails might not be sent.<\/p>\n\n\n\n![\"from](\"https:\/\/readyship.co\/blog\/wp-content\/uploads\/2020\/12\/from-email-wpforms.png\")
<\/figure><\/div>\n\n\n\n@example.com<\/code>), even if the email address doesn’t actually exist. If it’s from a standard email (e.g. @gmail.com<\/code>), it will affect the deliverability, meaning that the emails will most likely end up in the Spam folder.<\/p>\n\n\n\nStep 6<\/h3>\n\n\n\n
Using Gutenberg<\/h4>\n\n\n\n
![\"searching](\"https:\/\/readyship.co\/blog\/wp-content\/uploads\/2020\/11\/wpforms-block.png\")
<\/figure><\/div>\n\n\n\n![\"select](\"https:\/\/readyship.co\/blog\/wp-content\/uploads\/2020\/12\/select-contact-form.png\")
<\/figure><\/div>\n\n\n\n![\"wpforms](\"https:\/\/readyship.co\/blog\/wp-content\/uploads\/2020\/11\/preview-wpforms-gutenberg.png\")
<\/figure><\/div>\n\n\n\nUsing Elementor<\/h4>\n\n\n\n
![\"add](\"https:\/\/readyship.co\/blog\/wp-content\/uploads\/2020\/11\/add-wpforms-elementor-1.png\")
<\/figure><\/div>\n\n\n\n![\"select](\"https:\/\/readyship.co\/blog\/wp-content\/uploads\/2020\/11\/select-contact-form-elementor.png\")
<\/figure><\/div>\n\n\n\nUsing the Classic Editor<\/h4>\n\n\n\n
![\"add](\"https:\/\/readyship.co\/blog\/wp-content\/uploads\/2020\/11\/add-contact-form-classic-editor.png\")
<\/figure><\/div>\n\n\n\n![\"select](\"https:\/\/readyship.co\/blog\/wp-content\/uploads\/2020\/11\/select-contact-form-classic-editor.png\")
<\/figure><\/div>\n\n\n\nUsing page builders or methods that require shortcodes<\/h4>\n\n\n\n
![\"copy](\"https:\/\/readyship.co\/blog\/wp-content\/uploads\/2020\/11\/shortcode-wpforms.png\")
<\/figure><\/div>\n\n\n\nStep 7<\/h3>\n\n\n\n
![\"testing](\"https:\/\/readyship.co\/blog\/wp-content\/uploads\/2020\/11\/email-received-wpforms.png\")
Use SMTP if the Contact Form Doesn’t Send Emails, or Emails End Up in Spam<\/h2>\n\n\n\n
mail()<\/code> function to send emails. I know, that’s too techy, but you don’t need to know what it is or how it works. All you need to know is that:<\/p>\n\n\n\nmail()<\/code> function might not work properly or at all;<\/li>