contact form 7 missing aria labels

This topic has 4 replies, 2 voices, and was last updated 2 months, 3 weeks ago by Aizaz Imtiaz Awan.

Viewing 5 posts - 1 through 5 (of 5 total)

Author

Posts
May 29, 2025 at 7:47 am #663939

dunies
Participant

Hello,

Can you please help me add the missing aria labels to the alternative form?

Attachments:
You must be logged in to view attached files.

May 29, 2025 at 8:32 am #663946

dunies
Participant

I found the solution myself. Please correct the code in demo accordingly.

Label must close after the shortcode.

<div class=”col-md-6″ style=’margin-bottom:20px;’><label>Όνομα [text* your-name] </label></div>

May 29, 2025 at 1:46 pm #664004
Aizaz Imtiaz Awan
Keymaster
Hello,

For proper accessibility (aria-label) and valid HTML, each form input should have a corresponding <label> with a for attribute that matches the id of the input field, or you can use the aria-label attribute directly on the input.

However, Contact Form 7 handles rendering of IDs dynamically unless manually set. Below is the correct and accessible way to write the form markup using Contact Form 7 with proper aria-label via labels:
```
<div class="col-md-6" style="margin-bottom:20px;">
  <label for="your-name">Όνομα</label>
  [text* your-name id:your-name aria-label "Name"]
</div>
```
Best Regards,
May 29, 2025 at 1:59 pm #664008
dunies
Participant
I have used that and many variations given by AI but nothing worked.

Here is the code that worked and I found it without the stupid AI.
```
<div class="row">
<div class="col-md-6" style='margin-bottom:20px;'><label>Όνομα [text* your-name] </label></div>
<div class="col-md-6" style='margin-bottom:20px;'><label>Email [email* your-email]</label></div>
</div>
<div class="row">
<div class="col-md-6" style='margin-bottom:20px;'><label>Τηλέφωνο [tel tel-767] </label></div>
<div class="col-md-6" style='margin-bottom:20px;'><label>Εταιρεία [text text-1] </label></div>
</div>

<p><label>Μήνυμα [textarea your-message] </label></p>

<p><small><label> Αποδοχή [acceptance acceptance-gdpr] </label> Συναινώ στο να χρησιμοποιηθούν τα ανωτέρω προσωπικά μου δεδομένα, μόνο για τις ανάγκες αυτής της επικοινωνίας και δηλώνω υπεύθυνα πως έχω κλείσει το 16ο έτος της ηλικίας μου.</small>
[cf7sr-recaptcha]
[submit class:btn-color-black "ΑΠΟΣΤΟΛΗ"]</p>
```
- This reply was modified 2 months, 3 weeks ago by dunies.
May 29, 2025 at 2:52 pm #664027

Aizaz Imtiaz Awan
Keymaster

Hello,

We’re glad you found a version that works for you. Let us know if there’s anything else we can do for you! You can always reach us at any time. We are always here to help you.

Best Regards,
Author

Posts

Viewing 5 posts - 1 through 5 (of 5 total)

contact form 7 missing aria labels

Attachments: