Autocompletion for fields not working
-
Hi, my name is Jakub Ivančík,
I am working on website for our client. I set autocompletion attributes according to “https://contactform7.com/form-autocompletion/” and “https://developer.mozilla.org/en-US/docs/Web/HTML/Attributes/autocomplete“. I use another 2 plugins that adds Conditional Field to CF7 (Conditional Fields for Contact Form 7) and multistep functionality using plugin Multi Step for Contact Form 7 (Lite).
I also tried to use this PHP filter set to ON:
add_filter( 'wpcf7_form_autocomplete', function( $autocomplete) { $autocomplete= 'on'; return$autocomplete; }, 10, 1 );
It didn’t help. Would anyone have some suggestions how to solve this? Might there be some conflict between Conditional Fields, Multi Step and CF7? Or maybe I set up something in a wrong way.
Thank you for any advice, help or possible solution.
I wish you peaceful day all.
The page I need help with: [log in to see the link]
-
What content do you have in the Form tab panel?
Thank you for response, Takayuki Miyoshi.
Here is the content I have in the Form tab divided in 4 steps:
<!-- STEP 1 START--> <div class="cf-container"> <div class="cf-row"> <div class="cf__loan-calc-result"> <div class="cf__result-title"> <h3>Chcem si požičať</h3> </div> <div class="cf__result-row"> <p class="cf__result-label">Typ pôžičky</p> <div class="cf__result-input"> [text* loan-type id:loan-type readonly placeholder "typ pôžičky"] </div> </div> <div class="cf__result-row"> <p class="cf__result-label">Suma</p> <div class="cf__result-input"> [text* loan-sum id:loan-sum readonly placeholder "suma"] </div> </div> <div class="cf__result-row"> <p class="cf__result-label">Doba splácania</p> <div class="cf__result-input"> [text* loan-months id:loan-months readonly placeholder "počet mesiacov"] </div> </div> <div class="cf__result-row"> <p class="cf__result-label">Mesačná splátka</p> <div class="cf__result-input"> [text* loan-monthly-payment id:loan-monthly-payment readonly placeholder "mesačná splátka"] </div> </div> </div> </div> <div class="cf-row"> <div class="cf-column"> <div class="cf-input"> <label> Meno [text* clients-name autocomplete:given-name placeholder "Robert"] </label> </div> <div class="cf-input"> <label> Priezvisko [text* clients-surname autocomplete:family-name placeholder "Molnár"] </label> </div> </div> </div> <div class="cf-row"> <div class="cf-column"> <div class="cf-input"> <label> Rodné číslo [text* clients-birth-number placeholder "220103/1925"] </label> </div> <div class="cf-input"> <label> Číslo občianskeho preukazu [text* clients-id-card-number placeholder "BP022013"] </label> </div> <div class="cf-input"> <label> Telefónne číslo [tel* clients-tel autocomplete:tel placeholder "0901 234 567"] </label> </div> <div class="cf-input"> <label> Email [email* clients-email autocomplete:email placeholder "robert.molnar@gmail.com"] </label> </div> <div class="cf-input"> <label> Zamestnanie [select* clients-employment-type first_as_label "Zamestnanec" "Štátny zamestnanec" "Zamestnanec v zahraničí" "Živnostník / S.R.O." "Živnostník / bez IČO" "Opatrovateľka - živnostník - v členskej krajine EÚ"] </label> </div> <div class="cf-input"> <label> Deti [number* clients-number-of-children min:0 max:99 step:1 placeholder "4"] </label> </div> <div class="cf-input"> <label> Dosiahnuté vzdelanie [select* clients-education first_as_label "Neuvedené" "Základné" "Stredoškolské bez maturity" "Stredoškolské" "Vysokoškolské bakalárske" "Vysokoškolské" "Postgraduálne"] </label> </div> <div class="cf-input"> <label> [acceptance acceptance-of-saving-data] Súhlasím s uložením osobných údajov v rozpracovanom kontaktnom formulári. [/acceptance] </label> </div> </div> </div> </div> <!-- STEP 1 END --> <!-- STEP 2 START--> <div class="cf-container"> <div class="cf-row"> <div class="cf-column"> <div class="cf-input"> <label> Názov spoločnosti [text* clients-company-name autocomplete:organization placeholder "Firma, s.r.o."] </label> </div> <div class="cf-input"> Zamestnanie mám na dobu [radio* clients-employment-duration use_label_element default:1 "Neurčitú" "Určitú"] </div> <div class="cf-input"> <label> V zamestnaní od [date* clients-employment-start-date placeholder "01/2021"] </label> </div> [group clients-employment-end-date--active clear_on_hide] <div class="cf-input"> <label> V zamestnaní do [date* clients-employment-end-date placeholder "04/2024"] </label> </div> [/group] </div> </div> <div class="cf-row"> <h3 class="cf-row__heading"> Aký bol tvôj čistý príjem za posledné 3 mesiace </h3> <div class="cf-column"> <div class="cf-input"> <label> 1. mesiac [number* clients-income-first-month min:0 placeholder "1200 €"] </label> </div> <div class="cf-input"> <label> 2. mesiac [number* clients-income-second-month min:0 placeholder "1200 €"] </label> </div> <div class="cf-input"> <label> 3. mesiac [number* clients-income-third-month min:0 placeholder "1200 €"] </label> </div> </div> </div> <div class="cf-row"> <div class="cf-column"> <div class="cf-input"> Je v súčasnosti voči Vám vedená exekúcia? [radio* clients-execution-true-false use_label_element default:2 "Áno" "Nie"] </div> <div class="cf-input"> Mali ste v minulosti vyhlásený osobný bankrot? [radio* clients-personal-bankruptcy-true-false use_label_element default:2 "Áno" "Nie"] </div> <div class="cf-input"> Boli ste niekedy v omeškaní so splátkami? [radio* clients-installment-delay-true-false use_label_element default:2 "Áno" "Nie"] </div> </div> </div> </div> <!-- STEP 2 END --> <!-- STEP 3 START--> <div class="cf-container"> <div class="cf-row"> <h3 class="cf-row__heading">Adresa trvalého pobytu</h3> <div class="cf-column"> <div class="cf-input"> <label> Ulica a číslo [text* clients-home-street autocomplete:street-address placeholder "Račianska 52"] </label> </div> <div class="cf-inner-row"> <div class="cf-inner-column"> <div class="cf-input"> <label> Obec [text* clients-home-city autocomplete:address-level1 placeholder "Bratislava"] </label> </div> <div class="cf-input"> <label> PSČ [text* clients-home-post-office-number autocomplete:postal-code placeholder "851 01"] </label> </div> </div> </div> <div class="cf-input"> <label> Bývam v [select* clients-accomodation-type first_as_label "Vlastný byt/dom" "Družstevný byt" "Bývanie u rodičov/u detí" "Nájomné bývanie" "Iné"] </label> </div> <div class="cf-input cf-input__checkbox--with-label"> <p>Poštu chcem dostávať na inú adresu</p> [checkbox clients-activate-additional-address exclusive "true"] </div> </div> </div> [group clients-additional-address clear_on_hide] <div class="cf-row"> <h3 class="cf-row__heading">Poštu vám pošleme na adresu</h3> <div class="cf-column"> <div class="cf-input"> <label> Ulica a číslo [text* clients-additional-address-street autocomplete:street-address placeholder "Račianska 52"] </label> </div> <div class="cf-inner-row"> <div class="cf-inner-column"> <div class="cf-input"> <label> Obec [text* clients-additional-address-city autocomplete:address-level1 placeholder "Bratislava"] </label> </div> <div class="cf-input"> <label> PSČ [text* clients-additional-address-post-office-number autocomplete:postal-code placeholder "851 01"] </label> </div> </div> </div> </div> </div> [/group] <div class="cf-row"> <div class="cf-column"> <div class="cf-input"> <label> Rodné priezvisko matky [text* clients-mothers-birth-name placeholder "Molnárová"] </label> </div> </div> </div> </div> <!-- STEP 3 END --> <!-- STEP 4 START--> <div class="cf-container"> <div class="cf-row"> <h3 class="cf-row__heading">Platobné údaje</h3> <div class="cf-column"> <div class="cf-input"> <label> IBAN [text* clients-iban placeholder "SK25 0900 0000 0025 1234 5678"] </label> </div> <div class="cf-input"> <label> Názov banky [text* clients-bank-name placeholder "Slovenská sporiteľňa, a.s."] </label> </div> <div class="cf-input"> Vyberte si spôsob splácania pôžičky [radio* clients-loan-repayment-type use_label_element default:2 "Poštová poukážka" "Bankový prevod"] </div> </div> </div> <div class="cf-row"> <h3 class="cf-row__heading"> Nahrajte fotografiu občianského preukazu z prednej aj zadnej strany </h3> <div class="cf-column"> <div class="cf-input"> <label> Predná strana - Občiansky preukaz [file* clients-id-card-front-site limit:2mb filetypes:png|jpg|pdf] </label> </div> <div class="cf-input"> <label> Zadná strana - Občiansky preukaz [file* clients-id-card-back-site limit:2mb filetypes:png|jpg|pdf] </label> </div> </div> </div> <div class="cf-row"> <div class="cf-column"> <div class="cf-input">[submit "Odoslať na posúdenie"]</div> </div> </div> </div> <!-- STEP 4 END -->
-
This reply was modified 9 months, 2 weeks ago by
ivancikjakub.
Seemingly there is no problem in the form template and the all
autocomplete
attributes are output to HTML correctly.Thank you, @takayukister for your time and examinating my code.
I found out, that problem is probably in Mozilla Firefox security system. In Google Chrome, the autocomplete works without any problem.
I would treat this issue as resolved then.
I wish you peaceful day and joy in what you do.
-
This reply was modified 9 months, 2 weeks ago by
- The topic ‘Autocompletion for fields not working’ is closed to new replies.