Full Address Form

,

A sleek, user-friendly address form!

  • Captures all essential details (Street, City, State, etc.).
  • Beautifully styled and ready for Glide AI integration.
  • Fully customizable labels, placeholders, and fields.

Images



Tips for Fine-Tuning:

  • Missing labels or placeholders? Send this: “I don’t see labels. Fix them.”
  • Inputs running during typing? Send this: “The input are running when typing. Fix this.”
  • Background color issues? Send this: “Remove the bg color in each input.”

Perfect for seamless user experiences.


— PROMPT —

VARIABLES:
{
  "fieldsDataObject": {
    "globalLabel": null,
    "streetLabel": null,
    "streetPlaceholder": null,
    "street": null,
    "appartmentLabel": null,
    "appartmentPlaceholder": null,
    "appartment": null,
    "cityLabel": null,
    "cityPlaceholder": null,
    "city": null,
    "stateLabel": null,
    "statePlaceholder": null,
    "stateValue": null,
    "zipLabel": null,
    "zipPlaceholder": null,
    "zip": null,
    "countryLabel": null,
    "countryPlaceholder": null,
    "country": null,
	"requiredLabel":null,
	"optionalLabel":null
  },
  "schema": [
    {"name": "globalLabel", "type": "string", "id": "globalLabel"},
    {"name": "street", "type": "string", "id": "street"},
    {"name": "appartment", "type": "string", "id": "appartment"},
    {"name": "city", "type": "string", "id": "city"},
    {"name": "stateValue", "type": "string", "id": "stateValue"},
    {"name": "zip", "type": "string", "id": "zip"},
    {"name": "country", "type": "string", "id": "country"},
    {"name": "streetLabel", "type": "string", "id": "streetLabel"},
    {"name": "appartmentLabel", "type": "string", "id": "appartmentLabel"},
    {"name": "cityLabel", "type": "string", "id": "cityLabel"},
    {"name": "stateLabel", "type": "string", "id": "stateLabel"},
    {"name": "zipLabel", "type": "string", "id": "zipLabel"},
    {"name": "countryLabel", "type": "string", "id": "countryLabel"},
    {"name": "streetPlaceholder", "type": "string", "id": "streetPlaceholder"},
    {"name": "appartmentPlaceholder", "type": "string", "id": "appartmentPlaceholder"},
    {"name": "cityPlaceholder", "type": "string", "id": "cityPlaceholder"},
    {"name": "statePlaceholder", "type": "string", "id": "statePlaceholder"},
    {"name": "zipPlaceholder", "type": "string", "id": "zipPlaceholder"},
    {"name": "countryPlaceholder", "type": "string", "id": "countryPlaceholder"},
    {"name": "requiredLabel", "type": "string", "id": "requiredLabel"},
	{"name": "optionalLabel", "type": "string", "id": "optionalLabel"}
  ]
}

CODE:
Use this code with no modifications. Use the given styling. The component should look exactly the same as what it look in the code below. Make sure variables are correctly mapped to the alpine.js code variables and glide data editor. Labels, values, placeholders, optionalLabel and requiredLabel should work without any problem. The save of each field must be .lazy 300ms.
Don't change styling, it is really important.
Sometimes, the component is not showing the labels and the placeholders... Make sure it works. Also, the AI sometimes add a bg color on fields. Don't do that.

Make sure the script module has finished running before execute the rendering of the html.

