Here is the Best Light weight Contact Form Plugin that does not add any render blocking css and .js I use on my site to get 100% page insights scores.
Contact form 7 slows all websites, it adds its own css and .js files that load on every page even though there is only page that has the contact form. Well with other tweaks, you can optimize contact form and only load it on pages that have contact form for example on CONTACT US page, but that is a long a process and you may end up breaking your site if you are not an advanced user.
Well guess what? I have found an alternative plugin that does not add any js or css that result in slow websites and render blocking.
What is Lightweight Contact Form?
This is a plugin by Isabel Castilo called Lightweight Contact Form.
This is the genuinely lightest WordPress contact type. This plugin is specifically designed for the fastest page speed. So, there is no stylesheet for CSS, no additional directories, no overhead. And no spam on that. It uses Google reCAPTCHA v3 to keep your contact form spam-free while not bothering your users with any extra move.
If all you need is a simple contact form for taking messages from visitors to the site, and pace of the page is your priority, this minimal plugin is for you.
While this type is lightweight and simple, it blocks SPAM, and has validity on both the client and the server. This is a strong and secure method of touch.
Features of Lightweight Contact Form
- Emails are sent directly to the admin email which is set in your WordPress General Settings.
- You can Add the contact form to any page with a shortcode.
- It uses Both JavaScript client-side and PHP server-side validation.
- It’s just one file. No extra CSS or JavaScript files. This is for the most lightweight footprint.
Installation of Lightweight Contact Form
You can search for Lightweight Contact Form in add new plugin page in your WP dashboard and install, or you can download the plugin from the link above and upload it and install.
Then add this short code to any page you want to add the form
[lcf_contact_form]As for me I did not add the Google reCAPTCHA keys because I do not receive any spams,
After you add the contact form, you will notice that your form is not styled or rather looking like it is plain html, well add the code below by clicking on APPEARANCE=CUSTOMIZE=ADDITIONAL CSS
#lcf-contactform .lcf_contactform_error,#lcf-contactform input.error,#lcf-contactform textarea.error{border:1px solid #D8000C}
#lcf-contactform label.error,p.lcf-error{display:block;color:#D8000C;background:#ffd2d2;padding:0 10px;height:auto;width: auto;}
.lcf-success-msg {color: #4F8A10;background-color: #DFF2BF;padding:10px}
#lcf-contactform label {float: left;clear: left;width: 75px;margin-top: 8px;}
#lcf-contactform label[for=lcf_message] {width: auto}
#lcf-contactform input[type="text"] {float: left;width: auto;margin-bottom: 24px;}
input#lcf_contact {margin-top:24px;}
