Plugin: Contact Form 7
CF7
The Complete Tutorial on How to use Contact Form 7
Plan: CF7 Core Improve
-
Contact Form 7 CSS Boilerplate | IMWZ – Bespoke DevOps Work Contact Form 7 Styles for basic CSS styling of the form. Form is responsive and has nice rounded corners. For labels and placeholders you need to edit the form in CF7 https://imwz.io/contact-form-7-css-boilerplate/
-
Contact Form 7 CSS Example: How to Make Contact Form 7 Look Good - Peter Bateman
-
Inline validation in forms — designing the experience | by Mihael Konjević | WDstack | Medium
Improving CF7 Design
Floating Labels in Form Fields
Floating Placeholders, Peeky Placeholders
- How to do Contact Form 7 Floating Labels | Jason Somai
- Float Labels with CSS | CSS-Tricks - CSS-Tricks
- Styling a Focused Input’s Label | Auroratide
- Contact Form 7 (CF7) Floating Labels.
Misc Design Inspirations
Revolutionary Discovery: Effortlessly Insert Forms Without ID!
The solution to seamless form usage resilient to content migration, has been uncovered!
But how can we embed the form to be flexible to migration into new site where form ID is different? It turns out that if you have a form shortcode without “id” attribute it will search for the requested form by “title” attribute. And that’s it - so simple.
The source of discovery is this article: Embed contact form 7 in your custom theme
I must use shortcode and not block:
<!-- wp:shortcode -->
[contact-form-7 title="Get In Touch"]
<!-- /wp:shortcode -->
I believe it will function seamlessly with Polylang, although possible challenges may exist.
Code: Nicer design
-
Contact Form 7 CSS Example: How to Make Contact Form 7 Look Good - Peter Bateman
-
How to stop Contact Form 7 from loading on all pages - Peter Bateman
-
CF7 Boilerplate Tag: contact form 7 | WordPress Villain
Attaching files to email
Discover the simple process of attaching a file to an email, as outlined in this official guide: File uploading and attachment
Code: Proper Country Phone input in CF7
Wrapped two libraries and added a settings page in Contact > CPF Settings
. Settings are for all forms, and that by itself is not proper coding.
Using two separate libraries:
- Pure JavaScript plugin for entering and validating international telephone numbers jackocnr/intl-tel-input
- Country picker mrmarkfrench/country-select-js also based on
intl-tel-input
, using jQuery
Here are a couple of problematic decisions:
- Outdated libraries - for example,
intl-tel-input
is in version 12.4.0 from 2018, while the latest is v17.0.19 from 2022 - Using jQuery - even WordPress will move on and will probably very soon make jQuery obsolete
Resources for those libraries are taken from:
-
Updated list of world countries, in JSON, CSV, XML and YAML mledoze/countries
-
Updated collection of flags country in SVG / PNG fonttools/region-flags
-
stefangabos/world_countries Extensive constantly updated lists of world countries, country codes in multiple languages and with national flags
Demos:
Code: HTML5 Validation
Treba uključiti client proveru polja
-
cf7 “required” attribute - Google Search ako hoćeš da stilizuješ
-
How to use HTML 5 Form Validation on Contact Form 7 Plugin ?
-
contact form 7 remove span, wpcf7_autop_or_not, how to add required attribute in contact form 7, https://stackoverflow.com/questions/4113965/css-selector-for-text-input-fields
-
Styling Form Inputs in CSS With :required, :optional, :valid and invalid - Part 2 https://codepen.io/search/pens?q=form+error+message&order=relevance&cursor=ZD0xJm89MCZwPTI=
Code: Upload Progress Bar
Upload Progress Bar in Contact Form 7
File Upload with Progress Bar using Vanilla JavaScript in Laravel 9
-
https://www.educative.io/answers/how-to-add-a-progress-bar-to-your-file-upload-code-using-ajax
-
https://blog.logrocket.com/how-to-build-file-upload-service-vanilla-javascript/
Code: Offline Geolocation
Custom coded geolocation is not that complicated - How to display location of an user in a mail send
Contact Form & Salesforce Integration
Should work: Contact Form 7 Salesforce plugin or custom code
-
Contact Form 7 Multi-step Forms (Add-on for CF7) by AzMarket works amazing (the best of the bunch), but has limit on 2 pages, unlike the paid version.
-
Contact Form 7 Multi-Step by Rednumber has also limit on two pages, unlike paid version. Same author has a paid plugin for Conditional Logic.
-
Contact Form Seven CF7 Multi-Step Pro by NinjaTeam is only paid, as they discontinued their free version.
-
Contact Form 7 Multi-Step Forms by Webhead LLC. doesn’t work as AJAX but on multiple pages.
It has experimental support for Multi-page
https://shop.bdwm.be/contact-form-7-conditional-fields-pro/
There are some notable free alternatives:
- BuddyForms ima repo BuddyForms/BuddyForms, and little of documentation
Eightshift Forms je plugin infinum/eightshift-forms hrvatske firme Infinum je ustvari complete form builder plugin that utilizes modern Block editor features.
How to disable classic submit in CF7:
https://stackoverflow.com/questions/53760658/how-to-disable-submit-button-and-change-text-on-form-submit-at-wordpress-contac https://medium.com/@theonlydaleking/preventing-multi-submit-with-wordpress-cf7-contact-form-7-ef48e1e3372b
Block Editor Kit for Contact Form 7 Contact Form 7 – Gutenberg block before the official one
Important for CF7: Initial support for forms provided by Contact Form 7 when used with the official AMP plugin
Nije loš tool za CF7: Contact form 7 Layout Builder I solidan tekst o CF7 The Complete Guide to Styling Contact Form 7 Plugin for WordPress - Crocoblock
Style Contact Form 7 WordPress Plugin - Pine ima vrlo lep default styling i bolji od oficijelnog