{"id":33370,"date":"2025-08-18T17:34:32","date_gmt":"2025-08-18T11:34:32","guid":{"rendered":"https:\/\/hasthemes.com\/?post_type=docs&#038;p=33370"},"modified":"2025-08-24T14:40:49","modified_gmt":"2025-08-24T08:40:49","password":"","slug":"how-to-use-the-website-field-in-ht-contact-form","status":"publish","type":"docs","link":"https:\/\/hasthemes.com\/docs\/how-to-use-the-website-field-in-ht-contact-form\/","title":{"rendered":"How to Use the Website Field in HT Contact Form"},"content":{"rendered":"\n<p>Learn how to add and configure the Website URL field in HT Contact Form. This guide covers field settings, built-in URL validation, conditional logic, and practical use cases to help you effectively collect valid website links from users.<\/p>\n\n\n\n<h2 class=\"wp-block-heading\">How to Add the Website Field<\/h2>\n\n\n\n<ul class=\"wp-block-list\">\n<li>Navigate to your WordPress Dashboard and go to <strong>HT Contact Form &gt; Forms<\/strong>.<\/li>\n\n\n\n<li>Open an existing form or create a new one.<\/li>\n\n\n\n<li>From the <strong>Fields<\/strong> panel on the left, drag the <strong>Website URL<\/strong> field into your form layout.<\/li>\n\n\n\n<li>Click on the newly added field to configure its options under the <strong>Field Settings<\/strong> tab.<\/li>\n<\/ul>\n\n\n\n<figure class=\"wp-block-image size-large\"><img fetchpriority=\"high\" decoding=\"async\" width=\"1024\" height=\"569\" src=\"https:\/\/hasthemes.com\/wp-content\/uploads\/2025\/08\/ht-contact-form-website-url-canvas-1024x569.png\" alt=\"\" class=\"wp-image-33372\" srcset=\"https:\/\/hasthemes.com\/wp-content\/uploads\/2025\/08\/ht-contact-form-website-url-canvas-1024x569.png 1024w, https:\/\/hasthemes.com\/wp-content\/uploads\/2025\/08\/ht-contact-form-website-url-canvas-300x167.png 300w, https:\/\/hasthemes.com\/wp-content\/uploads\/2025\/08\/ht-contact-form-website-url-canvas-768x427.png 768w, https:\/\/hasthemes.com\/wp-content\/uploads\/2025\/08\/ht-contact-form-website-url-canvas-1536x853.png 1536w, https:\/\/hasthemes.com\/wp-content\/uploads\/2025\/08\/ht-contact-form-website-url-canvas-360x200.png 360w, https:\/\/hasthemes.com\/wp-content\/uploads\/2025\/08\/ht-contact-form-website-url-canvas.png 1593w\" sizes=\"(max-width: 1024px) 100vw, 1024px\" \/><\/figure>\n\n\n\n<div style=\"height:30px\" aria-hidden=\"true\" class=\"wp-block-spacer\"><\/div>\n\n\n\n<h2 class=\"wp-block-heading\">Available Settings<\/h2>\n\n\n\n<ul class=\"wp-block-list\">\n<li><strong>Admin Label<\/strong>: Internal name for identification. Example: <code>URL<\/code><\/li>\n\n\n\n<li><strong>Field Label<\/strong>: The label displayed on the frontend. Example: <code>URL<\/code><\/li>\n\n\n\n<li><strong>Label Position<\/strong>: Set the position (Default, Top, Left, etc.)<\/li>\n\n\n\n<li><strong>Hide Label<\/strong>: Toggle ON to hide the field label on the frontend.<\/li>\n\n\n\n<li><strong>Placeholder Text<\/strong>: Add a sample URL (e.g., <code>https:\/\/example.com<\/code>) to guide users.<\/li>\n\n\n\n<li><strong>Required<\/strong>: Make the field mandatory by toggling this ON.<\/li>\n\n\n\n<li><strong>Validate URL<\/strong>: Toggle ON to ensure the input is a valid URL format.<\/li>\n\n\n\n<li><strong>URL Validation Error Message<\/strong>: Custom error message shown if the URL is invalid. Default: <code>This field must contain a valid URL<\/code><\/li>\n\n\n\n<li><strong>Default Value<\/strong>: Pre-fill the field with a default URL if needed.<\/li>\n\n\n\n<li><strong>Field Size<\/strong>: Choose from Small, Medium, or Large for field width.<\/li>\n\n\n\n<li><strong>Field Class<\/strong>: Add a custom CSS class for styling.<\/li>\n\n\n\n<li><strong>Help Message<\/strong>: Display additional instructions.<\/li>\n\n\n\n<li><strong>Message Position<\/strong>: Choose where the help or error message appears (Default, Top, Bottom).<\/li>\n\n\n\n<li><strong>Prefix Label \/ Suffix Label<\/strong>: Add labels before or after the input box (optional).<\/li>\n\n\n\n<li><strong>Name Attribute<\/strong>: The <code>name<\/code> attribute for backend processing. Example: <code>url<\/code><\/li>\n<\/ul>\n\n\n\n<figure class=\"wp-block-image size-large\"><img decoding=\"async\" width=\"1024\" height=\"638\" src=\"https:\/\/hasthemes.com\/wp-content\/uploads\/2025\/08\/ht-contact-form-website-filed-settings1-1024x638.png\" alt=\"\" class=\"wp-image-33376\" srcset=\"https:\/\/hasthemes.com\/wp-content\/uploads\/2025\/08\/ht-contact-form-website-filed-settings1-1024x638.png 1024w, https:\/\/hasthemes.com\/wp-content\/uploads\/2025\/08\/ht-contact-form-website-filed-settings1-300x187.png 300w, https:\/\/hasthemes.com\/wp-content\/uploads\/2025\/08\/ht-contact-form-website-filed-settings1-768x479.png 768w, https:\/\/hasthemes.com\/wp-content\/uploads\/2025\/08\/ht-contact-form-website-filed-settings1-360x224.png 360w, https:\/\/hasthemes.com\/wp-content\/uploads\/2025\/08\/ht-contact-form-website-filed-settings1.png 1431w\" sizes=\"(max-width: 1024px) 100vw, 1024px\" \/><\/figure>\n\n\n\n<div style=\"height:30px\" aria-hidden=\"true\" class=\"wp-block-spacer\"><\/div>\n\n\n\n<h2 class=\"wp-block-heading\">Conditional Logic<\/h2>\n\n\n\n<p>You can control when this field appears using conditional logic.<\/p>\n\n\n\n<ul class=\"wp-block-list\">\n<li><strong>Enable Condition<\/strong>: <br>Toggle ON to set up display rules.<\/li>\n\n\n\n<li><strong>Conditional Match<\/strong>:<br><strong>All<\/strong>: All defined conditions must be true<br><strong>Any<\/strong>: At least one condition must be true<\/li>\n\n\n\n<li><strong>Set Rules<\/strong>:<br>Define rules based on other fields.<\/li>\n\n\n\n<li><em>Example:<\/em><\/li>\n\n\n\n<li>Field: <strong>Job Title<\/strong><\/li>\n\n\n\n<li>Condition: <strong>equal to<\/strong><\/li>\n\n\n\n<li>Value: <strong>Developer<\/strong><\/li>\n<\/ul>\n\n\n\n<figure class=\"wp-block-image size-large\"><img decoding=\"async\" width=\"1024\" height=\"637\" src=\"https:\/\/hasthemes.com\/wp-content\/uploads\/2025\/08\/ht-contact-form-website-url-logic-1024x637.png\" alt=\"\" class=\"wp-image-33377\" srcset=\"https:\/\/hasthemes.com\/wp-content\/uploads\/2025\/08\/ht-contact-form-website-url-logic-1024x637.png 1024w, https:\/\/hasthemes.com\/wp-content\/uploads\/2025\/08\/ht-contact-form-website-url-logic-300x187.png 300w, https:\/\/hasthemes.com\/wp-content\/uploads\/2025\/08\/ht-contact-form-website-url-logic-768x478.png 768w, https:\/\/hasthemes.com\/wp-content\/uploads\/2025\/08\/ht-contact-form-website-url-logic-360x224.png 360w, https:\/\/hasthemes.com\/wp-content\/uploads\/2025\/08\/ht-contact-form-website-url-logic.png 1433w\" sizes=\"(max-width: 1024px) 100vw, 1024px\" \/><\/figure>\n\n\n\n<div style=\"height:30px\" aria-hidden=\"true\" class=\"wp-block-spacer\"><\/div>\n\n\n\n<h2 class=\"wp-block-heading\">Example Use Case<\/h2>\n\n\n\n<p>Use the Website Field to collect a visitor's personal or business website URL. It's especially useful for applications, contact forms, or partnership requests. With conditional logic enabled, you can show this field only if the user answers &#8220;Yes&#8221; to a question like <em>&#8220;Do you have a website?&#8221;<\/em><\/p>\n","protected":false},"excerpt":{"rendered":"<p>Learn how to add and configure the Website URL field in HT Contact Form. This guide covers field settings, built-in URL validation, conditional logic, and practical use cases to help you effectively collect valid website links from users. How to Add the Website Field Available Settings Conditional Logic You can control when this field appears [&hellip;]<\/p>\n","protected":false},"author":22,"featured_media":0,"comment_status":"closed","ping_status":"closed","template":"","meta":{"_uag_custom_page_level_css":"","_mi_skip_tracking":false,"site-sidebar-layout":"default","site-content-layout":"","ast-site-content-layout":"default","site-content-style":"default","site-sidebar-style":"default","ast-global-header-display":"","ast-banner-title-visibility":"","ast-main-header-display":"","ast-hfb-above-header-display":"","ast-hfb-below-header-display":"","ast-hfb-mobile-header-display":"","site-post-title":"","ast-breadcrumbs-content":"","ast-featured-img":"","footer-sml-layout":"","theme-transparent-header-meta":"","adv-header-id-meta":"","stick-header-meta":"","header-above-stick-meta":"","header-main-stick-meta":"","header-below-stick-meta":"","astra-migrate-meta-layouts":"set","ast-page-background-enabled":"default","ast-page-background-meta":{"desktop":{"background-color":"var(--ast-global-color-4)","background-image":"","background-repeat":"repeat","background-position":"center center","background-size":"auto","background-attachment":"scroll","background-type":"","background-media":"","overlay-type":"","overlay-color":"","overlay-opacity":"","overlay-gradient":""},"tablet":{"background-color":"","background-image":"","background-repeat":"repeat","background-position":"center center","background-size":"auto","background-attachment":"scroll","background-type":"","background-media":"","overlay-type":"","overlay-color":"","overlay-opacity":"","overlay-gradient":""},"mobile":{"background-color":"","background-image":"","background-repeat":"repeat","background-position":"center center","background-size":"auto","background-attachment":"scroll","background-type":"","background-media":"","overlay-type":"","overlay-color":"","overlay-opacity":"","overlay-gradient":""}},"ast-content-background-meta":{"desktop":{"background-color":"var(--ast-global-color-5)","background-image":"","background-repeat":"repeat","background-position":"center center","background-size":"auto","background-attachment":"scroll","background-type":"","background-media":"","overlay-type":"","overlay-color":"","overlay-opacity":"","overlay-gradient":""},"tablet":{"background-color":"var(--ast-global-color-5)","background-image":"","background-repeat":"repeat","background-position":"center center","background-size":"auto","background-attachment":"scroll","background-type":"","background-media":"","overlay-type":"","overlay-color":"","overlay-opacity":"","overlay-gradient":""},"mobile":{"background-color":"var(--ast-global-color-5)","background-image":"","background-repeat":"repeat","background-position":"center center","background-size":"auto","background-attachment":"scroll","background-type":"","background-media":"","overlay-type":"","overlay-color":"","overlay-opacity":"","overlay-gradient":""}},"footnotes":""},"doc_category":[259],"doc_tag":[],"class_list":["post-33370","docs","type-docs","status-publish","hentry","doc_category-ht-contact-forms"],"acf":[],"year_month":"2025-11","word_count":371,"total_views":"175","reactions":{"happy":"0","normal":"0","sad":"0"},"author_info":{"name":"Saidul","author_nicename":"saidul","author_url":"https:\/\/hasthemes.com\/author\/saidul\/"},"doc_category_info":[{"term_name":"HT Contact Forms","term_url":"https:\/\/hasthemes.com\/docs-category\/ht-contact-forms\/"}],"doc_tag_info":[],"uagb_featured_image_src":{"full":false,"thumbnail":false,"medium":false,"medium_large":false,"large":false,"1536x1536":false,"2048x2048":false,"htmega_size_585x295":false,"htmega_size_1170x536":false,"htmega_size_396x360":false,"betterdocs-category-thumb":false},"uagb_author_info":{"display_name":"Saidul","author_link":"https:\/\/hasthemes.com\/author\/saidul\/"},"uagb_comment_info":0,"uagb_excerpt":"Learn how to add and configure the Website URL field in HT Contact Form. This guide covers field settings, built-in URL validation, conditional logic, and practical use cases to help you effectively collect valid website links from users. How to Add the Website Field Available Settings Conditional Logic You can control when this field appears&hellip;","knowledge_base_info":[],"knowledge_base_slug":[],"_links":{"self":[{"href":"https:\/\/hasthemes.com\/wp-json\/wp\/v2\/docs\/33370","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/hasthemes.com\/wp-json\/wp\/v2\/docs"}],"about":[{"href":"https:\/\/hasthemes.com\/wp-json\/wp\/v2\/types\/docs"}],"author":[{"embeddable":true,"href":"https:\/\/hasthemes.com\/wp-json\/wp\/v2\/users\/22"}],"replies":[{"embeddable":true,"href":"https:\/\/hasthemes.com\/wp-json\/wp\/v2\/comments?post=33370"}],"version-history":[{"count":8,"href":"https:\/\/hasthemes.com\/wp-json\/wp\/v2\/docs\/33370\/revisions"}],"predecessor-version":[{"id":33543,"href":"https:\/\/hasthemes.com\/wp-json\/wp\/v2\/docs\/33370\/revisions\/33543"}],"wp:attachment":[{"href":"https:\/\/hasthemes.com\/wp-json\/wp\/v2\/media?parent=33370"}],"wp:term":[{"taxonomy":"doc_category","embeddable":true,"href":"https:\/\/hasthemes.com\/wp-json\/wp\/v2\/doc_category?post=33370"},{"taxonomy":"doc_tag","embeddable":true,"href":"https:\/\/hasthemes.com\/wp-json\/wp\/v2\/doc_tag?post=33370"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}