```html
<html style="height: auto !important; --color-accent: 208deg 89% 32%;" class="color-scheme-light"><head>
<!-- DO EXACTLY THAT CODE and add all the variables!!! -->
    <link rel="preload" href="https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700&amp;display=swap" as="style">
    <link rel="stylesheet" href="https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700&amp;display=swap">
    <meta name="color-scheme" content="light dark">
    <style>
      html, body {
        font-family: 'Inter', sans-serif;
        background-color: transparent;
      }
    </style>
    <script type="module">
      import { init } from "https://components.glide.info/shell/v1.js";
	  // Don't forget to add the variables.
      document.addEventListener("DOMContentLoaded", () => {init({"fieldsDataObject":{"globalLabel":null,"streetLabel":null,"streetPlaceholder":null,"street":null,"appartmentLabel":null,"appartmentPlaceholder":null,"appartment":null,"cityLabel":null,"cityPlaceholder":null,"city":null,"stateLabel":null,"statePlaceholder":null,"stateValue":null,"zipLabel":null,"zipPlaceholder":null,"zip":null,"countryLabel":null,"countryPlaceholder":null,"country":null},"schema":[{"name":"globalLabel","type":"string","id":"globalLabel"},{"name":"street","type":"string","id":"street"},{"name":"appartment","type":"string","id":"appartment"},{"name":"city","type":"string","id":"city"},{"name":"stateValue","type":"string","id":"stateValue"},{"name":"zip","type":"string","id":"zip"},{"name":"country","type":"string","id":"country"},{"name":"streetLabel","type":"string","id":"streetLabel"},{"name":"appartmentLabel","type":"string","id":"appartmentLabel"},{"name":"cityLabel","type":"string","id":"cityLabel"},{"name":"stateLabel","type":"string","id":"stateLabel"},{"name":"zipLabel","type":"string","id":"zipLabel"},{"name":"countryLabel","type":"string","id":"countryLabel"},{"name":"streetPlaceholder","type":"string","id":"streetPlaceholder"},{"name":"appartmentPlaceholder","type":"string","id":"appartmentPlaceholder"},{"name":"cityPlaceholder","type":"string","id":"cityPlaceholder"},{"name":"statePlaceholder","type":"string","id":"statePlaceholder"},{"name":"zipPlaceholder","type":"string","id":"zipPlaceholder"},{"name":"countryPlaceholder","type":"string","id":"countryPlaceholder"}],"actions":[],"debug":false})});
    </script>
    <style>/*! tailwindcss v3.4.10 | MIT License | https://tailwindcss.com*/*,:after,:before{border-color:hsl(var(--color-gray-200)/1);border-style:solid;border-width:0;box-sizing:border-box}:after,:before{--tw-content:""}:host,html{line-height:1.5;-webkit-text-size-adjust:100%;font-family:ui-sans-serif,system-ui,sans-serif,Apple Color Emoji,Segoe UI Emoji,Segoe UI Symbol,Noto Color Emoji;font-feature-settings:normal;font-variation-settings:normal;-moz-tab-size:4;tab-size:4;-webkit-tap-highlight-color:transparent}body{line-height:inherit;margin:0}hr{border-top-width:1px;color:inherit;height:0}abbr:where([title]){text-decoration:underline dotted}h1,h2,h3,h4,h5,h6{font-size:inherit;font-weight:inherit}a{color:inherit;text-decoration:inherit}b,strong{font-weight:bolder}code,kbd,pre,samp{font-family:ui-monospace,SFMono-Regular,Menlo,Monaco,Consolas,Liberation Mono,Courier New,monospace;font-feature-settings:normal;font-size:1em;font-variation-settings:normal}small{font-size:80%}sub,sup{font-size:75%;line-height:0;position:relative;vertical-align:baseline}sub{bottom:-.25em}sup{top:-.5em}table{border-collapse:collapse;border-color:inherit;text-indent:0}button,input,optgroup,select,textarea{color:inherit;font-family:inherit;font-feature-settings:inherit;font-size:100%;font-variation-settings:inherit;font-weight:inherit;letter-spacing:inherit;line-height:inherit;margin:0;padding:0}button,select{text-transform:none}button,input:where([type=button]),input:where([type=reset]),input:where([type=submit]){-webkit-appearance:button;background-color:transparent;background-image:none}:-moz-focusring{outline:auto}:-moz-ui-invalid{box-shadow:none}progress{vertical-align:baseline}::-webkit-inner-spin-button,::-webkit-outer-spin-button{height:auto}[type=search]{-webkit-appearance:textfield;outline-offset:-2px}::-webkit-search-decoration{-webkit-appearance:none}::-webkit-file-upload-button{-webkit-appearance:button;font:inherit}summary{display:list-item}blockquote,dd,dl,figure,h1,h2,h3,h4,h5,h6,hr,p,pre{margin:0}fieldset{margin:0}fieldset,legend{padding:0}menu,ol,ul{list-style:none;margin:0;padding:0}dialog{padding:0}textarea{resize:vertical}input::placeholder,textarea::placeholder{color:hsl(var(--color-gray-400)/1);opacity:1}[role=button],button{cursor:pointer}:disabled{cursor:default}audio,canvas,embed,iframe,img,object,svg,video{display:block;vertical-align:middle}img,video{height:auto;max-width:100%}[hidden]{display:none}*,:after,:before{--tw-border-spacing-x:0;--tw-border-spacing-y:0;--tw-translate-x:0;--tw-translate-y:0;--tw-rotate:0;--tw-skew-x:0;--tw-skew-y:0;--tw-scale-x:1;--tw-scale-y:1;--tw-pan-x: ;--tw-pan-y: ;--tw-pinch-zoom: ;--tw-scroll-snap-strictness:proximity;--tw-gradient-from-position: ;--tw-gradient-via-position: ;--tw-gradient-to-position: ;--tw-ordinal: ;--tw-slashed-zero: ;--tw-numeric-figure: ;--tw-numeric-spacing: ;--tw-numeric-fraction: ;--tw-ring-inset: ;--tw-ring-offset-width:0px;--tw-ring-offset-color:#fff;--tw-ring-color:rgba(59,130,246,.5);--tw-ring-offset-shadow:0 0 #0000;--tw-ring-shadow:0 0 #0000;--tw-shadow:0 0 #0000;--tw-shadow-colored:0 0 #0000;--tw-blur: ;--tw-brightness: ;--tw-contrast: ;--tw-grayscale: ;--tw-hue-rotate: ;--tw-invert: ;--tw-saturate: ;--tw-sepia: ;--tw-drop-shadow: ;--tw-backdrop-blur: ;--tw-backdrop-brightness: ;--tw-backdrop-contrast: ;--tw-backdrop-grayscale: ;--tw-backdrop-hue-rotate: ;--tw-backdrop-invert: ;--tw-backdrop-opacity: ;--tw-backdrop-saturate: ;--tw-backdrop-sepia: ;--tw-contain-size: ;--tw-contain-layout: ;--tw-contain-paint: ;--tw-contain-style: }::backdrop{--tw-border-spacing-x:0;--tw-border-spacing-y:0;--tw-translate-x:0;--tw-translate-y:0;--tw-rotate:0;--tw-skew-x:0;--tw-skew-y:0;--tw-scale-x:1;--tw-scale-y:1;--tw-pan-x: ;--tw-pan-y: ;--tw-pinch-zoom: ;--tw-scroll-snap-strictness:proximity;--tw-gradient-from-position: ;--tw-gradient-via-position: ;--tw-gradient-to-position: ;--tw-ordinal: ;--tw-slashed-zero: ;--tw-numeric-figure: ;--tw-numeric-spacing: ;--tw-numeric-fraction: ;--tw-ring-inset: ;--tw-ring-offset-width:0px;--tw-ring-offset-color:#fff;--tw-ring-color:rgba(59,130,246,.5);--tw-ring-offset-shadow:0 0 #0000;--tw-ring-shadow:0 0 #0000;--tw-shadow:0 0 #0000;--tw-shadow-colored:0 0 #0000;--tw-blur: ;--tw-brightness: ;--tw-contrast: ;--tw-grayscale: ;--tw-hue-rotate: ;--tw-invert: ;--tw-saturate: ;--tw-sepia: ;--tw-drop-shadow: ;--tw-backdrop-blur: ;--tw-backdrop-brightness: ;--tw-backdrop-contrast: ;--tw-backdrop-grayscale: ;--tw-backdrop-hue-rotate: ;--tw-backdrop-invert: ;--tw-backdrop-opacity: ;--tw-backdrop-saturate: ;--tw-backdrop-sepia: ;--tw-contain-size: ;--tw-contain-layout: ;--tw-contain-paint: ;--tw-contain-style: }.headline-lg,.headline-md,.headline-sm,.headline-xl,.headline-xs{font-weight:600}.headline-md{font-size:1.5rem;letter-spacing:-.025em;line-height:2rem;line-height:1.375}.body-base{font-size:1rem;line-height:1.5rem;line-height:1.5}@media (min-width:768px){.body-base{font-size:.875rem;line-height:1.25rem}}.mb-2{margin-bottom:.5rem}.mb-4{margin-bottom:1rem}.block{display:block}.flex{display:flex}.grid{display:grid}.w-full{width:100%}.cursor-pointer{cursor:pointer}.grid-cols-1{grid-template-columns:repeat(1,minmax(0,1fr))}.justify-between{justify-content:space-between}.gap-5{gap:1.25rem}.space-y-5>:not([hidden])~:not([hidden]){--tw-space-y-reverse:0;margin-bottom:calc(1.25rem*var(--tw-space-y-reverse));margin-top:calc(1.25rem*(1 - var(--tw-space-y-reverse)))}.space-y-6>:not([hidden])~:not([hidden]){--tw-space-y-reverse:0;margin-bottom:calc(1.5rem*var(--tw-space-y-reverse));margin-top:calc(1.5rem*(1 - var(--tw-space-y-reverse)))}.rounded-lg{border-radius:.5rem}.border{border-width:1px}.border-gray-300{--tw-border-opacity:1;border-color:hsl(var(--color-gray-300)/var(--tw-border-opacity))}.px-3{padding-left:.75rem;padding-right:.75rem}.px-4{padding-left:1rem;padding-right:1rem}.px-8{padding-left:2rem;padding-right:2rem}.py-1{padding-bottom:.25rem;padding-top:.25rem}.py-2\.5{padding-bottom:.625rem;padding-top:.625rem}.text-sm{font-size:.875rem;line-height:1.25rem}.text-xs{font-size:.75rem;line-height:1rem}.font-normal{font-weight:400}.font-semibold{font-weight:600}.text-gray-500{--tw-text-opacity:1;color:hsl(var(--color-gray-500)/var(--tw-text-opacity))}.text-gray-900{--tw-text-opacity:1;color:hsl(var(--color-gray-900)/var(--tw-text-opacity))}.antialiased{-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale}.\@container{container-type:inline-size}@layer colors{:root.color-scheme-auto{--color-gray-0:0deg 0% 100%;--color-gray-50:0deg 0% 98%;--color-gray-100:0deg 0% 96%;--color-gray-200:0deg 0% 94%;--color-gray-300:0deg 0% 88%;--color-gray-400:0deg 0% 68%;--color-gray-500:0deg 0% 56%;--color-gray-600:0deg 0% 44%;--color-gray-700:0deg 0% 31%;--color-gray-800:0deg 0% 20%;--color-gray-900:0deg 0% 5%;--color-gray-950:0deg 0% 0%;--color-background-DEFAULT:0deg 0% 100%;@media (prefers-color-scheme:dark){--color-gray-0:0deg 0% 4%;--color-gray-50:0deg 0% 9%;--color-gray-100:0deg 0% 12%;--color-gray-200:0deg 0% 15%;--color-gray-300:0deg 0% 20%;--color-gray-400:0deg 0% 31%;--color-gray-500:0deg 0% 44%;--color-gray-600:0deg 0% 57%;--color-gray-700:0deg 0% 72%;--color-gray-800:0deg 0% 90%;--color-gray-900:0deg 0% 100%;--color-gray-950:0deg 0% 100%;--color-background-DEFAULT:0deg 0% 9%}}:root.color-scheme-light{color-scheme:light;--color-gray-0:0deg 0% 100%;--color-gray-50:0deg 0% 98%;--color-gray-100:0deg 0% 96%;--color-gray-200:0deg 0% 94%;--color-gray-300:0deg 0% 88%;--color-gray-400:0deg 0% 68%;--color-gray-500:0deg 0% 56%;--color-gray-600:0deg 0% 44%;--color-gray-700:0deg 0% 31%;--color-gray-800:0deg 0% 20%;--color-gray-900:0deg 0% 5%;--color-gray-950:0deg 0% 0%;--color-background-DEFAULT:0deg 0% 100%}:root.color-scheme-dark{color-scheme:dark;--color-gray-0:0deg 0% 4%;--color-gray-50:0deg 0% 9%;--color-gray-100:0deg 0% 12%;--color-gray-200:0deg 0% 15%;--color-gray-300:0deg 0% 20%;--color-gray-400:0deg 0% 31%;--color-gray-500:0deg 0% 44%;--color-gray-600:0deg 0% 57%;--color-gray-700:0deg 0% 72%;--color-gray-800:0deg 0% 90%;--color-gray-900:0deg 0% 100%;--color-gray-950:0deg 0% 100%;--color-background-DEFAULT:0deg 0% 9%}}.focus\:outline-none:focus{outline:2px solid transparent;outline-offset:2px}.focus\:ring-2:focus{--tw-ring-offset-shadow:var(--tw-ring-inset) 0 0 0 var(--tw-ring-offset-width) var(--tw-ring-offset-color);--tw-ring-shadow:var(--tw-ring-inset) 0 0 0 calc(2px + var(--tw-ring-offset-width)) var(--tw-ring-color);box-shadow:var(--tw-ring-offset-shadow),var(--tw-ring-shadow),var(--tw-shadow,0 0 #0000)}.focus\:ring-accent:focus{--tw-ring-opacity:1;--tw-ring-color:hsl(var(--color-accent)/var(--tw-ring-opacity))}@media (min-width:640px){.sm\:grid-cols-2{grid-template-columns:repeat(2,minmax(0,1fr))}.sm\:px-5{padding-left:1.25rem;padding-right:1.25rem}}@media (min-width:768px){.md\:px-6{padding-left:1.5rem;padding-right:1.5rem}}@media (min-width:1024px){.lg\:px-7{padding-left:1.75rem;padding-right:1.75rem}}@media (min-width:1280px){.xl\:px-8{padding-left:2rem;padding-right:2rem}}</style>
  </head>
  <body x-cloak x-data="state" class="" :class="{ 'cursor-pointer': hasBodyAction }" style="height: auto !important;" data-iframe-overflow="">
    <div x-show="themeLoaded" class="@container w-full body-base antialiased">
      <div :class="{ 'px-4 py-1 sm:px-5 md:px-6 lg:px-7 xl:px-8': mode === 'standalone' }" class="px-4 py-1 sm:px-5 md:px-6 lg:px-7 xl:px-8">
        <fieldset class="w-full space-y-6">
        <!-- Global label for the address form -->
        <legend class="headline-md text-gray-900 mb-4" x-text="globalLabel"></legend>
      
        <div class="space-y-5">
          <!-- Street address input -->
          <div>
            <label for="street" class="block text-sm font-semibold text-gray-900 mb-2 flex justify-between">
              <span x-text="streetLabel">Numéro et rue</span> <span class="text-xs font-normal text-gray-500" x-text="requiredLabel"></span>
            </label>
            <input type="text" id="street" x-model.lazy="street" class="w-full px-3 py-2.5 text-gray-900 rounded-lg border border-gray-300 focus:outline-none focus:ring-2 focus:ring-accent" x-bind:placeholder="streetPlaceholder">
          </div>
      
          <!-- Apartment number input (optional) -->
          <div>
            <label for="appartment" class="block text-sm font-semibold text-gray-900 mb-2 flex justify-between">
              <span x-text="appartmentLabel"></span> <span class="text-xs font-normal text-gray-500" x-text="optionalLabel></span>
            </label>
            <input type="text" id="appartment" x-model.lazy="appartment" class="w-full px-3 py-2.5 text-gray-900 rounded-lg border border-gray-300 focus:outline-none focus:ring-2 focus:ring-accent" x-bind:placeholder="appartmentPlaceholder">
          </div>
      
          <!-- City and State inputs -->
          <div class="grid grid-cols-1 sm:grid-cols-2 gap-5">
            <!-- City input -->
            <div>
              <label for="city" class="block text-sm font-semibold text-gray-900 mb-2 flex justify-between">
                <span x-text="cityLabel"></span> <span class="text-xs font-normal text-gray-500" x-text="requiredLabel"></span>
              </label>
              <input type="text" id="city" x-model.lazy="city" class="w-full px-3 py-2.5 text-gray-900 rounded-lg border border-gray-300 focus:outline-none focus:ring-2 focus:ring-accent" x-bind:placeholder="cityPlaceholder">
            </div>
            <!-- State input -->
            <div>
              <label for="stateValue" class="block text-sm font-semibold text-gray-900 mb-2 flex justify-between">
                <span x-text="stateLabel"></span> <span class="text-xs font-normal text-gray-500" x-text="requiredLabel"></span>
              </label>
              <input type="text" id="stateValue" x-model.lazy="stateValue" class="w-full px-3 py-2.5 text-gray-900 rounded-lg border border-gray-300 focus:outline-none focus:ring-2 focus:ring-accent" x-bind:placeholder="statePlaceholder">
            </div>
          </div>
      
          <!-- Postal Code and Country inputs -->
          <div class="grid grid-cols-1 sm:grid-cols-2 gap-5">
            <!-- Postal Code input -->
            <div>
              <label for="zip" class="block text-sm font-semibold text-gray-900 mb-2 flex justify-between">
                <span x-text="zipLabel"></span> <span class="text-xs font-normal text-gray-500" x-text="requiredLabel"></span>
              </label>
              <input type="text" id="zip" x-model.lazy="zip" class="w-full px-3 py-2.5 text-gray-900 rounded-lg border border-gray-300 focus:outline-none focus:ring-2 focus:ring-accent" x-bind:placeholder="zipPlaceholder">
            </div>
            <!-- Country input -->
            <div>
              <label for="country" class="block text-sm font-semibold text-gray-900 mb-2 flex justify-between">
                <span x-text="countryLabel"></span> <span class="text-xs font-normal text-gray-500" x-text="requiredLabel"></span>
              </label>
              <input type="text" id="country" x-model.lazy="country" class="w-full px-3 py-2.5 text-gray-900 rounded-lg border border-gray-300 focus:outline-none focus:ring-2 focus:ring-accent" x-bind:placeholder="countryPlaceholder">
            </div>
          </div>
        </div>
      </fieldset>
      </div>
    </div>
  
  <script src="//cdn.jsdelivr.net/npm/@iframe-resizer/child@5.2.1"></script>
<div style="clear: both; display: block; height: 0px;"></div></body></html>
Also available here:
2 Likes

This looks neat, but this could be achieved natively through text entry components in a container. That would be much easier. However, you could add additional functionality like auto-fill address from another database through AI-Component.

1 Like

The goal of that ai component is to be ready to go

1 Like

Well, and do the validation yourself. It certainly is friendly, but you have to know what you’re doing to use these stuff effectively.

2 Likes