{"id":91661,"date":"2026-07-12T12:44:02","date_gmt":"2026-07-12T07:14:02","guid":{"rendered":"https:\/\/showcase.ananyoo.com\/patterns\/contact-styles\/"},"modified":"2026-09-25T07:39:10","modified_gmt":"2026-09-25T02:09:10","slug":"contact-styles","status":"publish","type":"page","link":"https:\/\/showcase.ananyoo.com\/fr\/patterns\/contact-styles\/","title":{"rendered":"Styles de contact"},"content":{"rendered":"<p class=\"wp-block-paragraph\">Three ways to dress the contact form. The live form renders once, in the default layout, so every field ID on this page stays unique; the other layouts show the same dressed slot.<\/p><h2 class=\"wp-block-heading\">Style 1 - Gradient envelope (default, live form)<\/h2><div class=\"wp-block-group ariade-ct-gradient is-layout-flow wp-block-group-is-layout-flow\"><p class=\"ct-kick wp-block-paragraph\">Send a message<\/p><h2 class=\"wp-block-heading\">Tell us about your project<\/h2><p class=\"ct-sub wp-block-paragraph\">Every field labelled, every error announced, keyboard from start to finish - it is our own Accessible Forms plugin, the same one bundled with this demo.<\/p><div class=\"wp-block-group ct-formcard is-layout-flow wp-block-group-is-layout-flow\"><div class=\"wp-block-group ct-form is-layout-flow wp-block-group-is-layout-flow\"><div class=\"wp-block-ananyoo-accessible-form\">\t\t\t\t<form class=\"aaf-form\" id=\"aaf-90303\" method=\"post\"\n\t\t\tnovalidate\t\t\taria-labelledby=\"aaf-90303-title\"\n\t\t\tdata-aaf-sub-level=\"3\">\n\n\t\t\t<h2 class=\"aaf-form-title\" id=\"aaf-90303-title\">Enquiry Form<\/h2>\n\t\t\t\t\t\t\t<p class=\"aaf-required-note\">\n\t\t\t\t\tFields marked with an asterisk (*) are required.\t\t\t\t<\/p>\n\t\t\t\t\n\t\t\t\n\t\t\t<div class=\"aaf-field aaf-field-text\"><label class=\"aaf-label\" for=\"aaf-90303-your_name\">Your name <span class=\"aaf-required\" aria-hidden=\"true\">*<\/span><\/label><input type=\"text\" id=\"aaf-90303-your_name\" name=\"aaf_field[your_name]\" value=\"\" aria-required=\"true\" autocomplete=\"name\"><\/div><div class=\"aaf-field aaf-field-email\"><label class=\"aaf-label\" for=\"aaf-90303-your_email\">Your email <span class=\"aaf-required\" aria-hidden=\"true\">*<\/span><\/label><span class=\"aaf-help\" id=\"aaf-90303-your_email-help\">We will reply to this address.<\/span><input type=\"email\" id=\"aaf-90303-your_email\" name=\"aaf_field[your_email]\" value=\"\" aria-required=\"true\" aria-describedby=\"aaf-90303-your_email-help\" autocomplete=\"email\" inputmode=\"email\"><\/div><div class=\"aaf-field aaf-field-tel\"><label class=\"aaf-label\" for=\"aaf-90303-phone\">Phone<\/label><input type=\"tel\" id=\"aaf-90303-phone\" name=\"aaf_field[phone]\" value=\"\" autocomplete=\"tel\" inputmode=\"tel\"><\/div><div class=\"aaf-field aaf-field-url\"><label class=\"aaf-label\" for=\"aaf-90303-website\">Website<\/label><input type=\"url\" id=\"aaf-90303-website\" name=\"aaf_field[website]\" value=\"\" autocomplete=\"url\" inputmode=\"url\"><\/div><div class=\"aaf-field aaf-field-number\"><label class=\"aaf-label\" for=\"aaf-90303-budget_usd\">Budget (USD)<\/label><input type=\"number\" id=\"aaf-90303-budget_usd\" name=\"aaf_field[budget_usd]\" value=\"\" inputmode=\"numeric\"><\/div><div class=\"aaf-field aaf-field-select\"><label class=\"aaf-label\" for=\"aaf-90303-subject\">Subject<\/label><select id=\"aaf-90303-subject\" name=\"aaf_field[subject]\"><option value=\"\">Please choose\u2026<\/option><option value=\"General enquiry\">General enquiry<\/option><option value=\"Accessibility audit\">Accessibility audit<\/option><option value=\"Remediation\">Remediation<\/option><option value=\"Training\">Training<\/option><\/select><\/div><div class=\"aaf-field aaf-field-radio\"><fieldset class=\"aaf-group\" id=\"aaf-90303-how_did_you_hear\"><legend class=\"aaf-label\">How did you hear about us?<\/legend><span class=\"aaf-choice\"><input type=\"radio\" id=\"aaf-90303-how_did_you_hear-0\" name=\"aaf_field[how_did_you_hear]\" value=\"Search engine\"><label for=\"aaf-90303-how_did_you_hear-0\">Search engine<\/label><\/span><span class=\"aaf-choice\"><input type=\"radio\" id=\"aaf-90303-how_did_you_hear-1\" name=\"aaf_field[how_did_you_hear]\" value=\"A referral\"><label for=\"aaf-90303-how_did_you_hear-1\">A referral<\/label><\/span><span class=\"aaf-choice\"><input type=\"radio\" id=\"aaf-90303-how_did_you_hear-2\" name=\"aaf_field[how_did_you_hear]\" value=\"Social media\"><label for=\"aaf-90303-how_did_you_hear-2\">Social media<\/label><\/span><\/fieldset><\/div><div class=\"aaf-field aaf-field-checkboxes\"><fieldset class=\"aaf-group\" id=\"aaf-90303-services\"><legend class=\"aaf-label\">Services you are interested in<\/legend><span class=\"aaf-choice\"><input type=\"checkbox\" id=\"aaf-90303-services-0\" name=\"aaf_field[services][]\" value=\"Accessibility audit\"><label for=\"aaf-90303-services-0\">Accessibility audit<\/label><\/span><span class=\"aaf-choice\"><input type=\"checkbox\" id=\"aaf-90303-services-1\" name=\"aaf_field[services][]\" value=\"Remediation\"><label for=\"aaf-90303-services-1\">Remediation<\/label><\/span><span class=\"aaf-choice\"><input type=\"checkbox\" id=\"aaf-90303-services-2\" name=\"aaf_field[services][]\" value=\"Team training\"><label for=\"aaf-90303-services-2\">Team training<\/label><\/span><\/fieldset><\/div><div class=\"aaf-field aaf-field-textarea\"><label class=\"aaf-label\" for=\"aaf-90303-message\">Message <span class=\"aaf-required\" aria-hidden=\"true\">*<\/span><\/label><textarea id=\"aaf-90303-message\" name=\"aaf_field[message]\" rows=\"5\" aria-required=\"true\"><\/textarea><\/div><div class=\"aaf-field aaf-field-consent\"><label class=\"aaf-label\" for=\"aaf-90303-consent\">I agree to be contacted about my enquiry. <span class=\"aaf-required\" aria-hidden=\"true\">*<\/span><\/label><span class=\"aaf-choice aaf-consent\"><input type=\"checkbox\" id=\"aaf-90303-consent\" name=\"aaf_field[consent]\" value=\"1\" aria-required=\"true\"><\/span><\/div>\n\t\t\t<input type=\"hidden\" name=\"aaf_nonce\" value=\"f46b209ca4\" \/><input type=\"hidden\" name=\"_wp_http_referer\" value=\"\/fr\/wp-json\/wp\/v2\/pages\/91661\" \/><div class=\"aaf-hp\" aria-hidden=\"true\"><label for=\"aaf_hp_url-aaf-90303\">Leave this field empty<\/label><input type=\"text\" id=\"aaf_hp_url-aaf-90303\" name=\"aaf_hp_url\" value=\"\" tabindex=\"-1\" autocomplete=\"off\"><\/div><input type=\"hidden\" name=\"aaf_ts\" value=\"1793873256\">\t\t\t<input type=\"hidden\" name=\"aaf_action\" value=\"aaf_submit\">\n\t\t\t<input type=\"hidden\" name=\"aaf_form_id\" value=\"90303\">\n\t\t\t\t\t\t<input type=\"hidden\" name=\"aaf_source_url\" value=\"https:\/\/showcase.ananyoo.com\/fr\/fr\/wp-json\/wp\/v2\/pages\/91661\">\n\t\t\t<input type=\"hidden\" name=\"aaf_source_title\" value=\"Ananyoo Accessible Themes and Plugins Showcase\">\n\n\t\t\t\n\t\t\t<p class=\"aaf-actions\">\n\t\t\t\t<button type=\"submit\" class=\"aaf-submit\">\n\t\t\t\t\tSend enquiry\t\t\t\t<\/button>\n\t\t\t<\/p>\n\t\t<\/form>\n\t\t<\/div><\/div><\/div><ul class=\"wp-block-list ct-ticks\"><li>Reply within one working day<\/li><li>Written-first<\/li><li>Your data stays yours<\/li><\/ul><\/div><h2 class=\"wp-block-heading\">Style 2 - Split contact card<\/h2><div class=\"wp-block-group ariade-ct-split is-layout-flow wp-block-group-is-layout-flow\"><div class=\"wp-block-columns ct-layout is-layout-flex wp-container-core-columns-is-layout-7387b849 wp-block-columns-is-layout-flex\"><div class=\"wp-block-column is-layout-flow wp-block-column-is-layout-flow\" style=\"flex-basis:44%\"><div class=\"wp-block-group ct-info is-layout-flow wp-block-group-is-layout-flow\"><p class=\"ct-kick wp-block-paragraph\">Send a message<\/p><h2 class=\"wp-block-heading\">Tell us about your project.<\/h2><p class=\"wp-block-paragraph\">Every field is labelled, errors are announced, and the whole form works on a keyboard.<\/p><ul class=\"wp-block-list ct-ticks\"><li>We reply within one working day<\/li><li>Written-first - no call required<\/li><\/ul><div class=\"wp-block-group ct-rows is-layout-flow wp-block-group-is-layout-flow\"><p class=\"wp-block-paragraph\"><strong>Email<\/strong> hello@example.com<\/p><p class=\"wp-block-paragraph\"><strong>Office<\/strong> Kolkata, India<\/p><p class=\"wp-block-paragraph\"><strong>Hours<\/strong> Mon-Fri, 10:00-18:00 IST<\/p><\/div><\/div><\/div><div class=\"wp-block-column is-layout-flow wp-block-column-is-layout-flow\" style=\"flex-basis:56%\"><div class=\"wp-block-group ct-formcard is-layout-flow wp-block-group-is-layout-flow\"><div class=\"wp-block-group ct-form is-layout-flow wp-block-group-is-layout-flow\"><p class=\"ct-slot-note wp-block-paragraph\">The live form appears once in the default layout above - the same form drops into this slot; it is shown dressed here to keep every field ID on the page unique.<\/p><\/div><\/div><\/div><\/div><\/div><h2 class=\"wp-block-heading\">Style 3 - Ledger minimal<\/h2><div class=\"wp-block-group ariade-ct-lines is-layout-flow wp-block-group-is-layout-flow\"><p class=\"ct-kick wp-block-paragraph\">Send a message<\/p><h2 class=\"wp-block-heading\">Tell us about <em>your project.<\/em><\/h2><p class=\"ct-sub wp-block-paragraph\">We reply within one working day, in writing.<\/p><div class=\"wp-block-group ct-form is-layout-flow wp-block-group-is-layout-flow\"><p class=\"ct-slot-note wp-block-paragraph\">The live form appears once in the default layout above - the same form drops into this slot; it is shown dressed here to keep every field ID on the page unique.<\/p><\/div><ul class=\"wp-block-list ct-chips\"><li><strong>Email<\/strong> hello@example.com<\/li><li><strong>Office<\/strong> Kolkata, India<\/li><li><strong>Hours<\/strong> Mon-Fri, 10-18 IST<\/li><\/ul><\/div>","protected":false},"excerpt":{"rendered":"<p>Trois fa\u00e7ons d\u2019habiller le formulaire.<\/p>","protected":false},"author":1,"featured_media":0,"parent":91340,"menu_order":0,"comment_status":"closed","ping_status":"closed","template":"","meta":{"footnotes":""},"class_list":["post-91661","page","type-page","status-publish","hentry"],"_links":{"self":[{"href":"https:\/\/showcase.ananyoo.com\/fr\/wp-json\/wp\/v2\/pages\/91661","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/showcase.ananyoo.com\/fr\/wp-json\/wp\/v2\/pages"}],"about":[{"href":"https:\/\/showcase.ananyoo.com\/fr\/wp-json\/wp\/v2\/types\/page"}],"author":[{"embeddable":true,"href":"https:\/\/showcase.ananyoo.com\/fr\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/showcase.ananyoo.com\/fr\/wp-json\/wp\/v2\/comments?post=91661"}],"version-history":[{"count":1,"href":"https:\/\/showcase.ananyoo.com\/fr\/wp-json\/wp\/v2\/pages\/91661\/revisions"}],"predecessor-version":[{"id":94639,"href":"https:\/\/showcase.ananyoo.com\/fr\/wp-json\/wp\/v2\/pages\/91661\/revisions\/94639"}],"up":[{"embeddable":true,"href":"https:\/\/showcase.ananyoo.com\/fr\/wp-json\/wp\/v2\/pages\/91340"}],"wp:attachment":[{"href":"https:\/\/showcase.ananyoo.com\/fr\/wp-json\/wp\/v2\/media?parent=91661"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}