Plugin: Contact Form 7

Plugin: Contact Form 7


The Complete Tutorial on How to use Contact Form 7

Plan: CF7 Core Improve

Improving CF7 Design

Floating Labels in Form Fields

Floating Placeholders, Peeky Placeholders

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

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:

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:


Code: HTML5 Validation

Treba uključiti client proveru polja

Code: Upload Progress Bar

Upload Progress Bar in Contact Form 7

File Upload with Progress Bar using Vanilla JavaScript in Laravel 9

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

date 15. Jul 2021 | modified 31. Jan 2023
filename: Plugins » Contact Form 7