{"id":105473,"date":"2024-11-20T04:11:08","date_gmt":"2024-11-20T03:11:08","guid":{"rendered":"https:\/\/franktielemans.be\/blog\/?page_id=105473"},"modified":"2025-08-20T23:20:50","modified_gmt":"2025-08-20T22:20:50","slug":"inline-form-test2","status":"publish","type":"page","link":"https:\/\/franktielemans.be\/blog\/inline-form-test2\/","title":{"rendered":"inline form test2"},"content":{"rendered":"\t\t<div data-elementor-type=\"wp-page\" data-elementor-id=\"105473\" class=\"elementor elementor-105473\" data-elementor-post-type=\"page\">\n\t\t\t\t<div class=\"elementor-element elementor-element-f402176 e-con-full e-flex e-con e-parent\" data-id=\"f402176\" data-element_type=\"container\" data-e-type=\"container\">\n\t\t<div class=\"elementor-element elementor-element-8854a1c e-con-full e-flex e-con e-child\" data-id=\"8854a1c\" data-element_type=\"container\" data-e-type=\"container\">\n\t\t\t\t<div class=\"elementor-element elementor-element-a8f037a elementor-widget elementor-widget-heading\" data-id=\"a8f037a\" data-element_type=\"widget\" data-e-type=\"widget\" data-widget_type=\"heading.default\">\n\t\t\t\t<div class=\"elementor-widget-container\">\n\t\t\t\t\t<h2 class=\"elementor-heading-title elementor-size-default\">Lets get started<span>.<\/span><\/h2>\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<div class=\"elementor-element elementor-element-8463434 elementor-widget__width-initial elementor-button-align-stretch elementor-widget elementor-widget-form\" data-id=\"8463434\" data-element_type=\"widget\" data-e-type=\"widget\" data-settings=\"{&quot;button_width&quot;:&quot;25&quot;,&quot;step_next_label&quot;:&quot;Next&quot;,&quot;step_previous_label&quot;:&quot;Previous&quot;,&quot;step_type&quot;:&quot;number_text&quot;,&quot;step_icon_shape&quot;:&quot;circle&quot;}\" data-widget_type=\"form.default\">\n\t\t\t\t<div class=\"elementor-widget-container\">\n\t\t\t\t\t\t\t<form class=\"elementor-form\" method=\"post\" name=\"New Form\" aria-label=\"New Form\">\n\t\t\t<input type=\"hidden\" name=\"post_id\" value=\"105473\"\/>\n\t\t\t<input type=\"hidden\" name=\"form_id\" value=\"8463434\"\/>\n\t\t\t<input type=\"hidden\" name=\"referer_title\" value=\"inline form test2\" \/>\n\n\t\t\t\t\t\t\t<input type=\"hidden\" name=\"queried_id\" value=\"105473\"\/>\n\t\t\t\n\t\t\t<div class=\"elementor-form-fields-wrapper elementor-labels-\">\n\t\t\t\t\t\t\t\t<div class=\"elementor-field-type-html elementor-field-group elementor-column elementor-field-group-field_2cd9557 elementor-col-100\">\n\t\t\t\t\t<p>My name is<\/p>\t\t\t\t<\/div>\n\t\t\t\t\t\t\t\t<div class=\"elementor-field-type-text elementor-field-group elementor-column elementor-field-group-name elementor-col-100\">\n\t\t\t\t\t\t\t\t\t\t\t\t<label for=\"form-field-name\" class=\"elementor-field-label elementor-screen-only\">\n\t\t\t\t\t\t\t\tName\t\t\t\t\t\t\t<\/label>\n\t\t\t\t\t\t\t\t\t\t\t\t\t\t<input size=\"1\" type=\"text\" name=\"form_fields[name]\" id=\"form-field-name\" class=\"elementor-field elementor-size-sm  elementor-field-textual\" placeholder=\"your name\">\n\t\t\t\t\t\t\t\t\t\t\t<\/div>\n\t\t\t\t\t\t\t\t<div class=\"elementor-field-type-html elementor-field-group elementor-column elementor-field-group-field_5dc3ede elementor-col-100\">\n\t\t\t\t\t<p>and I have<\/p>\t\t\t\t<\/div>\n\t\t\t\t\t\t\t\t<div class=\"elementor-field-type-text elementor-field-group elementor-column elementor-field-group-what elementor-col-100\">\n\t\t\t\t\t\t\t\t\t\t\t\t<label for=\"form-field-what\" class=\"elementor-field-label elementor-screen-only\">\n\t\t\t\t\t\t\t\twhat\t\t\t\t\t\t\t<\/label>\n\t\t\t\t\t\t\t\t\t\t\t\t\t\t<input size=\"1\" type=\"text\" name=\"form_fields[what]\" id=\"form-field-what\" class=\"elementor-field elementor-size-sm  elementor-field-textual\" placeholder=\"what do you need? \">\n\t\t\t\t\t\t\t\t\t\t\t<\/div>\n\t\t\t\t\t\t\t\t<div class=\"elementor-field-type-html elementor-field-group elementor-column elementor-field-group-field_d3e5fd1 elementor-col-100\">\n\t\t\t\t\t<p>that needs help. <\/p>\t\t\t\t<\/div>\n\t\t\t\t\t\t\t\t<div class=\"elementor-field-type-html elementor-field-group elementor-column elementor-field-group-field_ae1aa63 elementor-col-100\">\n\t\t\t\t\t<p>You can reach me at <\/p>\t\t\t\t<\/div>\n\t\t\t\t\t\t\t\t<div class=\"elementor-field-type-email elementor-field-group elementor-column elementor-field-group-email elementor-col-100\">\n\t\t\t\t\t\t\t\t\t\t\t\t<label for=\"form-field-email\" class=\"elementor-field-label elementor-screen-only\">\n\t\t\t\t\t\t\t\temail\t\t\t\t\t\t\t<\/label>\n\t\t\t\t\t\t\t\t\t\t\t\t\t\t<input size=\"1\" type=\"email\" name=\"form_fields[email]\" id=\"form-field-email\" class=\"elementor-field elementor-size-sm  elementor-field-textual\" placeholder=\"your emailadress\">\n\t\t\t\t\t\t\t\t\t\t\t<\/div>\n\t\t\t\t\t\t\t\t<div class=\"elementor-field-type-html elementor-field-group elementor-column elementor-field-group-field_e914671 elementor-col-100\">\n\t\t\t\t\t<p>to get things started.<\/p>\t\t\t\t<\/div>\n\t\t\t\t\t\t\t\t<div class=\"elementor-field-group elementor-column elementor-field-type-submit elementor-col-25 e-form__buttons\">\n\t\t\t\t\t<button class=\"elementor-button elementor-size-md\" type=\"submit\">\n\t\t\t\t\t\t<span class=\"elementor-button-content-wrapper\">\n\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t<span class=\"elementor-button-text\">- SEND INFO<\/span>\n\t\t\t\t\t\t\t\t\t\t\t\t\t<\/span>\n\t\t\t\t\t<\/button>\n\t\t\t\t<\/div>\n\t\t\t<\/div>\n\t\t<\/form>\n\t\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t<div class=\"elementor-element elementor-element-3098a36 e-flex e-con-boxed e-con e-parent\" data-id=\"3098a36\" data-element_type=\"container\" data-e-type=\"container\">\n\t\t\t\t\t<div class=\"e-con-inner\">\n\t\t\t\t<div class=\"elementor-element elementor-element-6e19f84 elementor-widget elementor-widget-code-highlight\" data-id=\"6e19f84\" data-element_type=\"widget\" data-e-type=\"widget\" data-widget_type=\"code-highlight.default\">\n\t\t\t\t<div class=\"elementor-widget-container\">\n\t\t\t\t\t\t\t<div class=\"prismjs-tomorrow copy-to-clipboard word-wrap\">\n\t\t\t<pre data-line=\"\" class=\"highlight-height language-javascript line-numbers\">\n\t\t\t\t<code readonly=\"true\" class=\"language-javascript\">\n\t\t\t\t\t<xmp>:root {\n\/* define minimum width of the inputfields *\/\n   --min-length: 30\n}\n\n\/* define the width of all HTML fields and adjust the position so it's vertically centered with the input fields*\/\n.elementor-field-type-html {\n    width: fit-content !important;\n    top:5px;\n}\n\n\/* make sure the submit button starts on a new row and add some margin at the top*\/\n.elementor-field-type-submit {\n    width: 100% !important;\n    margin-top: 80px;\n    display: block;\n}\n\n\/* Define the width of the inputfields *\/\n.elementor-field-type-text,\n.elementor-field-type-email\n{\n    width: calc(var(--min-length) * 1ch) !important;\n    flex-grow: 1;\n}\n\n\/* show a background color when you click inside a input field *\/\ninput:focus {\n    background: rgba(255,255,255,0.05) !important;\n}\n\n\/* style the placeholder text (with safari support)*\/\ninput::placeholder,\ninput::-webkit-placeholder\n{\n    color: rgba(255,255,255,0.5) !important;\n    text-transform: uppercase !important;\n    font-size: 14px;\n    font-weight: 200;\n    letter-spacing: 2px\n}<\/xmp>\n\t\t\t\t<\/code>\n\t\t\t<\/pre>\n\t\t<\/div>\n\t\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t","protected":false},"excerpt":{"rendered":"<p>Lets get started. :root { \/* define minimum width of the inputfields *\/ &#8211;min-length: 30 } \/* define the width of all HTML fields and adjust the position so it&#8217;s vertically centered with the input fields*\/ .elementor-field-type-html { width: fit-content !important; top:5px; } \/* make sure the submit button starts on a new row and [&hellip;]<\/p>\n","protected":false},"author":1,"featured_media":0,"parent":0,"menu_order":0,"comment_status":"closed","ping_status":"closed","template":"","meta":{"_oct_exclude_from_cache":false,"footnotes":""},"categories":[],"tags":[],"class_list":["post-105473","page","type-page","status-publish","hentry"],"_links":{"self":[{"href":"https:\/\/franktielemans.be\/blog\/wp-json\/wp\/v2\/pages\/105473","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/franktielemans.be\/blog\/wp-json\/wp\/v2\/pages"}],"about":[{"href":"https:\/\/franktielemans.be\/blog\/wp-json\/wp\/v2\/types\/page"}],"author":[{"embeddable":true,"href":"https:\/\/franktielemans.be\/blog\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/franktielemans.be\/blog\/wp-json\/wp\/v2\/comments?post=105473"}],"version-history":[{"count":66,"href":"https:\/\/franktielemans.be\/blog\/wp-json\/wp\/v2\/pages\/105473\/revisions"}],"predecessor-version":[{"id":109819,"href":"https:\/\/franktielemans.be\/blog\/wp-json\/wp\/v2\/pages\/105473\/revisions\/109819"}],"wp:attachment":[{"href":"https:\/\/franktielemans.be\/blog\/wp-json\/wp\/v2\/media?parent=105473"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/franktielemans.be\/blog\/wp-json\/wp\/v2\/categories?post=105473"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/franktielemans.be\/blog\/wp-json\/wp\/v2\/tags?post=105473"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}