Joe Dolson

<h4>How to use this plug-in:</h4>
If you install and activate this plug-in before installing Contact Form 7, the default form created by Contact Form 7 will be accessible. If you’ve already installed Contact Form 7, you’ll want to delete the default form and create new forms using the templates available in this plug-in.
<h4>Use Contact Form 7 with an accessible default form</h4>
This plug-in replaces the default template that Contact Form 7 automatically generates with an accessible equivalent of that form and adds a suite of additional basic form types that you can choose from to model your new forms.
The plug-in doesn’t change anything about forms that have already been built with Contact Form 7. The structure of Contact Form 7 is such that it isn’t possible for the plug-in to rewrite existing forms for improved accessibility, but it is possible to make sure that the base you have for starting a form is accessible.
Contact Form 7 is actually a very accessible plug-in. It has an accessible back-end, and if you create the right template, the front-end form will have great accessibility.
Since version 4.5, Contact Form 7 has included the label element; but the usage of them is limited, and isn’t the best possible method. This plug-in supplies a new default form that includes everything you need to make your default form accessible.
For more information about making Contact Form 7 accessible, read <a href="https://rianrietveld.com/2014/03/how-to-set-up-an-accessible-form-using-contact-form-7-in-wordpress/" rel="nofollow ugc">how to set up an accessible form using contact form 7</a>, by Rian Rietveld.

Contact Form 7: Accessible Defaults

Replaces the default Contact Form 7 form with an accessible equivalent and provides a suite of selectable base forms.

56 Degrees

Lazyload for Contact Form 7 is a lightweight WordPress plugin designed to improve your website’s performance by lazyloading Contact Form 7. This plugin delays the loading of contact forms until they are in the viewport, reducing initial load times and enhancing user experience.
Example code: 
 <code>[lazy-contact-form-7 id="ID form" title="Title form" root-margin="0px" no-observer="false"]</code>
<h4>root-margin=”0px”</h4>
root-margin=”0px” sets the size of the base margin, allowing the form to load sooner or later. Root-margin can be set in several ways: 
– root-margin supports units such as px and %. 
 – root-margin: 100px – the form will load 100 px before the specified element. 
 – root-margin: -100px – the form will load 100 px after the specified element. 
 – root-margin: 20px 50px 20px – the form will load with margins of 20px on top, 50px on the sides, and 20px on the bottom.
<h4>no-observer=”true”</h4>
no-observer=”true” Is a solution aimed at developers who want to have control over exactly when the form is loaded. Setting this option to true will prevent the form from loading automatically on the page, and you will need to manually change the data-fsdpcfl-src attribute to src using JavaScript.
To enable the loading animation, add the active class to the fsdpcfl-loader class.
If you have any questions, you can contact us via email. <a href="mailto:tech@56degrees.co.uk" title="tech@56degrees.co.uk" rel="nofollow ugc">tech@56degrees.co.uk</a>

Lazyload for Contact Form 7

Lazyload for Contact Form 7 is a lightweight WordPress plugin designed to improve your website's performance by lazyloading Contact Form 7.

Contact Form 7: Accessible Defaults vs Lazyload for Contact Form 7