Phone still showing placeholder when validation enabled
-
when I force the phone field to validate, it shows an example phone number which is confusing to my users. How can that be hidden? It is hidden when I remove the validation, but I want to validate the field.
The page I need help with: [log in to see the link]
-
Hi @scwtenor,
I hope you are keeping well and thank you for reaching out to us.
Wouldn’t you mind please share an export of the form using Pastebin.com or Google Drive so that we could give a closer look at how the form is configured?
I hope the following guide comes in handy: https://wpmudev.com/docs/wpmu-dev-plugins/forminator/#import-export
We look forward to hearing back from you.
Kind Regards,
Nebu John{"type":"form","data":{"fields":[{"id":"section-1","element_id":"section-1","form_id":"wrapper-9084-5798","parent_group":"","type":"section","options":[],"cols":"12","conditions":[],"wrapper_id":"wrapper-9084-5798","section_title":"Performer","cform-section-border-style":"none","section_border":"none","cform-section-border-width":"1","cform-section-border-color":"#aaaaaa"},{"id":"name-1","element_id":"name-1","form_id":"wrapper-2810-3883","parent_group":"","type":"name","options":[],"cols":"6","conditions":[],"wrapper_id":"wrapper-2810-3883","field_label":"Name","placeholder":"","prefix_label":"Prefix","fname_label":"First Name","fname_placeholder":"E.g. John","mname_label":"Middle Name","mname_placeholder":"E.g. Smith","lname_label":"Last Name","lname_placeholder":"E.g. Doe","prefix":"true","fname":"true","mname":"true","lname":"true","required_message":"Name is required.","prefix_required_message":"Prefix is required.","fname_required_message":"First Name is required.","mname_required_message":"Middle Name is required.","lname_required_message":"Last Name is required.","layout_columns":"2","required":"1"},{"id":"url-1","element_id":"url-1","form_id":"wrapper-2810-3883","parent_group":"","type":"url","options":[],"cols":"6","conditions":[],"wrapper_id":"wrapper-2810-3883","field_label":"Website (Optional)","placeholder":"","validation":"1","validation_message":"Please enter a valid website address"},{"id":"email-1","element_id":"email-1","form_id":"wrapper-2266-3877","parent_group":"","type":"email","options":[],"cols":"6","conditions":[],"wrapper_id":"wrapper-2266-3877","validation":"1","placeholder":"","field_label":"Email Address","required":"1","validation_message":"Please enter a valid email address"},{"id":"phone-1","element_id":"phone-1","form_id":"wrapper-2266-3877","parent_group":"","type":"phone","options":[],"cols":"6","conditions":[],"wrapper_id":"wrapper-2266-3877","required":"1","limit":"10","limit_type":"characters","validation":"standard","field_label":"Phone","placeholder":"xxx-xxx-xxxx","phone_national_country":"us"},{"id":"address-1","element_id":"address-1","form_id":"wrapper-5429-3802","parent_group":"","type":"address","options":[],"cols":"12","conditions":[],"wrapper_id":"wrapper-5429-3802","street_address":"true","address_city":"true","address_state":"1","address_zip":"true","address_country":"","address_line":"true","street_address_label":"Street Address","street_address_placeholder":"","address_city_label":"City","address_city_placeholder":"","address_state_label":"State","address_state_placeholder":"","address_zip_label":"ZIP","address_zip_placeholder":"","address_country_label":"Country","address_line_label":"Address 2 (optional)","street_address_required_message":"This field is required. Please enter the street address.","address_zip_required_message":"This field is required. Please enter the zip code.","address_country_required_message":"This field is required. Please select the country.","address_city_required_message":"This field is required. Please enter the city.","address_state_required_message":"This field is required. Please enter the state.","address_line_required_message":"This field is required. Please enter address line.","street_address_required":"1","address_state_prefill":"","address_state_required":"1","address_city_required":"1","address_line_required":"","address_zip_required":"1"},{"id":"text-1","element_id":"text-1","form_id":"wrapper-2363-4148","parent_group":"","type":"text","options":[],"cols":"12","conditions":[],"wrapper_id":"wrapper-2363-4148","input_type":"line","limit_type":"characters","field_label":"Voice Part/Instrument/Ensemble Name","placeholder":"","required":"1"},{"id":"section-2","element_id":"section-2","form_id":"wrapper-7916-6138","parent_group":"","type":"section","options":[],"cols":"12","conditions":[],"wrapper_id":"wrapper-7916-6138","section_title":"Accompanist (if applicable)","cform-section-border-style":"none","section_border":"none","cform-section-border-width":"1","cform-section-border-color":"#aaaaaa","formid":"wrapper-7532-8263"},{"id":"radio-1","element_id":"radio-1","form_id":"wrapper-1673-6310","parent_group":"","type":"radio","options":[{"label":"Yes","value":"one","key":"4059-4213","error":""},{"label":"No","value":"two","key":"8350-4998","error":""}],"cols":"6","conditions":[],"wrapper_id":"wrapper-1673-6310","value_type":"radio","field_label":"Will you be using an accompanist?","layout":"horizontal","options_bulk_editor":"Yes;one; 0\nNo;two; 0","required":"1"},{"id":"group-1","element_id":"group-1","form_id":"wrapper-1673-6310","parent_group":"","type":"group","options":[],"cols":"6","conditions":[{"element_id":"radio-1","rule":"is","value":"one"}],"wrapper_id":"wrapper-1673-6310","field_label":"Accompanist Info","is_repeater":"false","condition_action":"show","condition_rule":"all"},{"id":"name-3","element_id":"name-3","form_id":"wrapper-6312-4344","parent_group":"group-2","type":"name","options":[],"cols":"6","conditions":[],"wrapper_id":"wrapper-6312-4344","field_label":"Name","placeholder":"","prefix_label":"Prefix","fname_label":"First Name","fname_placeholder":"E.g. John","mname_label":"Middle Name","mname_placeholder":"E.g. Smith","lname_label":"Last Name","lname_placeholder":"E.g. Doe","prefix":"true","fname":"true","mname":"true","lname":"true","required_message":"Name is required.","prefix_required_message":"Prefix is required.","fname_required_message":"First Name is required.","mname_required_message":"Middle Name is required.","lname_required_message":"Last Name is required.","layout_columns":"2","formid":"wrapper-6312-4344"},{"id":"text-2","element_id":"text-2","form_id":"wrapper-6312-4344","parent_group":"group-2","type":"text","options":[],"cols":"6","conditions":[],"wrapper_id":"wrapper-6312-4344","input_type":"line","limit_type":"characters","field_label":"Instrument","placeholder":""},{"id":"email-3","element_id":"email-3","form_id":"wrapper-8962-1146","parent_group":"group-2","type":"email","options":[],"cols":"6","conditions":[],"wrapper_id":"wrapper-8962-1146","validation":"1","placeholder":"","field_label":"Email Address","formid":"wrapper-8962-1146"},{"id":"phone-3","element_id":"phone-3","form_id":"wrapper-8962-1146","parent_group":"group-2","type":"phone","options":[],"cols":"6","conditions":[],"wrapper_id":"wrapper-8962-1146","required":"","limit":"10","limit_type":"characters","validation":"standard","field_label":"Phone","placeholder":"xxx-xxx-xxxx","formid":"wrapper-5332-7483","phone_national_country":"us"},{"id":"name-2","element_id":"name-2","form_id":"wrapper-6851-9559","parent_group":"group-1","type":"name","options":[],"cols":"12","conditions":[],"wrapper_id":"wrapper-6851-9559","field_label":"Accompanist Name","placeholder":"","prefix_label":"Prefix","fname_label":"First Name","fname_placeholder":"E.g. John","mname_label":"Middle Name","mname_placeholder":"E.g. Smith","lname_label":"Last Name","lname_placeholder":"E.g. Doe","prefix":"true","fname":"true","mname":"true","lname":"true","required_message":"Name is required.","prefix_required_message":"Prefix is required.","fname_required_message":"First Name is required.","mname_required_message":"Middle Name is required.","lname_required_message":"Last Name is required.","layout_columns":"2","multiple_name":"false","required":"1"},{"id":"email-2","element_id":"email-2","form_id":"wrapper-3163-6425","parent_group":"group-1","type":"email","options":[],"cols":"6","conditions":[],"wrapper_id":"wrapper-3163-6425","validation":"1","placeholder":"","field_label":"Accompanist Email Address","required":"1"},{"id":"phone-2","element_id":"phone-2","form_id":"wrapper-3163-6425","parent_group":"group-1","type":"phone","options":[],"cols":"6","conditions":[],"wrapper_id":"wrapper-3163-6425","required":"1","limit":"10","limit_type":"characters","validation":"standard","field_label":"Accompanist Phone","placeholder":"xxx-xxx-xxxx","phone_national_country":"us"},{"id":"section-3","element_id":"section-3","form_id":"wrapper-6274-8497","parent_group":"","type":"section","options":[],"cols":"12","conditions":[],"wrapper_id":"wrapper-6274-8497","section_title":"Other Ensemble Members (if applicable)","cform-section-border-style":"none","section_border":"none","cform-section-border-width":"1","cform-section-border-color":"#aaaaaa","formid":"wrapper-6586-6324"},{"id":"checkbox-1","element_id":"checkbox-1","form_id":"wrapper-7217-3642","parent_group":"","type":"checkbox","options":[{"label":"Add Ensemble Members","value":"one","key":"1718-7456","error":""}],"cols":"6","conditions":[],"wrapper_id":"wrapper-7217-3642","value_type":"checkbox","field_label":"Do you have other ensemble members?","layout":"vertical","options_bulk_editor":"Add Ensemble Members;one; 0"},{"id":"group-2","element_id":"group-2","form_id":"wrapper-7217-3642","parent_group":"","type":"group","options":[],"cols":"6","conditions":[{"element_id":"checkbox-1","rule":"is","value":"one"}],"wrapper_id":"wrapper-7217-3642","field_label":"Ensemble Member Info","is_repeater":"true","condition_action":"show","condition_rule":"all","formid":"wrapper-4582-1976","max_limit_type":"custom","max_limit":"5","add_action_text":"Add Other Ensemble Member","remove_action_text":"Remove Other Ensemble Member"},{"id":"section-4","element_id":"section-4","form_id":"wrapper-7910-2939","parent_group":"","type":"section","options":[],"cols":"12","conditions":[],"wrapper_id":"wrapper-7910-2939","section_title":"Program","cform-section-border-style":"none","section_border":"none","cform-section-border-width":"1","cform-section-border-color":"#aaaaaa","formid":"wrapper-6138-8503"},{"id":"upload-1","element_id":"upload-1","form_id":"wrapper-4442-6333","parent_group":"","type":"upload","options":[],"cols":"12","conditions":[],"wrapper_id":"wrapper-4442-6333","field_label":"Upload your Program","filetypes":["webp","svg","svgz","doc","docx","pdf","rtf"],"file-type":"multiple","file-limit":"custom","upload-limit":"4","filesize":"MB","description":"Attach typed program (without applicant’s name). Each selection on the program is to be listed with full program details including title, key, opus number, movement(s), full name and dates of composer, and duration. PDF, DOC, DOCX or RTF file extensions are accepted. 4MB file size limit.","required":"1","custom-files":"1","file-limit-input":"1","use_library":"true"},{"id":"section-5","element_id":"section-5","form_id":"wrapper-8456-6723","parent_group":"","type":"section","options":[],"cols":"12","conditions":[],"wrapper_id":"wrapper-8456-6723","section_title":"$50 Application Fee","cform-section-border-style":"none","section_border":"none","cform-section-border-width":"1","cform-section-border-color":"#aaaaaa","formid":"wrapper-5973-4827"},{"id":"paypal-1","element_id":"paypal-1","form_id":"wrapper-3602-6282","parent_group":"","type":"paypal","options":[],"cols":"12","conditions":[],"wrapper_id":"wrapper-3602-6282","mode":"sandbox","currency":"USD","amount_type":"fixed","label":"pay","color":"gold","shape":"rect","layout":"vertical","tagline":"true","locale":"en_US","debug_mode":"disable","height":"40","amount":"50","credit":"1","bancontact":"1","blik":"1","eps":"1","giropay":"1","ideal":"1","venmo":"1","sofort":"1","sepa":"1","p24":"1","mybank":"1","mercadopago":"1","width":"300"},{"id":"hidden-1","element_id":"hidden-1","form_id":"wrapper-2650-8019","parent_group":"","type":"hidden","options":[],"cols":"12","conditions":[],"wrapper_id":"wrapper-2650-8019","field_label":"Submission Date","default_value":"date_mdy"},{"id":"hidden-2","element_id":"hidden-2","form_id":"wrapper-4965-4115","parent_group":"","type":"hidden","options":[],"cols":"12","conditions":[],"wrapper_id":"wrapper-4965-4115","field_label":"Submission Time","default_value":"submission_time","formid":"wrapper-4965-4115"}],"settings":{"pagination-header":"nav","paginationData":{"pagination-header-design":"show","pagination-header":"nav"},"formName":"Major Audition Application","version":"1.22.1","form-border-style":"none","form-padding":"","form-border":"","fields-style":"enclosed","validation":"on_submit","akismet-protection":"0","form-style":"default","enable-ajax":"true","autoclose":"true","submission-indicator":"show","indicator-label":"Sending application...","form-type":"default","submission-behaviour":"behaviour-thankyou","thankyou-message":"Thank you for contacting us, we will be in touch shortly.","submitData":{"custom-submit-text":"Submit Application","custom-invalid-form-message":"Please check your form for errors"},"validation-inline":"1","form-expire":"no_expire","form-padding-top":"0","form-padding-right":"0","form-padding-bottom":"0","form-padding-left":"0","form-border-width":"0","form-border-radius":"0","cform-label-font-family":"Montserrat","cform-label-custom-family":"","cform-label-font-size":"15","cform-label-font-weight":"bold","cform-title-font-family":"Montserrat","cform-title-custom-family":"","cform-title-font-size":"22","cform-title-font-weight":"normal","cform-title-text-align":"left","cform-subtitle-font-family":"Roboto","cform-subtitle-custom-font":"","cform-subtitle-font-size":"18","cform-subtitle-font-weight":"normal","cform-subtitle-text-align":"left","cform-input-font-family":"Montserrat","cform-input-custom-font":"","cform-input-font-size":"16","cform-input-font-weight":"normal","cform-radio-font-family":"Roboto","cform-radio-custom-font":"","cform-radio-font-size":"14","cform-radio-font-weight":"normal","cform-select-font-family":"Roboto","cform-select-custom-family":"","cform-select-font-size":"16","cform-select-font-weight":"normal","cform-multiselect-font-family":"Roboto","cform-multiselect-custom-font":"","cform-multiselect-font-size":"16","cform-multiselect-font-weight":"normal","cform-dropdown-font-family":"Roboto","cform-dropdown-custom-font":"","cform-dropdown-font-size":"16","cform-dropdown-font-weight":"normal","cform-calendar-font-family":"Roboto","cform-calendar-custom-font":"","cform-calendar-font-size":"13","cform-calendar-font-weight":"normal","cform-button-font-family":"Roboto","cform-button-custom-font":"","cform-button-font-size":"14","cform-button-font-weight":"500","cform-timeline-font-family":"Roboto","cform-timeline-custom-font":"","cform-timeline-font-size":"12","cform-timeline-font-weight":"normal","cform-pagination-font-family":"","cform-pagination-custom-font":"","cform-pagination-font-size":"16","cform-pagination-font-weight":"normal","payment_require_ssl":"","submission-file":"delete","store_submissions":"1","form_name":"major-audition-application","form_status":"publish","sc_email_link":"1","sc_message":"<p>Your form has been saved as draft and a resume link has been generated so you can return to the form anytime within {retention_period} days from today. Copy and save the link or enter your email address below to have the link sent to your mail.</p><p>These fields weren't saved to your submission draft: Paypal, Stripe, Signature, Password, Captcha, and Upload. Kindly fill them out before submitting the form.</p>","use_ajax_load":"1","use_save_and_continue":"","form-font-family":"custom","use-custom-css":"1","cform-color-settings":"true","button-submit-background-static":"#2d5d73","cform-repeater-button-font-family":"Montserrat","cform-repeater-button-font-size":"14","cform-label-color":"#333333","cform-asterisk-color":"#e02144","label-helper-color":"#333333","cform-validation-font-family":"Montserrat","upload-multiple-panel-font-family":"Montserrat","cform-description-font-family":"Montserrat","field-border":"","input-border":"#aaaaaa","input-bg":"#ffffff","custom_css":".forminator-title {\n border-width: 0px 0px 1px 3px !important;\n padding: 5px !important;\n border-style: solid !important;\n border-color: black !important;\n margin-top: 25px !important;\n background: #8080801c;\n text-transform: uppercase !important;\n font-size: 16px !important;\n font-weight: 600 !important;\n}\n\np.forminator-uploaded-file--title, p.forminator-uploaded-file--size {font-family: 'Montserrat';}","cform-response-font-family":"Montserrat"},"client_id":null,"integration_conditions":[],"behaviors":[{"slug":"behavior-1234-4567","label":"","autoclose-time":"5","autoclose":"","newtab":"sametab","thankyou-message":"<p>Thank you for applying!</p>\n<p>Applicants will be notified of any issues that may cause a submitted program to be rejected, and, time allowing, will be given the opportunity to submit a revised program.</p>\n<p>If your application is accepted, you will receive the schedule and instructions for your audition two to three days after the application deadline.</p>","email-thankyou-message":"","manual-thankyou-message":"","submission-behaviour":"behaviour-thankyou","redirect-url":""}],"notifications":[{"slug":"notification-1234-4567","label":"Admin Email","email-recipients":"default","recipients":"scwtech@icloud.com","email-subject":"New Form Entry #{submission_id} for {form_name}","email-editor":"You have a new website form submission: <br /> {all_fields} <br />---<br /> This message was sent from {site_url}.","email-attachment":"true","type":"default","conditions":[]}]},"status":"publish","version":"1.22.1"}Hi @scwtenor
Thanks for sharing the form.
I imported the form to my test setup and checked it and I see what you mean.
This is happening exactly due to the validation type – as it “hints” the format of the phone number. I see you have put a workaround by adding “xxx…” placeholder but you can also remove it entirely if you want – leaving just an empty field.
To do so, simply put a space (blank character) inside the “placeholder” field in phone field settings and it will remove placeholder completely; when user visits the form, they’ll see just empty field (and a flag depending on validation settings).
Best regards,
AdamThanks, but adding a space character does not work, and puts the example phone number back into the field as a placeholder.
Hi @scwtenor
I was able to replicate same issue and empty space does not help here. Please addd this code to WP dashboard- > Appearance -> Customize -> Additional CSS section:
#forminator-module-652 .forminator-input.forminator-field--phone::placeholder {color:transparent !important;}Kind Regards,
KrisHello @scwtenor ,
We haven’t heard from you for some time now, so it looks like you don’t have more questions for us.
Feel free to re-open this ticket if needed.
Kind regards
Kasia
The topic ‘Phone still showing placeholder when validation enabled’ is closed to new replies.