{"id":35883,"date":"2019-11-11T16:28:56","date_gmt":"2019-11-11T16:28:56","guid":{"rendered":"https:\/\/123formbuilder.polarbuildingcleaning.net\/docs\/?p=35883"},"modified":"2023-11-24T10:53:23","modified_gmt":"2023-11-24T10:53:23","slug":"replace-error-images-with-custom-css","status":"publish","type":"post","link":"https:\/\/123formbuilder.polarbuildingcleaning.net\/docs\/replace-error-images-with-custom-css\/","title":{"rendered":"Replace error images with custom CSS on 123FormBuilder"},"content":{"rendered":"\n<p>When you enable certain settings on your form, it returns an error message that displays an image. In this article we will illustrate how to replace this image with custom CSS:<\/p>\n\n\n<div class=\"wp-block-image\">\n<figure class=\"aligncenter size-full\"><a href=\"https:\/\/cdn.marketing123.123formbuilder.com\/wp-content\/uploads\/sites\/3\/2021\/12\/ErrorImage.png\"><img loading=\"lazy\" decoding=\"async\" width=\"445\" height=\"243\" src=\"https:\/\/cdn.marketing123.123formbuilder.com\/wp-content\/uploads\/sites\/3\/2021\/12\/ErrorImage.png\" alt=\"Error image\" class=\"wp-image-42313\" srcset=\"https:\/\/cdn.marketing123.123formbuilder.com\/wp-content\/uploads\/sites\/3\/2021\/12\/ErrorImage.png 445w, https:\/\/cdn.marketing123.123formbuilder.com\/wp-content\/uploads\/sites\/3\/2021\/12\/ErrorImage-300x164.png 300w\" sizes=\"auto, (max-width: 445px) 100vw, 445px\" \/><\/a><\/figure>\n<\/div>\n\n\n<p>This image appears when you have enabled certain options such as <a href=\"https:\/\/123formbuilder.polarbuildingcleaning.net\/docs\/country-filter\/\">country filter<\/a>, <a href=\"https:\/\/123formbuilder.polarbuildingcleaning.net\/docs\/can-i-limit-form-submissions-from-the-same-ip\/\">IP limitations<\/a>, <a href=\"https:\/\/123formbuilder.polarbuildingcleaning.net\/docs\/form-activity-2\/\">accessibility&nbsp;of the form<\/a>.<\/p>\n\n\n\n<p>First, access your <a href=\"\/\">form builder<\/a> account, select the form, and go to the<b> Design <\/b>section. Next, click on the<b> Add custom CSS<\/b> button. Here you can create and&nbsp;place all your CSS codes to stylize the form.<\/p>\n\n\n\n<figure class=\"wp-block-image size-large\"><a href=\"https:\/\/cdn.marketing123.123formbuilder.com\/wp-content\/uploads\/sites\/3\/2023\/11\/Screenshot-2023-11-24-at-11.59.53-5.png\"><img loading=\"lazy\" decoding=\"async\" width=\"1024\" height=\"573\" src=\"https:\/\/cdn.marketing123.123formbuilder.com\/wp-content\/uploads\/sites\/3\/2023\/11\/Screenshot-2023-11-24-at-11.59.53-5-1024x573.png\" alt=\"Custom CSS\" class=\"wp-image-47957\" srcset=\"https:\/\/cdn.marketing123.123formbuilder.com\/wp-content\/uploads\/sites\/3\/2023\/11\/Screenshot-2023-11-24-at-11.59.53-5-1024x573.png 1024w, https:\/\/cdn.marketing123.123formbuilder.com\/wp-content\/uploads\/sites\/3\/2023\/11\/Screenshot-2023-11-24-at-11.59.53-5-300x168.png 300w, https:\/\/cdn.marketing123.123formbuilder.com\/wp-content\/uploads\/sites\/3\/2023\/11\/Screenshot-2023-11-24-at-11.59.53-5-768x430.png 768w, https:\/\/cdn.marketing123.123formbuilder.com\/wp-content\/uploads\/sites\/3\/2023\/11\/Screenshot-2023-11-24-at-11.59.53-5-1536x859.png 1536w, https:\/\/cdn.marketing123.123formbuilder.com\/wp-content\/uploads\/sites\/3\/2023\/11\/Screenshot-2023-11-24-at-11.59.53-5.png 1913w\" sizes=\"auto, (max-width: 1024px) 100vw, 1024px\" \/><\/a><\/figure>\n\n\n\n<p><\/p>\n\n\n\n<p>Here is the&nbsp;CSS code you need to use:<\/p>\n\n\n\n<pre class=\"wp-block-preformatted\">#error-img \n{ \ncontent: url(https:\/\/cdn-main.123contactform.com\/images3\/logos\/123-36px.png)!important; \n}<\/pre>\n\n\n\n<p>Replace the URL with your own hosted&nbsp;image link and you&#8217;re done!<\/p>\n\n\n<div class=\"wp-block-image\">\n<figure class=\"aligncenter size-full is-resized\"><a href=\"https:\/\/cdn.marketing123.123formbuilder.com\/wp-content\/uploads\/sites\/3\/2021\/12\/errormessage2.png\"><img loading=\"lazy\" decoding=\"async\" width=\"404\" height=\"309\" src=\"https:\/\/cdn.marketing123.123formbuilder.com\/wp-content\/uploads\/sites\/3\/2021\/12\/errormessage2.png\" alt=\"Changed error image\" class=\"wp-image-42315\" style=\"width:475px;height:363px\" srcset=\"https:\/\/cdn.marketing123.123formbuilder.com\/wp-content\/uploads\/sites\/3\/2021\/12\/errormessage2.png 404w, https:\/\/cdn.marketing123.123formbuilder.com\/wp-content\/uploads\/sites\/3\/2021\/12\/errormessage2-300x229.png 300w\" sizes=\"auto, (max-width: 404px) 100vw, 404px\" \/><\/a><\/figure>\n<\/div>","protected":false},"excerpt":{"rendered":"<p>When you enable certain settings on your form, it returns an error message that displays an image. In this article we will illustrate how to replace this image with custom CSS: This image appears when you have enabled certain options such as country filter, IP limitations, accessibility&nbsp;of the form. First, access your form builder account, [&hellip;]<\/p>\n","protected":false},"author":49,"featured_media":-1,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"inline_featured_image":false,"footnotes":""},"categories":[125],"tags":[1032],"class_list":["post-35883","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-css-tricks","tag-replace-image-with-custom-css"],"yoast_head":"<!-- This site is optimized with the Yoast SEO Premium plugin v24.2 (Yoast SEO v27.2) - https:\/\/yoast.com\/product\/yoast-seo-premium-wordpress\/ -->\n<title>Replace error images with custom CSS | 123FormBuilder Docs<\/title>\n<meta name=\"description\" content=\"Learn how to apply custom CSS to replace the image errors on your web forms. Read more in our knowledge base article, on 123FormBuilder.\" \/>\n<meta name=\"robots\" content=\"index, follow, max-snippet:-1, max-image-preview:large, max-video-preview:-1\" \/>\n<link rel=\"canonical\" href=\"https:\/\/123formbuilder.polarbuildingcleaning.net\/docs\/replace-error-images-with-custom-css\/\" \/>\n<meta property=\"og:locale\" content=\"en_US\" \/>\n<meta property=\"og:type\" content=\"article\" \/>\n<meta property=\"og:title\" content=\"Replace error images with custom CSS on 123FormBuilder\" \/>\n<meta property=\"og:description\" content=\"Learn how to apply custom CSS to replace the image errors on your web forms. Read more in our knowledge base article, on 123FormBuilder.\" \/>\n<meta property=\"og:url\" content=\"https:\/\/123formbuilder.polarbuildingcleaning.net\/docs\/replace-error-images-with-custom-css\/\" \/>\n<meta property=\"og:site_name\" content=\"123FormBuilder Knowledge Base\" \/>\n<meta property=\"article:published_time\" content=\"2019-11-11T16:28:56+00:00\" \/>\n<meta property=\"article:modified_time\" content=\"2023-11-24T10:53:23+00:00\" \/>\n<meta property=\"og:image\" content=\"https:\/\/cdn.marketing123.123formbuilder.com\/wp-content\/uploads\/sites\/3\/2021\/12\/ErrorImage.png\" \/>\n<meta name=\"author\" content=\"Julia\" \/>\n<meta name=\"twitter:card\" content=\"summary_large_image\" \/>\n<meta name=\"twitter:label1\" content=\"Written by\" \/>\n\t<meta name=\"twitter:data1\" content=\"Julia\" \/>\n\t<meta name=\"twitter:label2\" content=\"Est. reading time\" \/>\n\t<meta name=\"twitter:data2\" content=\"2 minutes\" \/>\n<!-- \/ Yoast SEO Premium plugin. -->","yoast_head_json":{"title":"Replace error images with custom CSS | 123FormBuilder Docs","description":"Learn how to apply custom CSS to replace the image errors on your web forms. Read more in our knowledge base article, on 123FormBuilder.","robots":{"index":"index","follow":"follow","max-snippet":"max-snippet:-1","max-image-preview":"max-image-preview:large","max-video-preview":"max-video-preview:-1"},"canonical":"https:\/\/123formbuilder.polarbuildingcleaning.net\/docs\/replace-error-images-with-custom-css\/","og_locale":"en_US","og_type":"article","og_title":"Replace error images with custom CSS on 123FormBuilder","og_description":"Learn how to apply custom CSS to replace the image errors on your web forms. Read more in our knowledge base article, on 123FormBuilder.","og_url":"https:\/\/123formbuilder.polarbuildingcleaning.net\/docs\/replace-error-images-with-custom-css\/","og_site_name":"123FormBuilder Knowledge Base","article_published_time":"2019-11-11T16:28:56+00:00","article_modified_time":"2023-11-24T10:53:23+00:00","og_image":[{"url":"https:\/\/cdn.marketing123.123formbuilder.com\/wp-content\/uploads\/sites\/3\/2021\/12\/ErrorImage.png","type":"","width":"","height":""}],"author":"Julia","twitter_card":"summary_large_image","twitter_misc":{"Written by":"Julia","Est. reading time":"2 minutes"},"schema":{"@context":"https:\/\/schema.org","@graph":[{"@type":"Article","@id":"https:\/\/123formbuilder.polarbuildingcleaning.net\/docs\/replace-error-images-with-custom-css\/#article","isPartOf":{"@id":"https:\/\/123formbuilder.polarbuildingcleaning.net\/docs\/replace-error-images-with-custom-css\/"},"author":{"name":"Julia","@id":"https:\/\/123formbuilder.polarbuildingcleaning.net\/docs\/#\/schema\/person\/cc469207f9fad9e280a743a5dc96a843"},"headline":"Replace error images with custom CSS on 123FormBuilder","datePublished":"2019-11-11T16:28:56+00:00","dateModified":"2023-11-24T10:53:23+00:00","mainEntityOfPage":{"@id":"https:\/\/123formbuilder.polarbuildingcleaning.net\/docs\/replace-error-images-with-custom-css\/"},"wordCount":121,"commentCount":0,"image":{"@id":"https:\/\/123formbuilder.polarbuildingcleaning.net\/docs\/replace-error-images-with-custom-css\/#primaryimage"},"thumbnailUrl":"https:\/\/cdn.marketing123.123formbuilder.com\/wp-content\/uploads\/sites\/3\/2021\/12\/ErrorImage.png","keywords":["replace image with custom css"],"articleSection":["CSS Tricks"],"inLanguage":"en-US","potentialAction":[{"@type":"CommentAction","name":"Comment","target":["https:\/\/123formbuilder.polarbuildingcleaning.net\/docs\/replace-error-images-with-custom-css\/#respond"]}]},{"@type":"WebPage","@id":"https:\/\/123formbuilder.polarbuildingcleaning.net\/docs\/replace-error-images-with-custom-css\/","url":"https:\/\/123formbuilder.polarbuildingcleaning.net\/docs\/replace-error-images-with-custom-css\/","name":"Replace error images with custom CSS | 123FormBuilder Docs","isPartOf":{"@id":"https:\/\/123formbuilder.polarbuildingcleaning.net\/docs\/#website"},"primaryImageOfPage":{"@id":"https:\/\/123formbuilder.polarbuildingcleaning.net\/docs\/replace-error-images-with-custom-css\/#primaryimage"},"image":{"@id":"https:\/\/123formbuilder.polarbuildingcleaning.net\/docs\/replace-error-images-with-custom-css\/#primaryimage"},"thumbnailUrl":"https:\/\/cdn.marketing123.123formbuilder.com\/wp-content\/uploads\/sites\/3\/2021\/12\/ErrorImage.png","datePublished":"2019-11-11T16:28:56+00:00","dateModified":"2023-11-24T10:53:23+00:00","author":{"@id":"https:\/\/123formbuilder.polarbuildingcleaning.net\/docs\/#\/schema\/person\/cc469207f9fad9e280a743a5dc96a843"},"description":"Learn how to apply custom CSS to replace the image errors on your web forms. Read more in our knowledge base article, on 123FormBuilder.","breadcrumb":{"@id":"https:\/\/123formbuilder.polarbuildingcleaning.net\/docs\/replace-error-images-with-custom-css\/#breadcrumb"},"inLanguage":"en-US","potentialAction":[{"@type":"ReadAction","target":["https:\/\/123formbuilder.polarbuildingcleaning.net\/docs\/replace-error-images-with-custom-css\/"]}]},{"@type":"ImageObject","inLanguage":"en-US","@id":"https:\/\/123formbuilder.polarbuildingcleaning.net\/docs\/replace-error-images-with-custom-css\/#primaryimage","url":"https:\/\/cdn.marketing123.123formbuilder.com\/wp-content\/uploads\/sites\/3\/2021\/12\/ErrorImage.png","contentUrl":"https:\/\/cdn.marketing123.123formbuilder.com\/wp-content\/uploads\/sites\/3\/2021\/12\/ErrorImage.png"},{"@type":"BreadcrumbList","@id":"https:\/\/123formbuilder.polarbuildingcleaning.net\/docs\/replace-error-images-with-custom-css\/#breadcrumb","itemListElement":[{"@type":"ListItem","position":1,"name":"Home","item":"https:\/\/123formbuilder.polarbuildingcleaning.net\/docs\/"},{"@type":"ListItem","position":2,"name":"Replace error images with custom CSS on 123FormBuilder"}]},{"@type":"WebSite","@id":"https:\/\/123formbuilder.polarbuildingcleaning.net\/docs\/#website","url":"https:\/\/123formbuilder.polarbuildingcleaning.net\/docs\/","name":"123FormBuilder Knowledge Base","description":"Search our documentation platform for answers, service specifications and 3rd-party integrations.","potentialAction":[{"@type":"SearchAction","target":{"@type":"EntryPoint","urlTemplate":"https:\/\/123formbuilder.polarbuildingcleaning.net\/docs\/?s={search_term_string}"},"query-input":{"@type":"PropertyValueSpecification","valueRequired":true,"valueName":"search_term_string"}}],"inLanguage":"en-US"},{"@type":"Person","@id":"https:\/\/123formbuilder.polarbuildingcleaning.net\/docs\/#\/schema\/person\/cc469207f9fad9e280a743a5dc96a843","name":"Julia","image":{"@type":"ImageObject","inLanguage":"en-US","@id":"https:\/\/secure.gravatar.com\/avatar\/1b07bbd30c86170f8eb191468f69aaeab7b6cfddcd35ceaf4099ab76a5dccb06?s=96&d=https%3A%2F%2Fui-avatars.com%2Fapi%2FJulia%2F96%2Ff3f3f3%2Faaa%2F1%2F0.5%2Ffalse%2Ftrue&r=g","url":"https:\/\/secure.gravatar.com\/avatar\/1b07bbd30c86170f8eb191468f69aaeab7b6cfddcd35ceaf4099ab76a5dccb06?s=96&d=https%3A%2F%2Fui-avatars.com%2Fapi%2FJulia%2F96%2Ff3f3f3%2Faaa%2F1%2F0.5%2Ffalse%2Ftrue&r=g","contentUrl":"https:\/\/secure.gravatar.com\/avatar\/1b07bbd30c86170f8eb191468f69aaeab7b6cfddcd35ceaf4099ab76a5dccb06?s=96&d=https%3A%2F%2Fui-avatars.com%2Fapi%2FJulia%2F96%2Ff3f3f3%2Faaa%2F1%2F0.5%2Ffalse%2Ftrue&r=g","caption":"Julia"},"url":"https:\/\/123formbuilder.polarbuildingcleaning.net\/docs\/author\/julia-unguras123formbuilder-com\/"}]}},"_links":{"self":[{"href":"https:\/\/123formbuilder.polarbuildingcleaning.net\/docs\/wp-json\/wp\/v2\/posts\/35883","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/123formbuilder.polarbuildingcleaning.net\/docs\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/123formbuilder.polarbuildingcleaning.net\/docs\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/123formbuilder.polarbuildingcleaning.net\/docs\/wp-json\/wp\/v2\/users\/49"}],"replies":[{"embeddable":true,"href":"https:\/\/123formbuilder.polarbuildingcleaning.net\/docs\/wp-json\/wp\/v2\/comments?post=35883"}],"version-history":[{"count":8,"href":"https:\/\/123formbuilder.polarbuildingcleaning.net\/docs\/wp-json\/wp\/v2\/posts\/35883\/revisions"}],"predecessor-version":[{"id":47958,"href":"https:\/\/123formbuilder.polarbuildingcleaning.net\/docs\/wp-json\/wp\/v2\/posts\/35883\/revisions\/47958"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/123formbuilder.polarbuildingcleaning.net\/docs\/wp-json\/"}],"wp:attachment":[{"href":"https:\/\/123formbuilder.polarbuildingcleaning.net\/docs\/wp-json\/wp\/v2\/media?parent=35883"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/123formbuilder.polarbuildingcleaning.net\/docs\/wp-json\/wp\/v2\/categories?post=35883"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/123formbuilder.polarbuildingcleaning.net\/docs\/wp-json\/wp\/v2\/tags?post=35883"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}