WPForms Tutorial & Review 2020 | Best WordPress Form

The best WordPress forms plugin is WPForms. In my beginner WPForms tutorial, learn to use both the free and basic paid versions.

To download the plugin of buy a subscription with a discount, go to WPForms.

I love how easy it is to create responsive mobile-friendly forms, multi-step forms and conditional logic. In this beginners WPForms review & tutorial I show you how to style WPForms beyond the standard templates so it matches your branding.

As you see in the video, this can be done both WITH & WITHOUT CCS and I also show you what to do if it’s not sending email. ‘WPForms contact form not sending email’ is a common complaint but it’s such an easy fix thanks to the plugin I show you – you can get it here: WP Mail SMTP

If you don’t know how / don’t want to code then try out CSS Hero.

Here’s the code I use in the video (make sure to backup your site before making any changes, and although this code works for me, for legal reasons I cannot guarantee it will work for you and cannot accept any liability for it causing any issues; it is your sole responsibility to code correctly)!

CSS Classes

wpf-center
wpforms-one-half wpforms-first wpf-center
wpforms-one-half wpf-center

CSS Code

.wpforms-container.wpf-center {
     margin: 0 auto !important;
     max-width: 500px;
}
.wpf-center .wpforms-head-container, 
.wpf-center .wpforms-submit-container {
     text-align: center; 
}
div.wpforms-container-full .wpforms-form input[type=submit], 
div.wpforms-container-full .wpforms-form button[type=submit] {
    background-color: #FF00D2;
    border: 1px solid #ddd;
    border-radius: 20px;
    color: #ffffff;
    font-size: 18px;
    padding: 10px 20px;
}
div.wpforms-container-full .wpforms-form input[type=submit]:hover, 
div.wpforms-container-full .wpforms-form input[type=submit]:active, 
div.wpforms-container-full .wpforms-form button[type=submit]:hover, 
div.wpforms-container-full .wpforms-form button[type=submit]:active, 
div.wpforms-container-full .wpforms-form .wpforms-page-button:hover, 
div.wpforms-container-full .wpforms-form .wpforms-page-button:active {
    background-color: #FF74E6;
    border: 1px solid #ccc; /* Lighter grey border */
}

If you would like to learn more about how to style WPForms using CSS then you can do so on their WPForms beginner’s guide to styling.

Lastly, if you would like to enter the competition while it is running then it is free to enter and you can do so subject to terms and conditions – make sure to watch the video above to see how to get the most entries.

Enter the WPForms Competition.

Subscribe:

Share:

Share on facebook
Share on twitter
Share on pinterest
Share on linkedin

Leave a Reply

Your email address will not be published. Required fields are marked *

On Key

Related Posts