sqr.co Open in urlscan Pro
199.192.27.4  Public Scan

Form analysis
1 forms found in the DOM

POST https://sqr.co/qr-code-create

<form id="form" action="https://sqr.co/qr-code-create" method="post" role="form" enctype="multipart/form-data">
  <input type="hidden" name="token" value="572ba5f699d7af1ad9e335f0d1941dbc">
  <input type="hidden" name="api_key" value="">
  <input type="hidden" name="type" value="url">
  <input type="hidden" name="reload" value="" data-reload-qr-code="">
  <input type="hidden" name="is_readable" value="">
  <div class="notification-container"></div>
  <div>
    <div class="form-group" data-type="url" data-url="">
      <label for="url"><svg class="svg-inline--fa fa-link fa-fw fa-sm text-muted mr-1" aria-hidden="true" focusable="false" data-prefix="fas" data-icon="link" role="img" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 640 512" data-fa-i2svg="">
          <path fill="currentColor"
            d="M579.8 267.7c56.5-56.5 56.5-148 0-204.5c-50-50-128.8-56.5-186.3-15.4l-1.6 1.1c-14.4 10.3-17.7 30.3-7.4 44.6s30.3 17.7 44.6 7.4l1.6-1.1c32.1-22.9 76-19.3 103.8 8.6c31.5 31.5 31.5 82.5 0 114L422.3 334.8c-31.5 31.5-82.5 31.5-114 0c-27.9-27.9-31.5-71.8-8.6-103.8l1.1-1.6c10.3-14.4 6.9-34.4-7.4-44.6s-34.4-6.9-44.6 7.4l-1.1 1.6C206.5 251.2 213 330 263 380c56.5 56.5 148 56.5 204.5 0L579.8 267.7zM60.2 244.3c-56.5 56.5-56.5 148 0 204.5c50 50 128.8 56.5 186.3 15.4l1.6-1.1c14.4-10.3 17.7-30.3 7.4-44.6s-30.3-17.7-44.6-7.4l-1.6 1.1c-32.1 22.9-76 19.3-103.8-8.6C74 372 74 321 105.5 289.5L217.7 177.2c31.5-31.5 82.5-31.5 114 0c27.9 27.9 31.5 71.8 8.6 103.9l-1.1 1.6c-10.3 14.4-6.9 34.4 7.4 44.6s34.4 6.9 44.6-7.4l1.1-1.6C433.5 260.8 427 182 377 132c-56.5-56.5-148-56.5-204.5 0L60.2 244.3z">
          </path>
        </svg><!-- <i class="fas fa-fw fa-link fa-sm text-muted mr-1"></i> Font Awesome fontawesome.com --> URL</label>
      <input type="url" id="url" name="url" class="form-control" value="" maxlength="2048" required="required" placeholder="https://example.com/" data-reload-qr-code="">
    </div>
    <div class="form-group d-none" data-type="url" data-link-id="">
      <div class="d-flex flex-column flex-xl-row justify-content-between">
        <label for="link_id"><svg class="svg-inline--fa fa-link fa-fw fa-sm text-muted mr-1" aria-hidden="true" focusable="false" data-prefix="fas" data-icon="link" role="img" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 640 512" data-fa-i2svg="">
            <path fill="currentColor"
              d="M579.8 267.7c56.5-56.5 56.5-148 0-204.5c-50-50-128.8-56.5-186.3-15.4l-1.6 1.1c-14.4 10.3-17.7 30.3-7.4 44.6s30.3 17.7 44.6 7.4l1.6-1.1c32.1-22.9 76-19.3 103.8 8.6c31.5 31.5 31.5 82.5 0 114L422.3 334.8c-31.5 31.5-82.5 31.5-114 0c-27.9-27.9-31.5-71.8-8.6-103.8l1.1-1.6c10.3-14.4 6.9-34.4-7.4-44.6s-34.4-6.9-44.6 7.4l-1.1 1.6C206.5 251.2 213 330 263 380c56.5 56.5 148 56.5 204.5 0L579.8 267.7zM60.2 244.3c-56.5 56.5-56.5 148 0 204.5c50 50 128.8 56.5 186.3 15.4l1.6-1.1c14.4-10.3 17.7-30.3 7.4-44.6s-30.3-17.7-44.6-7.4l-1.6 1.1c-32.1 22.9-76 19.3-103.8-8.6C74 372 74 321 105.5 289.5L217.7 177.2c31.5-31.5 82.5-31.5 114 0c27.9 27.9 31.5 71.8 8.6 103.9l-1.1 1.6c-10.3 14.4-6.9 34.4 7.4 44.6s34.4 6.9 44.6-7.4l1.1-1.6C433.5 260.8 427 182 377 132c-56.5-56.5-148-56.5-204.5 0L60.2 244.3z">
            </path>
          </svg><!-- <i class="fas fa-fw fa-link fa-sm text-muted mr-1"></i> Font Awesome fontawesome.com --> URL</label>
        <a href="https://sqr.co/link-create" target="_blank" class="small mb-2"><svg class="svg-inline--fa fa-plus fa-fw fa-sm mr-1" aria-hidden="true" focusable="false" data-prefix="fas" data-icon="plus" role="img" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 448 512" data-fa-i2svg=""><path fill="currentColor" d="M256 80c0-17.7-14.3-32-32-32s-32 14.3-32 32V224H48c-17.7 0-32 14.3-32 32s14.3 32 32 32H192V432c0 17.7 14.3 32 32 32s32-14.3 32-32V288H400c17.7 0 32-14.3 32-32s-14.3-32-32-32H256V80z"></path></svg><!-- <i class="fas fa-fw fa-sm fa-plus mr-1"></i> Font Awesome fontawesome.com --> Create</a>
      </div>
      <select id="link_id" name="link_id" class="custom-select" data-reload-qr-code="">
      </select>
    </div>
    <div class="form-group" data-type="url">
      <div data-toggle="tooltip" title="" data-original-title="Upgrade to get access to this feature.">
        <div class="container-disabled">
          <div class="custom-control custom-checkbox">
            <input id="url_dynamic" name="url_dynamic" type="checkbox" class="custom-control-input" data-reload-qr-code="">
            <label class="custom-control-label" for="url_dynamic">Dynamic QR code</label>
            <small class="form-text text-muted">Enabling this will create a QR code that points to an internal short link, which will redirect to any specified link, dynamically. Change the destination of your QR code at any time, no reprinting is
              needed.</small>
          </div>
        </div>
      </div>
    </div>
  </div>
  <button class="btn btn-block btn-gray-200 my-4" type="button" data-toggle="collapse" data-target="#style_container" aria-expanded="false" aria-controls="style_container">
    <svg class="svg-inline--fa fa-qrcode fa-fw fa-sm mr-1" aria-hidden="true" focusable="false" data-prefix="fas" data-icon="qrcode" role="img" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 448 512" data-fa-i2svg="">
      <path fill="currentColor"
        d="M0 80C0 53.5 21.5 32 48 32h96c26.5 0 48 21.5 48 48v96c0 26.5-21.5 48-48 48H48c-26.5 0-48-21.5-48-48V80zM64 96v64h64V96H64zM0 336c0-26.5 21.5-48 48-48h96c26.5 0 48 21.5 48 48v96c0 26.5-21.5 48-48 48H48c-26.5 0-48-21.5-48-48V336zm64 16v64h64V352H64zM304 32h96c26.5 0 48 21.5 48 48v96c0 26.5-21.5 48-48 48H304c-26.5 0-48-21.5-48-48V80c0-26.5 21.5-48 48-48zm80 64H320v64h64V96zM256 304c0-8.8 7.2-16 16-16h64c8.8 0 16 7.2 16 16s7.2 16 16 16h32c8.8 0 16-7.2 16-16s7.2-16 16-16s16 7.2 16 16v96c0 8.8-7.2 16-16 16H368c-8.8 0-16-7.2-16-16s-7.2-16-16-16s-16 7.2-16 16v64c0 8.8-7.2 16-16 16H272c-8.8 0-16-7.2-16-16V304zM368 480a16 16 0 1 1 0-32 16 16 0 1 1 0 32zm64 0a16 16 0 1 1 0-32 16 16 0 1 1 0 32z">
      </path>
    </svg><!-- <i class="fas fa-fw fa-qrcode fa-sm mr-1"></i> Font Awesome fontawesome.com --> Style </button>
  <div class="collapse" id="style_container" data-parent="#form">
    <div class="form-group">
      <label for="style"><svg class="svg-inline--fa fa-qrcode fa-fw fa-sm text-muted mr-1" aria-hidden="true" focusable="false" data-prefix="fas" data-icon="qrcode" role="img" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 448 512" data-fa-i2svg="">
          <path fill="currentColor"
            d="M0 80C0 53.5 21.5 32 48 32h96c26.5 0 48 21.5 48 48v96c0 26.5-21.5 48-48 48H48c-26.5 0-48-21.5-48-48V80zM64 96v64h64V96H64zM0 336c0-26.5 21.5-48 48-48h96c26.5 0 48 21.5 48 48v96c0 26.5-21.5 48-48 48H48c-26.5 0-48-21.5-48-48V336zm64 16v64h64V352H64zM304 32h96c26.5 0 48 21.5 48 48v96c0 26.5-21.5 48-48 48H304c-26.5 0-48-21.5-48-48V80c0-26.5 21.5-48 48-48zm80 64H320v64h64V96zM256 304c0-8.8 7.2-16 16-16h64c8.8 0 16 7.2 16 16s7.2 16 16 16h32c8.8 0 16-7.2 16-16s7.2-16 16-16s16 7.2 16 16v96c0 8.8-7.2 16-16 16H368c-8.8 0-16-7.2-16-16s-7.2-16-16-16s-16 7.2-16 16v64c0 8.8-7.2 16-16 16H272c-8.8 0-16-7.2-16-16V304zM368 480a16 16 0 1 1 0-32 16 16 0 1 1 0 32zm64 0a16 16 0 1 1 0-32 16 16 0 1 1 0 32z">
          </path>
        </svg><!-- <i class="fas fa-fw fa-qrcode fa-sm text-muted mr-1"></i> Font Awesome fontawesome.com --> Style</label>
      <div class="row btn-group-toggle" data-toggle="buttons">
        <div class="col-6">
          <label class="btn btn-light btn-block text-truncate active" "="">
                                                    <input type=" radio" name="style" value="square" class="custom-control-input" checked="checked" required="required" data-reload-qr-code="">
            <svg class="svg-inline--fa fa-square-full fa-fw fa-sm mr-1" aria-hidden="true" focusable="false" data-prefix="fas" data-icon="square-full" role="img" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 512 512" data-fa-i2svg="">
              <path fill="currentColor" d="M0 0H512V512H0V0z"></path>
            </svg><!-- <i class="fas fa-square-full fa-fw fa-sm mr-1"></i> Font Awesome fontawesome.com --> Square </label>
        </div>
        <div class="col-6">
          <label class="btn btn-light btn-block text-truncate">
            <input type="radio" name="style" value="dot" class="custom-control-input" required="required" data-reload-qr-code="">
            <svg class="svg-inline--fa fa-circle fa-fw fa-sm mr-1" aria-hidden="true" focusable="false" data-prefix="fas" data-icon="circle" role="img" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 512 512" data-fa-i2svg="">
              <path fill="currentColor" d="M256 512A256 256 0 1 0 256 0a256 256 0 1 0 0 512z"></path>
            </svg><!-- <i class="fas fa-circle fa-fw fa-sm mr-1"></i> Font Awesome fontawesome.com --> Dots </label>
        </div>
        <div class="col-6">
          <label class="btn btn-light btn-block text-truncate">
            <input type="radio" name="style" value="round" class="custom-control-input" required="required" data-reload-qr-code="">
            <svg class="svg-inline--fa fa-square fa-fw fa-sm mr-1" aria-hidden="true" focusable="false" data-prefix="fas" data-icon="square" role="img" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 448 512" data-fa-i2svg="">
              <path fill="currentColor" d="M0 96C0 60.7 28.7 32 64 32H384c35.3 0 64 28.7 64 64V416c0 35.3-28.7 64-64 64H64c-35.3 0-64-28.7-64-64V96z"></path>
            </svg><!-- <i class="fas fa-square fa-fw fa-sm mr-1"></i> Font Awesome fontawesome.com --> Round </label>
        </div>
        <div class="col-6">
          <label class="btn btn-light btn-block text-truncate">
            <input type="radio" name="style" value="heart" class="custom-control-input" required="required" data-reload-qr-code="">
            <svg class="svg-inline--fa fa-heart fa-fw fa-sm mr-1" aria-hidden="true" focusable="false" data-prefix="fas" data-icon="heart" role="img" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 512 512" data-fa-i2svg="">
              <path fill="currentColor"
                d="M47.6 300.4L228.3 469.1c7.5 7 17.4 10.9 27.7 10.9s20.2-3.9 27.7-10.9L464.4 300.4c30.4-28.3 47.6-68 47.6-109.5v-5.8c0-69.9-50.5-129.5-119.4-141C347 36.5 300.6 51.4 268 84L256 96 244 84c-32.6-32.6-79-47.5-124.6-39.9C50.5 55.6 0 115.2 0 185.1v5.8c0 41.5 17.2 81.2 47.6 109.5z">
              </path>
            </svg><!-- <i class="fas fa-heart fa-fw fa-sm mr-1"></i> Font Awesome fontawesome.com --> Heart </label>
        </div>
        <div class="col-6">
          <label class="btn btn-light btn-block text-truncate">
            <input type="radio" name="style" value="diamond" class="custom-control-input" required="required" data-reload-qr-code="">
            <svg class="svg-inline--fa fa-gem fa-fw fa-sm mr-1" aria-hidden="true" focusable="false" data-prefix="fas" data-icon="gem" role="img" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 512 512" data-fa-i2svg="">
              <path fill="currentColor"
                d="M116.7 33.8c4.5-6.1 11.7-9.8 19.3-9.8H376c7.6 0 14.8 3.6 19.3 9.8l112 152c6.8 9.2 6.1 21.9-1.5 30.4l-232 256c-4.5 5-11 7.9-17.8 7.9s-13.2-2.9-17.8-7.9l-232-256c-7.7-8.5-8.3-21.2-1.5-30.4l112-152zm38.5 39.8c-3.3 2.5-4.2 7-2.1 10.5l57.4 95.6L63.3 192c-4.1 .3-7.3 3.8-7.3 8s3.2 7.6 7.3 8l192 16c.4 0 .9 0 1.3 0l192-16c4.1-.3 7.3-3.8 7.3-8s-3.2-7.6-7.3-8L301.5 179.8l57.4-95.6c2.1-3.5 1.2-8.1-2.1-10.5s-7.9-2-10.7 1L256 172.2 165.9 74.6c-2.8-3-7.4-3.4-10.7-1z">
              </path>
            </svg><!-- <i class="fas fa-gem fa-fw fa-sm mr-1"></i> Font Awesome fontawesome.com --> Diamond </label>
        </div>
      </div>
    </div>
    <div class="form-group">
      <label for="inner_eye_style"><svg class="svg-inline--fa fa-circle fa-fw fa-sm text-muted mr-1" aria-hidden="true" focusable="false" data-prefix="fas" data-icon="circle" role="img" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 512 512"
          data-fa-i2svg="">
          <path fill="currentColor" d="M256 512A256 256 0 1 0 256 0a256 256 0 1 0 0 512z"></path>
        </svg><!-- <i class="fas fa-fw fa-circle fa-sm text-muted mr-1"></i> Font Awesome fontawesome.com --> Inner eye style</label>
      <div class="row btn-group-toggle" data-toggle="buttons">
        <div class="col-6">
          <label class="btn btn-light btn-block text-truncate active" "="">
                                                    <input type=" radio" name="inner_eye_style" value="square" class="custom-control-input" checked="checked" required="required" data-reload-qr-code="">
            <svg class="svg-inline--fa fa-square-full fa-fw fa-sm mr-1" aria-hidden="true" focusable="false" data-prefix="fas" data-icon="square-full" role="img" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 512 512" data-fa-i2svg="">
              <path fill="currentColor" d="M0 0H512V512H0V0z"></path>
            </svg><!-- <i class="fas fa-square-full fa-fw fa-sm mr-1"></i> Font Awesome fontawesome.com --> Square </label>
        </div>
        <div class="col-6">
          <label class="btn btn-light btn-block text-truncate">
            <input type="radio" name="inner_eye_style" value="dot" class="custom-control-input" required="required" data-reload-qr-code="">
            <svg class="svg-inline--fa fa-circle fa-fw fa-sm mr-1" aria-hidden="true" focusable="false" data-prefix="fas" data-icon="circle" role="img" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 512 512" data-fa-i2svg="">
              <path fill="currentColor" d="M256 512A256 256 0 1 0 256 0a256 256 0 1 0 0 512z"></path>
            </svg><!-- <i class="fas fa-circle fa-fw fa-sm mr-1"></i> Font Awesome fontawesome.com --> Dots </label>
        </div>
        <div class="col-6">
          <label class="btn btn-light btn-block text-truncate">
            <input type="radio" name="inner_eye_style" value="rounded" class="custom-control-input" required="required" data-reload-qr-code="">
            <svg class="svg-inline--fa fa-square fa-fw fa-sm mr-1" aria-hidden="true" focusable="false" data-prefix="fas" data-icon="square" role="img" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 448 512" data-fa-i2svg="">
              <path fill="currentColor" d="M0 96C0 60.7 28.7 32 64 32H384c35.3 0 64 28.7 64 64V416c0 35.3-28.7 64-64 64H64c-35.3 0-64-28.7-64-64V96z"></path>
            </svg><!-- <i class="fas fa-square fa-fw fa-sm mr-1"></i> Font Awesome fontawesome.com --> Rounded </label>
        </div>
        <div class="col-6">
          <label class="btn btn-light btn-block text-truncate">
            <input type="radio" name="inner_eye_style" value="diamond" class="custom-control-input" required="required" data-reload-qr-code="">
            <svg class="svg-inline--fa fa-gem fa-fw fa-sm mr-1" aria-hidden="true" focusable="false" data-prefix="fas" data-icon="gem" role="img" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 512 512" data-fa-i2svg="">
              <path fill="currentColor"
                d="M116.7 33.8c4.5-6.1 11.7-9.8 19.3-9.8H376c7.6 0 14.8 3.6 19.3 9.8l112 152c6.8 9.2 6.1 21.9-1.5 30.4l-232 256c-4.5 5-11 7.9-17.8 7.9s-13.2-2.9-17.8-7.9l-232-256c-7.7-8.5-8.3-21.2-1.5-30.4l112-152zm38.5 39.8c-3.3 2.5-4.2 7-2.1 10.5l57.4 95.6L63.3 192c-4.1 .3-7.3 3.8-7.3 8s3.2 7.6 7.3 8l192 16c.4 0 .9 0 1.3 0l192-16c4.1-.3 7.3-3.8 7.3-8s-3.2-7.6-7.3-8L301.5 179.8l57.4-95.6c2.1-3.5 1.2-8.1-2.1-10.5s-7.9-2-10.7 1L256 172.2 165.9 74.6c-2.8-3-7.4-3.4-10.7-1z">
              </path>
            </svg><!-- <i class="fas fa-gem fa-fw fa-sm mr-1"></i> Font Awesome fontawesome.com --> Diamond </label>
        </div>
        <div class="col-6">
          <label class="btn btn-light btn-block text-truncate">
            <input type="radio" name="inner_eye_style" value="flower" class="custom-control-input" required="required" data-reload-qr-code="">
            <svg class="svg-inline--fa fa-seedling fa-fw fa-sm mr-1" aria-hidden="true" focusable="false" data-prefix="fas" data-icon="seedling" role="img" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 512 512" data-fa-i2svg="">
              <path fill="currentColor"
                d="M512 32c0 113.6-84.6 207.5-194.2 222c-7.1-53.4-30.6-101.6-65.3-139.3C290.8 46.3 364 0 448 0h32c17.7 0 32 14.3 32 32zM0 96C0 78.3 14.3 64 32 64H64c123.7 0 224 100.3 224 224v32V480c0 17.7-14.3 32-32 32s-32-14.3-32-32V320C100.3 320 0 219.7 0 96z">
              </path>
            </svg><!-- <i class="fas fa-seedling fa-fw fa-sm mr-1"></i> Font Awesome fontawesome.com --> Flower </label>
        </div>
        <div class="col-6">
          <label class="btn btn-light btn-block text-truncate">
            <input type="radio" name="inner_eye_style" value="leaf" class="custom-control-input" required="required" data-reload-qr-code="">
            <svg class="svg-inline--fa fa-leaf fa-fw fa-sm mr-1" aria-hidden="true" focusable="false" data-prefix="fas" data-icon="leaf" role="img" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 512 512" data-fa-i2svg="">
              <path fill="currentColor"
                d="M272 96c-78.6 0-145.1 51.5-167.7 122.5c33.6-17 71.5-26.5 111.7-26.5h88c8.8 0 16 7.2 16 16s-7.2 16-16 16H288 216s0 0 0 0c-16.6 0-32.7 1.9-48.2 5.4c-25.9 5.9-50 16.4-71.4 30.7c0 0 0 0 0 0C38.3 298.8 0 364.9 0 440v16c0 13.3 10.7 24 24 24s24-10.7 24-24V440c0-48.7 20.7-92.5 53.8-123.2C121.6 392.3 190.3 448 272 448l1 0c132.1-.7 239-130.9 239-291.4c0-42.6-7.5-83.1-21.1-119.6c-2.6-6.9-12.7-6.6-16.2-.1C455.9 72.1 418.7 96 376 96L272 96z">
              </path>
            </svg><!-- <i class="fas fa-leaf fa-fw fa-sm mr-1"></i> Font Awesome fontawesome.com --> Leaf </label>
        </div>
      </div>
    </div>
    <div class="form-group">
      <label for="outer_eye_style"><svg class="svg-inline--fa fa-circle-dot fa-fw fa-sm text-muted mr-1" aria-hidden="true" focusable="false" data-prefix="fas" data-icon="circle-dot" role="img" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 512 512"
          data-fa-i2svg="">
          <path fill="currentColor" d="M256 512A256 256 0 1 0 256 0a256 256 0 1 0 0 512zm0-352a96 96 0 1 1 0 192 96 96 0 1 1 0-192z"></path>
        </svg><!-- <i class="fas fa-fw fa-dot-circle fa-sm text-muted mr-1"></i> Font Awesome fontawesome.com --> Outer eye style</label>
      <div class="row btn-group-toggle" data-toggle="buttons">
        <div class="col-6">
          <label class="btn btn-light btn-block text-truncate active" "="">
                                                    <input type=" radio" name="outer_eye_style" value="square" class="custom-control-input" checked="checked" required="required" data-reload-qr-code="">
            <svg class="svg-inline--fa fa-square-full fa-fw fa-sm mr-1" aria-hidden="true" focusable="false" data-prefix="fas" data-icon="square-full" role="img" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 512 512" data-fa-i2svg="">
              <path fill="currentColor" d="M0 0H512V512H0V0z"></path>
            </svg><!-- <i class="fas fa-square-full fa-fw fa-sm mr-1"></i> Font Awesome fontawesome.com --> Square </label>
        </div>
        <div class="col-6">
          <label class="btn btn-light btn-block text-truncate">
            <input type="radio" name="outer_eye_style" value="circle" class="custom-control-input" required="required" data-reload-qr-code="">
            <svg class="svg-inline--fa fa-circle fa-fw fa-sm mr-1" aria-hidden="true" focusable="false" data-prefix="fas" data-icon="circle" role="img" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 512 512" data-fa-i2svg="">
              <path fill="currentColor" d="M256 512A256 256 0 1 0 256 0a256 256 0 1 0 0 512z"></path>
            </svg><!-- <i class="fas fa-circle fa-fw fa-sm mr-1"></i> Font Awesome fontawesome.com --> Circle </label>
        </div>
        <div class="col-6">
          <label class="btn btn-light btn-block text-truncate">
            <input type="radio" name="outer_eye_style" value="rounded" class="custom-control-input" required="required" data-reload-qr-code="">
            <svg class="svg-inline--fa fa-square fa-fw fa-sm mr-1" aria-hidden="true" focusable="false" data-prefix="fas" data-icon="square" role="img" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 448 512" data-fa-i2svg="">
              <path fill="currentColor" d="M0 96C0 60.7 28.7 32 64 32H384c35.3 0 64 28.7 64 64V416c0 35.3-28.7 64-64 64H64c-35.3 0-64-28.7-64-64V96z"></path>
            </svg><!-- <i class="fas fa-square fa-fw fa-sm mr-1"></i> Font Awesome fontawesome.com --> Rounded </label>
        </div>
        <div class="col-6">
          <label class="btn btn-light btn-block text-truncate">
            <input type="radio" name="outer_eye_style" value="flower" class="custom-control-input" required="required" data-reload-qr-code="">
            <svg class="svg-inline--fa fa-seedling fa-fw fa-sm mr-1" aria-hidden="true" focusable="false" data-prefix="fas" data-icon="seedling" role="img" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 512 512" data-fa-i2svg="">
              <path fill="currentColor"
                d="M512 32c0 113.6-84.6 207.5-194.2 222c-7.1-53.4-30.6-101.6-65.3-139.3C290.8 46.3 364 0 448 0h32c17.7 0 32 14.3 32 32zM0 96C0 78.3 14.3 64 32 64H64c123.7 0 224 100.3 224 224v32V480c0 17.7-14.3 32-32 32s-32-14.3-32-32V320C100.3 320 0 219.7 0 96z">
              </path>
            </svg><!-- <i class="fas fa-seedling fa-fw fa-sm mr-1"></i> Font Awesome fontawesome.com --> Flower </label>
        </div>
        <div class="col-6">
          <label class="btn btn-light btn-block text-truncate">
            <input type="radio" name="outer_eye_style" value="leaf" class="custom-control-input" required="required" data-reload-qr-code="">
            <svg class="svg-inline--fa fa-leaf fa-fw fa-sm mr-1" aria-hidden="true" focusable="false" data-prefix="fas" data-icon="leaf" role="img" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 512 512" data-fa-i2svg="">
              <path fill="currentColor"
                d="M272 96c-78.6 0-145.1 51.5-167.7 122.5c33.6-17 71.5-26.5 111.7-26.5h88c8.8 0 16 7.2 16 16s-7.2 16-16 16H288 216s0 0 0 0c-16.6 0-32.7 1.9-48.2 5.4c-25.9 5.9-50 16.4-71.4 30.7c0 0 0 0 0 0C38.3 298.8 0 364.9 0 440v16c0 13.3 10.7 24 24 24s24-10.7 24-24V440c0-48.7 20.7-92.5 53.8-123.2C121.6 392.3 190.3 448 272 448l1 0c132.1-.7 239-130.9 239-291.4c0-42.6-7.5-83.1-21.1-119.6c-2.6-6.9-12.7-6.6-16.2-.1C455.9 72.1 418.7 96 376 96L272 96z">
              </path>
            </svg><!-- <i class="fas fa-leaf fa-fw fa-sm mr-1"></i> Font Awesome fontawesome.com --> Leaf </label>
        </div>
      </div>
    </div>
  </div>
  <button class="btn btn-block btn-gray-200 my-4" type="button" data-toggle="collapse" data-target="#colors_container" aria-expanded="false" aria-controls="colors_container">
    <svg class="svg-inline--fa fa-palette fa-fw fa-sm mr-1" aria-hidden="true" focusable="false" data-prefix="fas" data-icon="palette" role="img" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 512 512" data-fa-i2svg="">
      <path fill="currentColor"
        d="M512 256c0 .9 0 1.8 0 2.7c-.4 36.5-33.6 61.3-70.1 61.3H344c-26.5 0-48 21.5-48 48c0 3.4 .4 6.7 1 9.9c2.1 10.2 6.5 20 10.8 29.9c6.1 13.8 12.1 27.5 12.1 42c0 31.8-21.6 60.7-53.4 62c-3.5 .1-7 .2-10.6 .2C114.6 512 0 397.4 0 256S114.6 0 256 0S512 114.6 512 256zM128 288a32 32 0 1 0 -64 0 32 32 0 1 0 64 0zm0-96a32 32 0 1 0 0-64 32 32 0 1 0 0 64zM288 96a32 32 0 1 0 -64 0 32 32 0 1 0 64 0zm96 96a32 32 0 1 0 0-64 32 32 0 1 0 0 64z">
      </path>
    </svg><!-- <i class="fas fa-fw fa-palette fa-sm mr-1"></i> Font Awesome fontawesome.com --> Custom Colors </button>
  <div class="collapse" id="colors_container" data-parent="#form">
    <div class="form-group">
      <label for="foreground_type"><svg class="svg-inline--fa fa-paint-roller fa-fw fa-sm text-muted mr-1" aria-hidden="true" focusable="false" data-prefix="fas" data-icon="paint-roller" role="img" xmlns="http://www.w3.org/2000/svg"
          viewBox="0 0 512 512" data-fa-i2svg="">
          <path fill="currentColor"
            d="M0 64C0 28.7 28.7 0 64 0H352c35.3 0 64 28.7 64 64v64c0 35.3-28.7 64-64 64H64c-35.3 0-64-28.7-64-64V64zM160 352c0-17.7 14.3-32 32-32V304c0-44.2 35.8-80 80-80H416c17.7 0 32-14.3 32-32V160 69.5c37.3 13.2 64 48.7 64 90.5v32c0 53-43 96-96 96H272c-8.8 0-16 7.2-16 16v16c17.7 0 32 14.3 32 32V480c0 17.7-14.3 32-32 32H192c-17.7 0-32-14.3-32-32V352z">
          </path>
        </svg><!-- <i class="fas fa-fw fa-paint-roller fa-sm text-muted mr-1"></i> Font Awesome fontawesome.com --> Foreground type</label>
      <div class="row btn-group-toggle" data-toggle="buttons">
        <div class="col-6">
          <label class="btn btn-light btn-block active">
            <input type="radio" name="foreground_type" value="color" class="custom-control-input" checked="checked" required="required" data-reload-qr-code=""> Color </label>
        </div>
        <div class="col-6">
          <label class="btn btn-light btn-block">
            <input type="radio" name="foreground_type" value="gradient" class="custom-control-input" required="required" data-reload-qr-code=""> Gradient </label>
        </div>
      </div>
    </div>
    <div class="form-group" data-foreground-type="color">
      <label for="foreground_color"><svg class="svg-inline--fa fa-paintbrush fa-fw fa-sm text-muted mr-1" aria-hidden="true" focusable="false" data-prefix="fas" data-icon="paintbrush" role="img" xmlns="http://www.w3.org/2000/svg"
          viewBox="0 0 576 512" data-fa-i2svg="">
          <path fill="currentColor"
            d="M339.3 367.1c27.3-3.9 51.9-19.4 67.2-42.9L568.2 74.1c12.6-19.5 9.4-45.3-7.6-61.2S517.7-4.4 499.1 9.6L262.4 187.2c-24 18-38.2 46.1-38.4 76.1L339.3 367.1zm-19.6 25.4l-116-104.4C143.9 290.3 96 339.6 96 400c0 3.9 .2 7.8 .6 11.6C98.4 429.1 86.4 448 68.8 448H64c-17.7 0-32 14.3-32 32s14.3 32 32 32H208c61.9 0 112-50.1 112-112c0-2.5-.1-5-.2-7.5z">
          </path>
        </svg><!-- <i class="fas fa-fw fa-paint-brush fa-sm text-muted mr-1"></i> Font Awesome fontawesome.com --> Foreground color</label>
      <input type="hidden" id="foreground_color" name="foreground_color" class="form-control" value="#000000" data-reload-qr-code="" data-color-picker="">
      <div class="pickr">
        <button type="button" class="pcr-button" role="button" aria-label="toggle color picker dialog" style="transition: none; --pcr-color: rgba(0, 0, 0, 1);"></button>
      </div>
    </div>
    <div class="form-group d-none" data-foreground-type="gradient">
      <label for="foreground_gradient_style"><svg class="svg-inline--fa fa-brush fa-fw fa-sm text-muted mr-1" aria-hidden="true" focusable="false" data-prefix="fas" data-icon="brush" role="img" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 384 512"
          data-fa-i2svg="">
          <path fill="currentColor"
            d="M162.4 6c-1.5-3.6-5-6-8.9-6h-19c-3.9 0-7.5 2.4-8.9 6L104.9 57.7c-3.2 8-14.6 8-17.8 0L66.4 6c-1.5-3.6-5-6-8.9-6H48C21.5 0 0 21.5 0 48V224v22.4V256H9.6 374.4 384v-9.6V224 48c0-26.5-21.5-48-48-48H230.5c-3.9 0-7.5 2.4-8.9 6L200.9 57.7c-3.2 8-14.6 8-17.8 0L162.4 6zM0 288v32c0 35.3 28.7 64 64 64h64v64c0 35.3 28.7 64 64 64s64-28.7 64-64V384h64c35.3 0 64-28.7 64-64V288H0zM192 432a16 16 0 1 1 0 32 16 16 0 1 1 0-32z">
          </path>
        </svg><!-- <i class="fas fa-fw fa-brush fa-sm text-muted mr-1"></i> Font Awesome fontawesome.com --> Foreground gradient style</label>
      <select id="foreground_gradient_style" name="foreground_gradient_style" class="custom-select" data-reload-qr-code="" disabled="disabled">
        <option value="vertical">Vertical</option>
        <option value="horizontal">Horizontal</option>
        <option value="diagonal">Diagonal</option>
        <option value="inverse_diagonal">Inverse diagonal</option>
        <option value="radial">Radial</option>
      </select>
    </div>
    <div class="form-group d-none" data-foreground-type="gradient">
      <label for="foreground_gradient_one">Foreground first color</label>
      <input type="hidden" id="foreground_gradient_one" name="foreground_gradient_one" class="form-control" value="#000000" data-reload-qr-code="" data-color-picker="" disabled="disabled">
      <div class="pickr">
        <button type="button" class="pcr-button" role="button" aria-label="toggle color picker dialog" style="transition: none; --pcr-color: rgba(0, 0, 0, 1);"></button>
      </div>
    </div>
    <div class="form-group d-none" data-foreground-type="gradient">
      <label for="foreground_gradient_two">Foreground second color</label>
      <input type="hidden" id="foreground_gradient_two" name="foreground_gradient_two" class="form-control" value="#000000" data-reload-qr-code="" data-color-picker="" disabled="disabled">
      <div class="pickr">
        <button type="button" class="pcr-button" role="button" aria-label="toggle color picker dialog" style="transition: none; --pcr-color: rgba(0, 0, 0, 1);"></button>
      </div>
    </div>
    <div class="form-group">
      <label for="background_color">Background color</label>
      <input type="hidden" id="background_color" name="background_color" class="form-control" value="#ffffff" data-reload-qr-code="" data-color-picker="">
      <div class="pickr">
        <button type="button" class="pcr-button" role="button" aria-label="toggle color picker dialog" style="transition: none; --pcr-color: rgba(255, 255, 255, 1);"></button>
      </div>
    </div>
    <div class="form-group" data-range-counter="" data-range-counter-suffix="%">
      <label for="background_color_transparency" class="d-flex justify-content-between align-items-center"><span><svg class="svg-inline--fa fa-lightbulb fa-fw fa-sm text-muted mr-1" aria-hidden="true" focusable="false" data-prefix="fas"
            data-icon="lightbulb" role="img" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 384 512" data-fa-i2svg="">
            <path fill="currentColor"
              d="M272 384c9.6-31.9 29.5-59.1 49.2-86.2l0 0c5.2-7.1 10.4-14.2 15.4-21.4c19.8-28.5 31.4-63 31.4-100.3C368 78.8 289.2 0 192 0S16 78.8 16 176c0 37.3 11.6 71.9 31.4 100.3c5 7.2 10.2 14.3 15.4 21.4l0 0c19.8 27.1 39.7 54.4 49.2 86.2H272zM192 512c44.2 0 80-35.8 80-80V416H112v16c0 44.2 35.8 80 80 80zM112 176c0 8.8-7.2 16-16 16s-16-7.2-16-16c0-61.9 50.1-112 112-112c8.8 0 16 7.2 16 16s-7.2 16-16 16c-44.2 0-80 35.8-80 80z">
            </path>
          </svg><!-- <i class="fas fa-fw fa-lightbulb fa-sm text-muted mr-1"></i> Font Awesome fontawesome.com --> Background color transparency</span><small class="text-muted" data-range-counter-wrapper="">0%</small></label>
      <input id="background_color_transparency" type="range" min="0" max="100" step="5" name="background_color_transparency" value="0" class="form-control-range" data-reload-qr-code="">
    </div>
    <div class="form-group custom-control custom-switch">
      <input type="checkbox" class="custom-control-input" id="custom_eyes_color" name="custom_eyes_color" data-reload-qr-code="">
      <label class="custom-control-label" for="custom_eyes_color">
        <svg class="svg-inline--fa fa-eye fa-fw fa-sm text-muted mr-1" aria-hidden="true" focusable="false" data-prefix="fas" data-icon="eye" role="img" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 576 512" data-fa-i2svg="">
          <path fill="currentColor"
            d="M288 32c-80.8 0-145.5 36.8-192.6 80.6C48.6 156 17.3 208 2.5 243.7c-3.3 7.9-3.3 16.7 0 24.6C17.3 304 48.6 356 95.4 399.4C142.5 443.2 207.2 480 288 480s145.5-36.8 192.6-80.6c46.8-43.5 78.1-95.4 93-131.1c3.3-7.9 3.3-16.7 0-24.6c-14.9-35.7-46.2-87.7-93-131.1C433.5 68.8 368.8 32 288 32zM144 256a144 144 0 1 1 288 0 144 144 0 1 1 -288 0zm144-64c0 35.3-28.7 64-64 64c-7.1 0-13.9-1.2-20.3-3.3c-5.5-1.8-11.9 1.6-11.7 7.4c.3 6.9 1.3 13.8 3.2 20.7c13.7 51.2 66.4 81.6 117.6 67.9s81.6-66.4 67.9-117.6c-11.1-41.5-47.8-69.4-88.6-71.1c-5.8-.2-9.2 6.1-7.4 11.7c2.1 6.4 3.3 13.2 3.3 20.3z">
          </path>
        </svg><!-- <i class="fas fa-fw fa-eye fa-sm text-muted mr-1"></i> Font Awesome fontawesome.com --> Custom eyes color </label>
    </div>
    <div class="form-group d-none" data-custom-eyes-color="on">
      <label for="eyes_inner_color">Eyes inner color</label>
      <input type="hidden" id="eyes_inner_color" name="eyes_inner_color" class="form-control" value="#000000" data-reload-qr-code="" data-color-picker="" disabled="disabled">
      <div class="pickr">
        <button type="button" class="pcr-button" role="button" aria-label="toggle color picker dialog" style="transition: none; --pcr-color: rgba(0, 0, 0, 1);"></button>
      </div>
    </div>
    <div class="form-group d-none" data-custom-eyes-color="on">
      <label for="eyes_outer_color">Eyes outer color</label>
      <input type="hidden" id="eyes_outer_color" name="eyes_outer_color" class="form-control" value="#000000" data-reload-qr-code="" data-color-picker="" disabled="disabled">
      <div class="pickr">
        <button type="button" class="pcr-button" role="button" aria-label="toggle color picker dialog" style="transition: none; --pcr-color: rgba(0, 0, 0, 1);"></button>
      </div>
    </div>
  </div>
  <button class="btn btn-block btn-gray-200 my-4" type="button" data-toggle="collapse" data-target="#frame_container" aria-expanded="false" aria-controls="frame_container">
    <svg class="svg-inline--fa fa-crop-simple fa-fw fa-sm mr-1" aria-hidden="true" focusable="false" data-prefix="fas" data-icon="crop-simple" role="img" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 512 512" data-fa-i2svg="">
      <path fill="currentColor"
        d="M128 32c0-17.7-14.3-32-32-32S64 14.3 64 32V64H32C14.3 64 0 78.3 0 96s14.3 32 32 32H64V384c0 35.3 28.7 64 64 64H352V384H128V32zM384 480c0 17.7 14.3 32 32 32s32-14.3 32-32V448h32c17.7 0 32-14.3 32-32s-14.3-32-32-32H448l0-256c0-35.3-28.7-64-64-64L160 64v64l224 0 0 352z">
      </path>
    </svg><!-- <i class="fas fa-fw fa-crop-alt fa-sm mr-1"></i> Font Awesome fontawesome.com --> Frame </button>
  <div class="collapse" id="frame_container" data-parent="#form">
    <div class="form-group">
      <label for="frame"><svg class="svg-inline--fa fa-qrcode fa-fw fa-sm text-muted mr-1" aria-hidden="true" focusable="false" data-prefix="fas" data-icon="qrcode" role="img" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 448 512" data-fa-i2svg="">
          <path fill="currentColor"
            d="M0 80C0 53.5 21.5 32 48 32h96c26.5 0 48 21.5 48 48v96c0 26.5-21.5 48-48 48H48c-26.5 0-48-21.5-48-48V80zM64 96v64h64V96H64zM0 336c0-26.5 21.5-48 48-48h96c26.5 0 48 21.5 48 48v96c0 26.5-21.5 48-48 48H48c-26.5 0-48-21.5-48-48V336zm64 16v64h64V352H64zM304 32h96c26.5 0 48 21.5 48 48v96c0 26.5-21.5 48-48 48H304c-26.5 0-48-21.5-48-48V80c0-26.5 21.5-48 48-48zm80 64H320v64h64V96zM256 304c0-8.8 7.2-16 16-16h64c8.8 0 16 7.2 16 16s7.2 16 16 16h32c8.8 0 16-7.2 16-16s7.2-16 16-16s16 7.2 16 16v96c0 8.8-7.2 16-16 16H368c-8.8 0-16-7.2-16-16s-7.2-16-16-16s-16 7.2-16 16v64c0 8.8-7.2 16-16 16H272c-8.8 0-16-7.2-16-16V304zM368 480a16 16 0 1 1 0-32 16 16 0 1 1 0 32zm64 0a16 16 0 1 1 0-32 16 16 0 1 1 0 32z">
          </path>
        </svg><!-- <i class="fas fa-fw fa-qrcode fa-sm text-muted mr-1"></i> Font Awesome fontawesome.com --> Frame</label>
      <div class="row btn-group-toggle" data-toggle="buttons">
        <div class="col-6 col-lg-4 mb-3">
          <label class="btn btn-light btn-block d-flex align-items-center justify-content-center active" data-toggle="tooltip" data-tooltip-hide-on-click="" title="" style="height: 125px;" data-original-title="None">
            <input type="radio" name="frame" value="" class="custom-control-input" checked="checked" required="required" data-reload-qr-code="">
            <svg class="svg-inline--fa fa-xmark fa-fw fa-3x" aria-hidden="true" focusable="false" data-prefix="fas" data-icon="xmark" role="img" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 384 512" data-fa-i2svg="">
              <path fill="currentColor"
                d="M342.6 150.6c12.5-12.5 12.5-32.8 0-45.3s-32.8-12.5-45.3 0L192 210.7 86.6 105.4c-12.5-12.5-32.8-12.5-45.3 0s-12.5 32.8 0 45.3L146.7 256 41.4 361.4c-12.5 12.5-12.5 32.8 0 45.3s32.8 12.5 45.3 0L192 301.3 297.4 406.6c12.5 12.5 32.8 12.5 45.3 0s12.5-32.8 0-45.3L237.3 256 342.6 150.6z">
              </path>
            </svg><!-- <i class="fas fa-fw fa-3x fa-times"></i> Font Awesome fontawesome.com -->
          </label>
        </div>
        <div class="col-6 col-lg-4 mb-3">
          <label class="btn btn-light btn-block d-flex align-items-center justify-content-center" style="height: 125px;">
            <input type="radio" name="frame" value="round_bottom_text" class="custom-control-input" required="required" data-reload-qr-code="">
            <svg width="75" height="87.525" viewBox="0 0 75 87.525" fill="var(--gray-900)" xmlns="http://www.w3.org/2000/svg">
              <g transform="scale(3.125) translate(0 0)">
                <path d="M22.7,0H1.3C0.6,0,0,0.6,0,1.3v25.3C0,27.4,0.6,28,1.3,28h21.3c0.7,0,1.3-0.6,1.3-1.3V1.3C24,0.6,23.4,0,22.7,0 z M23,22c0,0.6-0.5,1-1,1H2c-0.6,0-1-0.5-1-1V2c0-0.6,0.5-1,1-1h20c0.6,0,1,0.5,1,1V22z"></path>
              </g>
            </svg> </label>
        </div>
        <div class="col-6 col-lg-4 mb-3">
          <label class="btn btn-light btn-block d-flex align-items-center justify-content-center" style="height: 125px;">
            <input type="radio" name="frame" value="round_top_text" class="custom-control-input" required="required" data-reload-qr-code="">
            <svg width="75" height="87.525" viewBox="0 0 75 87.525" fill="var(--gray-900)" xmlns="http://www.w3.org/2000/svg">
              <g transform="scale(3.125) translate(0 0)">
                <path d="M1.3,28L22.6,28c0.7,0,1.3-0.6,1.3-1.3L24,1.4c0-0.7-0.6-1.3-1.3-1.3L1.4,0C0.7,0,0.1,0.6,0,1.3L0,26.6 C-0.1,27.4,0.5,28,1.3,28z M1,6c0-0.6,0.5-1,1-1L22,5c0.6,0,1,0.5,1,1L23,26c0,0.6-0.5,1-1,1L2,27c-0.6,0-1-0.5-1-1L1,6z"></path>
              </g>
            </svg> </label>
        </div>
        <div class="col-6 col-lg-4 mb-3">
          <label class="btn btn-light btn-block d-flex align-items-center justify-content-center" style="height: 125px;">
            <input type="radio" name="frame" value="tooltip_bottom_text" class="custom-control-input" required="required" data-reload-qr-code="">
            <svg width="75" height="93.75" viewBox="0 0 75 93.75" fill="var(--gray-900)" xmlns="http://www.w3.org/2000/svg">
              <g transform="scale(3.125) translate(0 0)">
                <path d="M1.3,24l21.3,0c0.7,0,1.3-0.6,1.3-1.3l0-21.3C24,0.6,23.4,0,22.7,0L1.3,0C0.6,0,0,0.6,0,1.3l0,21.3 C0,23.4,0.6,24,1.3,24z M1,2c0-0.6,0.5-1,1-1l20,0c0.6,0,1,0.5,1,1v20c0,0.6-0.5,1-1,1L2,23c-0.6,0-1-0.5-1-1V2z"></path>
                <path d="M1,30h22c0.5,0,1-0.4,1-1v-3c0-0.5-0.4-1-1-1H13l-1-1l-1,1H1c-0.5,0-1,0.4-1,1v3C0,29.6,0.4,30,1,30z"></path>
              </g>
            </svg> </label>
        </div>
        <div class="col-6 col-lg-4 mb-3">
          <label class="btn btn-light btn-block d-flex align-items-center justify-content-center" style="height: 125px;">
            <input type="radio" name="frame" value="tooltip_top_text" class="custom-control-input" required="required" data-reload-qr-code="">
            <svg width="75" height="93.75" viewBox="0 0 75 93.75" fill="var(--gray-900)" xmlns="http://www.w3.org/2000/svg">
              <g transform="scale(3.125) translate(0 0)">
                <path d="M22.7,6L1.3,6C0.6,6,0,6.6,0,7.3l0,21.3C0,29.4,0.6,30,1.3,30l21.3,0c0.7,0,1.3-0.6,1.3-1.3l0-21.3 C24,6.6,23.4,6,22.7,6z M23,28c0,0.6-0.5,1-1,1L2,29c-0.6,0-1-0.5-1-1V8c0-0.6,0.5-1,1-1l20,0c0.6,0,1,0.5,1,1V28z"></path>
                <path d="M23,0H1C0.4,0,0,0.4,0,1v3c0,0.5,0.4,1,1,1h10l1,1l1-1h10c0.5,0,1-0.4,1-1V1C24,0.4,23.6,0,23,0z"></path>
              </g>
            </svg> </label>
        </div>
        <div class="col-6 col-lg-4 mb-3">
          <label class="btn btn-light btn-block d-flex align-items-center justify-content-center" style="height: 125px;">
            <input type="radio" name="frame" value="ribbon_bottom_text" class="custom-control-input" required="required" data-reload-qr-code="">
            <svg width="75" height="82.5" viewBox="0 0 75 82.5" fill="var(--gray-900)" xmlns="http://www.w3.org/2000/svg">
              <g transform="scale(3.125) translate(0 0)">
                <path d="M24,21h-1.7V1.7H1.7V21H0l1,2l-1,2h1v2h22v-2h1l-1-2L24,21z M2,2h20v19v1H2v-1V2z"></path>
              </g>
            </svg> </label>
        </div>
        <div class="col-6 col-lg-4 mb-3">
          <label class="btn btn-light btn-block d-flex align-items-center justify-content-center" style="height: 125px;">
            <input type="radio" name="frame" value="ribbon_top_text" class="custom-control-input" required="required" data-reload-qr-code="">
            <svg width="75" height="82.5" viewBox="0 0 75 82.5" fill="var(--gray-900)" xmlns="http://www.w3.org/2000/svg">
              <g transform="scale(3.125) translate(0 0)">
                <path d="M0,6h1.7v19.3h20.7V6H24l-1-2l1-2h-1V0H1v2H0l1,2L0,6z M22,25H2V6V5h20v1V25z"></path>
              </g>
            </svg> </label>
        </div>
        <div class="col-6 col-lg-4 mb-3">
          <label class="btn btn-light btn-block d-flex align-items-center justify-content-center" style="height: 125px;">
            <input type="radio" name="frame" value="tooltip_snap_top_text" class="custom-control-input" required="required" data-reload-qr-code="">
            <svg width="75" height="105.75" viewBox="0 0 75 105.75" fill="var(--gray-900)" xmlns="http://www.w3.org/2000/svg">
              <g transform="scale(0.15) translate(0 0)">
                <g transform="matrix(2.399191, 0, 0, 2.399191, -109.938606, -7.37865)" style="">
                  <path d="M224.88,93.12h19.39a5,5,0,0,1,5,5v18.73H254V98.12a9.68,9.68,0,0,0-9.68-9.68H224.88Z"></path>
                  <path d="M50.73,116.85V98.12a5,5,0,0,1,5-5H73.8V88.44H55.73a9.68,9.68,0,0,0-9.68,9.68v18.73Z"></path>
                  <path d="M73.8,291.67H55.73a5,5,0,0,1-5-5V267.94H46.05v18.73a9.68,9.68,0,0,0,9.68,9.68H73.8Z"></path>
                  <path d="M249.27,267.94v18.73a5,5,0,0,1-5,5H224.88v4.68h19.39a9.68,9.68,0,0,0,9.68-9.68V267.94Z"></path>
                  <path
                    d="M244.75,3.65H55.45A9.25,9.25,0,0,0,46.2,12.9V54.46a9.25,9.25,0,0,0,9.25,9.26H126a2.32,2.32,0,0,1,1.64.67l20.74,20.74a2.33,2.33,0,0,0,3.28,0l20.75-20.74a2.28,2.28,0,0,1,1.64-.67h70.58a9.25,9.25,0,0,0,9.25-9.26V12.9A9.18,9.18,0,0,0,244.75,3.65Z">
                  </path>
                </g>
              </g>
            </svg> </label>
        </div>
        <div class="col-6 col-lg-4 mb-3">
          <label class="btn btn-light btn-block d-flex align-items-center justify-content-center" style="height: 125px;">
            <input type="radio" name="frame" value="tooltip_snap_bottom_text" class="custom-control-input" required="required" data-reload-qr-code="">
            <svg width="75" height="105.75" viewBox="0 0 75 105.75" fill="var(--gray-900)" xmlns="http://www.w3.org/2000/svg">
              <g transform="scale(0.15) translate(0 0)">
                <g transform="matrix(2.399191, 0, 0, 2.399191, -109.938606, -7.37865)" style="">
                  <path d="M 225.107 7.755 L 244.497 7.755 C 247.258 7.755 249.497 9.994 249.497 12.755 L 249.497 31.485 L 254.227 31.485 L 254.227 12.755 C 254.227 7.409 249.893 3.075 244.547 3.075 L 225.107 3.075 L 225.107 7.755 Z"></path>
                  <path d="M 50.393 31.485 L 50.393 12.755 C 50.393 9.994 52.632 7.755 55.393 7.755 L 73.463 7.755 L 73.463 3.075 L 55.393 3.075 C 50.047 3.075 45.713 7.409 45.713 12.755 L 45.713 31.485 L 50.393 31.485 Z"></path>
                  <path d="M 73.573 206.799 L 55.503 206.799 C 52.742 206.799 50.503 204.56 50.503 201.799 L 50.503 183.069 L 45.823 183.069 L 45.823 201.799 C 45.823 207.145 50.157 211.479 55.503 211.479 L 73.573 211.479 L 73.573 206.799 Z"></path>
                  <path
                    d="M 249.547 183.069 L 249.547 201.799 C 249.547 204.56 247.308 206.799 244.547 206.799 L 225.157 206.799 L 225.157 211.479 L 244.547 211.479 C 249.893 211.479 254.227 207.145 254.227 201.799 L 254.227 183.069 L 249.547 183.069 Z">
                  </path>
                  <path
                    d="M 244.68 214.77 L 55.38 214.77 C 50.272 214.77 46.13 218.911 46.13 224.02 L 46.13 265.58 C 46.125 270.692 50.268 274.84 55.38 274.84 L 125.93 274.84 C 126.544 274.837 127.134 275.078 127.57 275.51 L 148.31 296.25 C 149.219 297.15 150.682 297.15 151.59 296.25 L 172.34 275.51 C 172.774 275.075 173.366 274.833 173.98 274.84 L 244.56 274.84 C 249.673 274.84 253.816 270.692 253.81 265.58 L 253.81 224.02 C 253.849 218.942 249.758 214.797 244.68 214.77 Z"
                    style="transform-box: fill-box; transform-origin: 50%;" transform="matrix(-1, 0, 0, -1, -0.000006, -0.000011)"></path>
                </g>
              </g>
            </svg> </label>
        </div>
      </div>
    </div>
    <div class="form-group">
      <label for="frame_text"><svg class="svg-inline--fa fa-signature fa-fw fa-sm text-muted mr-1" aria-hidden="true" focusable="false" data-prefix="fas" data-icon="signature" role="img" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 640 512"
          data-fa-i2svg="">
          <path fill="currentColor"
            d="M192 128c0-17.7 14.3-32 32-32s32 14.3 32 32v7.8c0 27.7-2.4 55.3-7.1 82.5l-84.4 25.3c-40.6 12.2-68.4 49.6-68.4 92v71.9c0 40 32.5 72.5 72.5 72.5c26 0 50-13.9 62.9-36.5l13.9-24.3c26.8-47 46.5-97.7 58.4-150.5l94.4-28.3-12.5 37.5c-3.3 9.8-1.6 20.5 4.4 28.8s15.7 13.3 26 13.3H544c17.7 0 32-14.3 32-32s-14.3-32-32-32H460.4l18-53.9c3.8-11.3 .9-23.8-7.4-32.4s-20.7-11.8-32.2-8.4L316.4 198.1c2.4-20.7 3.6-41.4 3.6-62.3V128c0-53-43-96-96-96s-96 43-96 96v32c0 17.7 14.3 32 32 32s32-14.3 32-32V128zm-9.2 177l49-14.7c-10.4 33.8-24.5 66.4-42.1 97.2l-13.9 24.3c-1.5 2.6-4.3 4.3-7.4 4.3c-4.7 0-8.5-3.8-8.5-8.5V335.6c0-14.1 9.3-26.6 22.8-30.7zM24 368c-13.3 0-24 10.7-24 24s10.7 24 24 24H64.3c-.2-2.8-.3-5.6-.3-8.5V368H24zm592 48c13.3 0 24-10.7 24-24s-10.7-24-24-24H305.9c-6.7 16.3-14.2 32.3-22.3 48H616z">
          </path>
        </svg><!-- <i class="fas fa-fw fa-signature fa-sm text-muted mr-1"></i> Font Awesome fontawesome.com --> Frame text</label>
      <input type="text" id="frame_text" name="frame_text" class="form-control " maxlength="64" data-reload-qr-code="">
    </div>
    <div class="form-group" data-range-counter="">
      <label for="frame_text_size" class="d-flex justify-content-between align-items-center"><span><svg class="svg-inline--fa fa-text-height fa-fw fa-sm text-muted mr-1" aria-hidden="true" focusable="false" data-prefix="fas" data-icon="text-height"
            role="img" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 576 512" data-fa-i2svg="">
            <path fill="currentColor"
              d="M64 128V96h64l0 320H96c-17.7 0-32 14.3-32 32s14.3 32 32 32H224c17.7 0 32-14.3 32-32s-14.3-32-32-32H192l0-320h64v32c0 17.7 14.3 32 32 32s32-14.3 32-32V80c0-26.5-21.5-48-48-48H160 48C21.5 32 0 53.5 0 80v48c0 17.7 14.3 32 32 32s32-14.3 32-32zM502.6 41.4c-12.5-12.5-32.8-12.5-45.3 0l-64 64c-9.2 9.2-11.9 22.9-6.9 34.9s16.6 19.8 29.6 19.8h32V352H416c-12.9 0-24.6 7.8-29.6 19.8s-2.2 25.7 6.9 34.9l64 64c12.5 12.5 32.8 12.5 45.3 0l64-64c9.2-9.2 11.9-22.9 6.9-34.9s-16.6-19.8-29.6-19.8H512V160h32c12.9 0 24.6-7.8 29.6-19.8s2.2-25.7-6.9-34.9l-64-64z">
            </path>
          </svg><!-- <i class="fas fa-fw fa-text-height fa-sm text-muted mr-1"></i> Font Awesome fontawesome.com --> Frame text size</span><small class="text-muted" data-range-counter-wrapper="">0</small></label>
      <input id="frame_text_size" type="range" min="-5" max="5" name="frame_text_size" class="form-control-range " data-reload-qr-code="">
    </div>
    <div class="form-group">
      <label for="frame_text_font"><svg class="svg-inline--fa fa-pen-nib fa-fw fa-sm text-muted mr-1" aria-hidden="true" focusable="false" data-prefix="fas" data-icon="pen-nib" role="img" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 512 512"
          data-fa-i2svg="">
          <path fill="currentColor"
            d="M368.4 18.3L312.7 74.1 437.9 199.3l55.7-55.7c21.9-21.9 21.9-57.3 0-79.2L447.6 18.3c-21.9-21.9-57.3-21.9-79.2 0zM288 94.6l-9.2 2.8L134.7 140.6c-19.9 6-35.7 21.2-42.3 41L3.8 445.8c-3.8 11.3-1 23.9 7.3 32.4L164.7 324.7c-3-6.3-4.7-13.3-4.7-20.7c0-26.5 21.5-48 48-48s48 21.5 48 48s-21.5 48-48 48c-7.4 0-14.4-1.7-20.7-4.7L33.7 500.9c8.6 8.3 21.1 11.2 32.4 7.3l264.3-88.6c19.7-6.6 35-22.4 41-42.3l43.2-144.1 2.8-9.2L288 94.6z">
          </path>
        </svg><!-- <i class="fas fa-fw fa-pen-nib fa-sm text-muted mr-1"></i> Font Awesome fontawesome.com --> Frame text font</label>
      <div class="row btn-group-toggle" data-toggle="buttons">
        <div class="col-12 col-lg-4 h-100">
          <label class="btn btn-light btn-block text-truncate active" "="" style=" font-family: Times New Roman, Times, serif !important;">
            <input type="radio" name="frame_text_font" value="times_new_roman" class="custom-control-input" checked="checked" required="required" data-reload-qr-code=""> Times New Roman </label>
        </div>
        <div class="col-12 col-lg-4 h-100">
          <label class="btn btn-light btn-block text-truncate" style="font-family: Georgia, serif !important;">
            <input type="radio" name="frame_text_font" value="georgia" class="custom-control-input" required="required" data-reload-qr-code=""> Georgia </label>
        </div>
        <div class="col-12 col-lg-4 h-100">
          <label class="btn btn-light btn-block text-truncate" style="font-family: Courier, monospace !important;">
            <input type="radio" name="frame_text_font" value="courier" class="custom-control-input" required="required" data-reload-qr-code=""> Courier </label>
        </div>
        <div class="col-12 col-lg-4 h-100">
          <label class="btn btn-light btn-block text-truncate" style="font-family: Arial, sans-serif !important;">
            <input type="radio" name="frame_text_font" value="arial" class="custom-control-input" required="required" data-reload-qr-code=""> Arial </label>
        </div>
        <div class="col-12 col-lg-4 h-100">
          <label class="btn btn-light btn-block text-truncate" style="font-family: Helvetica, Arial, sans-serif !important;">
            <input type="radio" name="frame_text_font" value="helvetica" class="custom-control-input" required="required" data-reload-qr-code=""> Helvetica </label>
        </div>
        <div class="col-12 col-lg-4 h-100">
          <label class="btn btn-light btn-block text-truncate" style="font-family: Verdana, sans-serif !important;">
            <input type="radio" name="frame_text_font" value="verdana" class="custom-control-input" required="required" data-reload-qr-code=""> Verdana </label>
        </div>
        <div class="col-12 col-lg-4 h-100">
          <label class="btn btn-light btn-block text-truncate" style="font-family: Tahoma, Geneva, sans-serif !important;">
            <input type="radio" name="frame_text_font" value="tahoma" class="custom-control-input" required="required" data-reload-qr-code=""> Tahoma </label>
        </div>
        <div class="col-12 col-lg-4 h-100">
          <label class="btn btn-light btn-block text-truncate" style="font-family: Trebuchet MS, sans-serif !important;">
            <input type="radio" name="frame_text_font" value="trebuchet_ms" class="custom-control-input" required="required" data-reload-qr-code=""> Trebuchet MS </label>
        </div>
        <div class="col-12 col-lg-4 h-100">
          <label class="btn btn-light btn-block text-truncate" style="font-family: Courier New, Courier, monospace !important;">
            <input type="radio" name="frame_text_font" value="courier_new" class="custom-control-input" required="required" data-reload-qr-code=""> Courier New </label>
        </div>
        <div class="col-12 col-lg-4 h-100">
          <label class="btn btn-light btn-block text-truncate" style="font-family: Monaco, monospace !important;">
            <input type="radio" name="frame_text_font" value="monaco" class="custom-control-input" required="required" data-reload-qr-code=""> Monaco </label>
        </div>
        <div class="col-12 col-lg-4 h-100">
          <label class="btn btn-light btn-block text-truncate" style="font-family: Comic Sans MS, cursive !important;">
            <input type="radio" name="frame_text_font" value="comic_sans_ms" class="custom-control-input" required="required" data-reload-qr-code=""> Comic Sans MS </label>
        </div>
        <div class="col-12 col-lg-4 h-100">
          <label class="btn btn-light btn-block text-truncate" style="font-family: Impact, fantasy !important;">
            <input type="radio" name="frame_text_font" value="impact" class="custom-control-input" required="required" data-reload-qr-code=""> Impact </label>
        </div>
        <div class="col-12 col-lg-4 h-100">
          <label class="btn btn-light btn-block text-truncate" style="font-family: Luminari, fantasy !important;">
            <input type="radio" name="frame_text_font" value="luminari" class="custom-control-input" required="required" data-reload-qr-code=""> Luminari </label>
        </div>
        <div class="col-12 col-lg-4 h-100">
          <label class="btn btn-light btn-block text-truncate" style="font-family: Baskerville, serif !important;">
            <input type="radio" name="frame_text_font" value="baskerville" class="custom-control-input" required="required" data-reload-qr-code=""> Baskerville </label>
        </div>
        <div class="col-12 col-lg-4 h-100">
          <label class="btn btn-light btn-block text-truncate" style="font-family: Papyrus, fantasy !important;">
            <input type="radio" name="frame_text_font" value="papyrus" class="custom-control-input" required="required" data-reload-qr-code=""> Papyrus </label>
        </div>
        <div class="col-12 col-lg-4 h-100">
          <label class="btn btn-light btn-block text-truncate" style="font-family: Brush Script MT, cursive !important;">
            <input type="radio" name="frame_text_font" value="brush_script_mt" class="custom-control-input" required="required" data-reload-qr-code=""> Brush Script MT </label>
        </div>
      </div>
    </div>
    <div class="form-group custom-control custom-switch">
      <input type="checkbox" class="custom-control-input" id="frame_custom_colors" name="frame_custom_colors" data-reload-qr-code="">
      <label class="custom-control-label" for="frame_custom_colors">
        <svg class="svg-inline--fa fa-droplet fa-fw fa-sm text-muted mr-1" aria-hidden="true" focusable="false" data-prefix="fas" data-icon="droplet" role="img" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 384 512" data-fa-i2svg="">
          <path fill="currentColor"
            d="M192 512C86 512 0 426 0 320C0 228.8 130.2 57.7 166.6 11.7C172.6 4.2 181.5 0 191.1 0h1.8c9.6 0 18.5 4.2 24.5 11.7C253.8 57.7 384 228.8 384 320c0 106-86 192-192 192zM96 336c0-8.8-7.2-16-16-16s-16 7.2-16 16c0 61.9 50.1 112 112 112c8.8 0 16-7.2 16-16s-7.2-16-16-16c-44.2 0-80-35.8-80-80z">
          </path>
        </svg><!-- <i class="fas fa-fw fa-tint fa-sm text-muted mr-1"></i> Font Awesome fontawesome.com --> Apply custom colors </label>
    </div>
    <div class="form-group d-none" data-frame-custom-colors="on">
      <label for="frame_color">Frame color</label>
      <input type="hidden" id="frame_color" name="frame_color" class="form-control " value="#000000" data-reload-qr-code="" data-color-picker="" disabled="disabled">
      <div class="pickr">
        <button type="button" class="pcr-button" role="button" aria-label="toggle color picker dialog" style="transition: none; --pcr-color: rgba(0, 0, 0, 1);"></button>
      </div>
    </div>
    <div class="form-group d-none" data-frame-custom-colors="on">
      <label for="frame_text_color">Frame text color</label>
      <input type="hidden" id="frame_text_color" name="frame_text_color" class="form-control " value="#ffffff" data-reload-qr-code="" data-color-picker="" disabled="disabled">
      <div class="pickr">
        <button type="button" class="pcr-button" role="button" aria-label="toggle color picker dialog" style="transition: none; --pcr-color: rgba(255, 255, 255, 1);"></button>
      </div>
    </div>
  </div>
  <button class="btn btn-block btn-gray-200 my-4" type="button" data-toggle="collapse" data-target="#branding_container" aria-expanded="false" aria-controls="branding_container">
    <svg class="svg-inline--fa fa-copyright fa-fw fa-sm mr-1" aria-hidden="true" focusable="false" data-prefix="fas" data-icon="copyright" role="img" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 512 512" data-fa-i2svg="">
      <path fill="currentColor"
        d="M256 512A256 256 0 1 0 256 0a256 256 0 1 0 0 512zM199.4 312.6c31.2 31.2 81.9 31.2 113.1 0c9.4-9.4 24.6-9.4 33.9 0s9.4 24.6 0 33.9c-50 50-131 50-181 0s-50-131 0-181s131-50 181 0c9.4 9.4 9.4 24.6 0 33.9s-24.6 9.4-33.9 0c-31.2-31.2-81.9-31.2-113.1 0s-31.2 81.9 0 113.1z">
      </path>
    </svg><!-- <i class="fas fa-fw fa-copyright fa-sm mr-1"></i> Font Awesome fontawesome.com --> Add a Logo </button>
  <div class="collapse" id="branding_container" data-parent="#form">
    <div class="form-group" data-file-image-input-wrapper="" data-file-input-wrapper-size-limit="1" data-file-input-wrapper-size-limit-error="Your uploaded file is too big, the maximum file size you are allowed to upload is 1 MB.">
      <label for="qr_code_logo"><svg class="svg-inline--fa fa-eye fa-fw fa-sm text-muted mr-1" aria-hidden="true" focusable="false" data-prefix="fas" data-icon="eye" role="img" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 576 512"
          data-fa-i2svg="">
          <path fill="currentColor"
            d="M288 32c-80.8 0-145.5 36.8-192.6 80.6C48.6 156 17.3 208 2.5 243.7c-3.3 7.9-3.3 16.7 0 24.6C17.3 304 48.6 356 95.4 399.4C142.5 443.2 207.2 480 288 480s145.5-36.8 192.6-80.6c46.8-43.5 78.1-95.4 93-131.1c3.3-7.9 3.3-16.7 0-24.6c-14.9-35.7-46.2-87.7-93-131.1C433.5 68.8 368.8 32 288 32zM144 256a144 144 0 1 1 288 0 144 144 0 1 1 -288 0zm144-64c0 35.3-28.7 64-64 64c-7.1 0-13.9-1.2-20.3-3.3c-5.5-1.8-11.9 1.6-11.7 7.4c.3 6.9 1.3 13.8 3.2 20.7c13.7 51.2 66.4 81.6 117.6 67.9s81.6-66.4 67.9-117.6c-11.1-41.5-47.8-69.4-88.6-71.1c-5.8-.2-9.2 6.1-7.4 11.7c2.1 6.4 3.3 13.2 3.3 20.3z">
          </path>
        </svg><!-- <i class="fas fa-fw fa-sm fa-eye text-muted mr-1"></i> Font Awesome fontawesome.com --> Logo</label>
      <div class="row">
        <div class="col">
          <input id="qr_code_logo" type="file" name="qr_code_logo" accept=".jpg, .jpeg, .png, .gif" class="form-control-file altum-file-input" data-reload-qr-code="">
        </div>
        <div id="qr_code_logo_preview" class="col-3 d-none">
          <div class="d-flex justify-content-center align-items-center">
            <a href="#" target="_blank" data-toggle="tooltip" title="" data-tooltip-hide-on-click="" data-original-title="View">
                <img src="" class="altum-file-input-preview rounded d-none" loading="lazy">
            </a>
          </div>
        </div>
        <div id="qr_code_logo_remove_wrapper" class="col-12 d-none">
          <div class="custom-control custom-checkbox my-2">
            <input id="qr_code_logo_remove" name="qr_code_logo_remove" type="checkbox" class="custom-control-input" data-reload-qr-code="">
            <label class="custom-control-label" for="qr_code_logo_remove">
              <span class="text-muted">Delete uploaded file</span>
            </label>
          </div>
        </div>
        <div id="qr_code_logo_remove_selected_file_wrapper" class="col-12 d-none">
          <label href="#" role="button" id="qr_code_logo_remove_selected_file" type="button" class="my-2 text-muted text-decoration-none">
            <svg class="svg-inline--fa fa-trash-can fa-fw fa-sm mr-1" aria-hidden="true" focusable="false" data-prefix="fas" data-icon="trash-can" role="img" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 448 512" data-fa-i2svg="">
              <path fill="currentColor"
                d="M135.2 17.7C140.6 6.8 151.7 0 163.8 0H284.2c12.1 0 23.2 6.8 28.6 17.7L320 32h96c17.7 0 32 14.3 32 32s-14.3 32-32 32H32C14.3 96 0 81.7 0 64S14.3 32 32 32h96l7.2-14.3zM32 128H416V448c0 35.3-28.7 64-64 64H96c-35.3 0-64-28.7-64-64V128zm96 64c-8.8 0-16 7.2-16 16V432c0 8.8 7.2 16 16 16s16-7.2 16-16V208c0-8.8-7.2-16-16-16zm96 0c-8.8 0-16 7.2-16 16V432c0 8.8 7.2 16 16 16s16-7.2 16-16V208c0-8.8-7.2-16-16-16zm96 0c-8.8 0-16 7.2-16 16V432c0 8.8 7.2 16 16 16s16-7.2 16-16V208c0-8.8-7.2-16-16-16z">
              </path>
            </svg><!-- <i class="fas fa-fw fa-sm fa-trash-alt mr-1"></i> Font Awesome fontawesome.com --> Remove selected file </label>
        </div>
      </div>
      <small class="form-text text-muted">.jpg, .jpeg, .png, .gif allowed. max 1 MB.</small>
    </div>
    <div class="form-group" data-range-counter="">
      <label for="qr_code_logo_size" class="d-flex justify-content-between align-items-center"><span><svg class="svg-inline--fa fa-up-right-and-down-left-from-center fa-fw fa-sm text-muted mr-1" aria-hidden="true" focusable="false" data-prefix="fas"
            data-icon="up-right-and-down-left-from-center" role="img" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 512 512" data-fa-i2svg="">
            <path fill="currentColor"
              d="M344 0H488c13.3 0 24 10.7 24 24V168c0 9.7-5.8 18.5-14.8 22.2s-19.3 1.7-26.2-5.2l-39-39-87 87c-9.4 9.4-24.6 9.4-33.9 0l-32-32c-9.4-9.4-9.4-24.6 0-33.9l87-87L327 41c-6.9-6.9-8.9-17.2-5.2-26.2S334.3 0 344 0zM168 512H24c-13.3 0-24-10.7-24-24V344c0-9.7 5.8-18.5 14.8-22.2s19.3-1.7 26.2 5.2l39 39 87-87c9.4-9.4 24.6-9.4 33.9 0l32 32c9.4 9.4 9.4 24.6 0 33.9l-87 87 39 39c6.9 6.9 8.9 17.2 5.2 26.2s-12.5 14.8-22.2 14.8z">
            </path>
          </svg><!-- <i class="fas fa-fw fa-expand-alt fa-sm text-muted mr-1"></i> Font Awesome fontawesome.com --> Logo size</span><small class="text-muted" data-range-counter-wrapper="">25</small></label>
      <input id="qr_code_logo_size" type="range" min="5" max="40" name="qr_code_logo_size" value="25" class="form-control-range " data-reload-qr-code="">
    </div>
    <div class="form-group" data-file-image-input-wrapper="" data-file-input-wrapper-size-limit="2" data-file-input-wrapper-size-limit-error="Your uploaded file is too big, the maximum file size you are allowed to upload is 2 MB.">
      <label for="qr_code_background"><svg class="svg-inline--fa fa-image fa-fw fa-sm text-muted mr-1" aria-hidden="true" focusable="false" data-prefix="fas" data-icon="image" role="img" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 512 512"
          data-fa-i2svg="">
          <path fill="currentColor"
            d="M0 96C0 60.7 28.7 32 64 32H448c35.3 0 64 28.7 64 64V416c0 35.3-28.7 64-64 64H64c-35.3 0-64-28.7-64-64V96zM323.8 202.5c-4.5-6.6-11.9-10.5-19.8-10.5s-15.4 3.9-19.8 10.5l-87 127.6L170.7 297c-4.6-5.7-11.5-9-18.7-9s-14.2 3.3-18.7 9l-64 80c-5.8 7.2-6.9 17.1-2.9 25.4s12.4 13.6 21.6 13.6h96 32H424c8.9 0 17.1-4.9 21.2-12.8s3.6-17.4-1.4-24.7l-120-176zM112 192a48 48 0 1 0 0-96 48 48 0 1 0 0 96z">
          </path>
        </svg><!-- <i class="fas fa-fw fa-sm fa-image text-muted mr-1"></i> Font Awesome fontawesome.com --> Background image</label>
      <div class="row">
        <div class="col">
          <input id="qr_code_background" type="file" name="qr_code_background" accept=".jpg, .jpeg, .png, .gif" class="form-control-file altum-file-input" data-reload-qr-code="">
        </div>
        <div id="qr_code_background_preview" class="col-3 d-none">
          <div class="d-flex justify-content-center align-items-center">
            <a href="#" target="_blank" data-toggle="tooltip" title="" data-tooltip-hide-on-click="" data-original-title="View">
                <img src="" class="altum-file-input-preview rounded d-none" loading="lazy">
            </a>
          </div>
        </div>
        <div id="qr_code_background_remove_wrapper" class="col-12 d-none">
          <div class="custom-control custom-checkbox my-2">
            <input id="qr_code_background_remove" name="qr_code_background_remove" type="checkbox" class="custom-control-input" data-reload-qr-code="">
            <label class="custom-control-label" for="qr_code_background_remove">
              <span class="text-muted">Delete uploaded file</span>
            </label>
          </div>
        </div>
        <div id="qr_code_background_remove_selected_file_wrapper" class="col-12 d-none">
          <label href="#" role="button" id="qr_code_background_remove_selected_file" type="button" class="my-2 text-muted text-decoration-none">
            <svg class="svg-inline--fa fa-trash-can fa-fw fa-sm mr-1" aria-hidden="true" focusable="false" data-prefix="fas" data-icon="trash-can" role="img" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 448 512" data-fa-i2svg="">
              <path fill="currentColor"
                d="M135.2 17.7C140.6 6.8 151.7 0 163.8 0H284.2c12.1 0 23.2 6.8 28.6 17.7L320 32h96c17.7 0 32 14.3 32 32s-14.3 32-32 32H32C14.3 96 0 81.7 0 64S14.3 32 32 32h96l7.2-14.3zM32 128H416V448c0 35.3-28.7 64-64 64H96c-35.3 0-64-28.7-64-64V128zm96 64c-8.8 0-16 7.2-16 16V432c0 8.8 7.2 16 16 16s16-7.2 16-16V208c0-8.8-7.2-16-16-16zm96 0c-8.8 0-16 7.2-16 16V432c0 8.8 7.2 16 16 16s16-7.2 16-16V208c0-8.8-7.2-16-16-16zm96 0c-8.8 0-16 7.2-16 16V432c0 8.8 7.2 16 16 16s16-7.2 16-16V208c0-8.8-7.2-16-16-16z">
              </path>
            </svg><!-- <i class="fas fa-fw fa-sm fa-trash-alt mr-1"></i> Font Awesome fontawesome.com --> Remove selected file </label>
        </div>
      </div>
      <small class="form-text text-muted">.jpg, .jpeg, .png, .gif allowed. max 2 MB.</small>
    </div>
    <div class="form-group" data-range-counter="" data-range-counter-suffix="%">
      <label for="qr_code_background_transparency" class="d-flex justify-content-between align-items-center"><span><svg class="svg-inline--fa fa-lightbulb fa-fw fa-sm text-muted mr-1" aria-hidden="true" focusable="false" data-prefix="fas"
            data-icon="lightbulb" role="img" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 384 512" data-fa-i2svg="">
            <path fill="currentColor"
              d="M272 384c9.6-31.9 29.5-59.1 49.2-86.2l0 0c5.2-7.1 10.4-14.2 15.4-21.4c19.8-28.5 31.4-63 31.4-100.3C368 78.8 289.2 0 192 0S16 78.8 16 176c0 37.3 11.6 71.9 31.4 100.3c5 7.2 10.2 14.3 15.4 21.4l0 0c19.8 27.1 39.7 54.4 49.2 86.2H272zM192 512c44.2 0 80-35.8 80-80V416H112v16c0 44.2 35.8 80 80 80zM112 176c0 8.8-7.2 16-16 16s-16-7.2-16-16c0-61.9 50.1-112 112-112c8.8 0 16 7.2 16 16s-7.2 16-16 16c-44.2 0-80 35.8-80 80z">
            </path>
          </svg><!-- <i class="fas fa-fw fa-lightbulb fa-sm text-muted mr-1"></i> Font Awesome fontawesome.com --> Background image transparency</span><small class="text-muted" data-range-counter-wrapper="">0%</small></label>
      <input id="qr_code_background_transparency" type="range" min="0" max="95" step="5" name="qr_code_background_transparency" value="0" class="form-control-range " data-reload-qr-code="">
    </div>
    <div class="form-group" data-file-image-input-wrapper="" data-file-input-wrapper-size-limit="2" data-file-input-wrapper-size-limit-error="Your uploaded file is too big, the maximum file size you are allowed to upload is 2 MB.">
      <label for="qr_code_foreground"><svg class="svg-inline--fa fa-images fa-fw fa-sm text-muted mr-1" aria-hidden="true" focusable="false" data-prefix="fas" data-icon="images" role="img" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 576 512"
          data-fa-i2svg="">
          <path fill="currentColor"
            d="M160 32c-35.3 0-64 28.7-64 64V320c0 35.3 28.7 64 64 64H512c35.3 0 64-28.7 64-64V96c0-35.3-28.7-64-64-64H160zM396 138.7l96 144c4.9 7.4 5.4 16.8 1.2 24.6S480.9 320 472 320H328 280 200c-9.2 0-17.6-5.3-21.6-13.6s-2.9-18.2 2.9-25.4l64-80c4.6-5.7 11.4-9 18.7-9s14.2 3.3 18.7 9l17.3 21.6 56-84C360.5 132 368 128 376 128s15.5 4 20 10.7zM192 128a32 32 0 1 1 64 0 32 32 0 1 1 -64 0zM48 120c0-13.3-10.7-24-24-24S0 106.7 0 120V344c0 75.1 60.9 136 136 136H456c13.3 0 24-10.7 24-24s-10.7-24-24-24H136c-48.6 0-88-39.4-88-88V120z">
          </path>
        </svg><!-- <i class="fas fa-fw fa-sm fa-images text-muted mr-1"></i> Font Awesome fontawesome.com --> Foreground image</label>
      <div class="row">
        <div class="col">
          <input id="qr_code_foreground" type="file" name="qr_code_foreground" accept=".jpg, .jpeg, .png, .gif" class="form-control-file altum-file-input" data-reload-qr-code="">
        </div>
        <div id="qr_code_foreground_preview" class="col-3 d-none">
          <div class="d-flex justify-content-center align-items-center">
            <a href="#" target="_blank" data-toggle="tooltip" title="" data-tooltip-hide-on-click="" data-original-title="View">
                <img src="" class="altum-file-input-preview rounded d-none" loading="lazy">
            </a>
          </div>
        </div>
        <div id="qr_code_foreground_remove_wrapper" class="col-12 d-none">
          <div class="custom-control custom-checkbox my-2">
            <input id="qr_code_foreground_remove" name="qr_code_foreground_remove" type="checkbox" class="custom-control-input" data-reload-qr-code="">
            <label class="custom-control-label" for="qr_code_foreground_remove">
              <span class="text-muted">Delete uploaded file</span>
            </label>
          </div>
        </div>
        <div id="qr_code_foreground_remove_selected_file_wrapper" class="col-12 d-none">
          <label href="#" role="button" id="qr_code_foreground_remove_selected_file" type="button" class="my-2 text-muted text-decoration-none">
            <svg class="svg-inline--fa fa-trash-can fa-fw fa-sm mr-1" aria-hidden="true" focusable="false" data-prefix="fas" data-icon="trash-can" role="img" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 448 512" data-fa-i2svg="">
              <path fill="currentColor"
                d="M135.2 17.7C140.6 6.8 151.7 0 163.8 0H284.2c12.1 0 23.2 6.8 28.6 17.7L320 32h96c17.7 0 32 14.3 32 32s-14.3 32-32 32H32C14.3 96 0 81.7 0 64S14.3 32 32 32h96l7.2-14.3zM32 128H416V448c0 35.3-28.7 64-64 64H96c-35.3 0-64-28.7-64-64V128zm96 64c-8.8 0-16 7.2-16 16V432c0 8.8 7.2 16 16 16s16-7.2 16-16V208c0-8.8-7.2-16-16-16zm96 0c-8.8 0-16 7.2-16 16V432c0 8.8 7.2 16 16 16s16-7.2 16-16V208c0-8.8-7.2-16-16-16zm96 0c-8.8 0-16 7.2-16 16V432c0 8.8 7.2 16 16 16s16-7.2 16-16V208c0-8.8-7.2-16-16-16z">
              </path>
            </svg><!-- <i class="fas fa-fw fa-sm fa-trash-alt mr-1"></i> Font Awesome fontawesome.com --> Remove selected file </label>
        </div>
      </div>
      <small class="form-text text-muted">.jpg, .jpeg, .png, .gif allowed. max 2 MB.</small>
    </div>
    <div class="form-group" data-range-counter="" data-range-counter-suffix="%">
      <label for="qr_code_foreground_transparency" class="d-flex justify-content-between align-items-center"><span><svg class="svg-inline--fa fa-lightbulb fa-fw fa-sm text-muted mr-1" aria-hidden="true" focusable="false" data-prefix="fas"
            data-icon="lightbulb" role="img" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 384 512" data-fa-i2svg="">
            <path fill="currentColor"
              d="M272 384c9.6-31.9 29.5-59.1 49.2-86.2l0 0c5.2-7.1 10.4-14.2 15.4-21.4c19.8-28.5 31.4-63 31.4-100.3C368 78.8 289.2 0 192 0S16 78.8 16 176c0 37.3 11.6 71.9 31.4 100.3c5 7.2 10.2 14.3 15.4 21.4l0 0c19.8 27.1 39.7 54.4 49.2 86.2H272zM192 512c44.2 0 80-35.8 80-80V416H112v16c0 44.2 35.8 80 80 80zM112 176c0 8.8-7.2 16-16 16s-16-7.2-16-16c0-61.9 50.1-112 112-112c8.8 0 16 7.2 16 16s-7.2 16-16 16c-44.2 0-80 35.8-80 80z">
            </path>
          </svg><!-- <i class="fas fa-fw fa-lightbulb fa-sm text-muted mr-1"></i> Font Awesome fontawesome.com --> Foreground image transparency</span><small class="text-muted" data-range-counter-wrapper="">0%</small></label>
      <input id="qr_code_foreground_transparency" type="range" min="0" max="95" step="5" name="qr_code_foreground_transparency" value="0" class="form-control-range " data-reload-qr-code="">
    </div>
  </div>
  <button class="btn btn-block btn-gray-200 my-4" type="button" data-toggle="collapse" data-target="#options_container" aria-expanded="false" aria-controls="options_container">
    <svg class="svg-inline--fa fa-wrench fa-fw fa-sm mr-1" aria-hidden="true" focusable="false" data-prefix="fas" data-icon="wrench" role="img" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 512 512" data-fa-i2svg="">
      <path fill="currentColor"
        d="M352 320c88.4 0 160-71.6 160-160c0-15.3-2.2-30.1-6.2-44.2c-3.1-10.8-16.4-13.2-24.3-5.3l-76.8 76.8c-3 3-7.1 4.7-11.3 4.7H336c-8.8 0-16-7.2-16-16V118.6c0-4.2 1.7-8.3 4.7-11.3l76.8-76.8c7.9-7.9 5.4-21.2-5.3-24.3C382.1 2.2 367.3 0 352 0C263.6 0 192 71.6 192 160c0 19.1 3.4 37.5 9.5 54.5L19.9 396.1C7.2 408.8 0 426.1 0 444.1C0 481.6 30.4 512 67.9 512c18 0 35.3-7.2 48-19.9L297.5 310.5c17 6.2 35.4 9.5 54.5 9.5zM80 408a24 24 0 1 1 0 48 24 24 0 1 1 0-48z">
      </path>
    </svg><!-- <i class="fas fa-fw fa-wrench fa-sm mr-1"></i> Font Awesome fontawesome.com --> Quality settings </button>
  <div class="collapse" id="options_container" data-parent="#form">
    <div class="form-group">
      <label for="size"><svg class="svg-inline--fa fa-maximize fa-fw fa-sm text-muted mr-1" aria-hidden="true" focusable="false" data-prefix="fas" data-icon="maximize" role="img" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 512 512"
          data-fa-i2svg="">
          <path fill="currentColor"
            d="M200 32H56C42.7 32 32 42.7 32 56V200c0 9.7 5.8 18.5 14.8 22.2s19.3 1.7 26.2-5.2l40-40 79 79-79 79L73 295c-6.9-6.9-17.2-8.9-26.2-5.2S32 302.3 32 312V456c0 13.3 10.7 24 24 24H200c9.7 0 18.5-5.8 22.2-14.8s1.7-19.3-5.2-26.2l-40-40 79-79 79 79-40 40c-6.9 6.9-8.9 17.2-5.2 26.2s12.5 14.8 22.2 14.8H456c13.3 0 24-10.7 24-24V312c0-9.7-5.8-18.5-14.8-22.2s-19.3-1.7-26.2 5.2l-40 40-79-79 79-79 40 40c6.9 6.9 17.2 8.9 26.2 5.2s14.8-12.5 14.8-22.2V56c0-13.3-10.7-24-24-24H312c-9.7 0-18.5 5.8-22.2 14.8s-1.7 19.3 5.2 26.2l40 40-79 79-79-79 40-40c6.9-6.9 8.9-17.2 5.2-26.2S209.7 32 200 32z">
          </path>
        </svg><!-- <i class="fas fa-fw fa-expand-arrows-alt fa-sm text-muted mr-1"></i> Font Awesome fontawesome.com --> Size</label>
      <div class="input-group">
        <input id="size" type="number" min="50" max="2000" name="size" class="form-control" value="500" data-reload-qr-code="">
        <div class="input-group-append">
          <span class="input-group-text">px</span>
        </div>
      </div>
    </div>
    <div class="form-group">
      <label for="margin"><svg class="svg-inline--fa fa-expand fa-fw fa-sm text-muted mr-1" aria-hidden="true" focusable="false" data-prefix="fas" data-icon="expand" role="img" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 448 512"
          data-fa-i2svg="">
          <path fill="currentColor"
            d="M32 32C14.3 32 0 46.3 0 64v96c0 17.7 14.3 32 32 32s32-14.3 32-32V96h64c17.7 0 32-14.3 32-32s-14.3-32-32-32H32zM64 352c0-17.7-14.3-32-32-32s-32 14.3-32 32v96c0 17.7 14.3 32 32 32h96c17.7 0 32-14.3 32-32s-14.3-32-32-32H64V352zM320 32c-17.7 0-32 14.3-32 32s14.3 32 32 32h64v64c0 17.7 14.3 32 32 32s32-14.3 32-32V64c0-17.7-14.3-32-32-32H320zM448 352c0-17.7-14.3-32-32-32s-32 14.3-32 32v64H320c-17.7 0-32 14.3-32 32s14.3 32 32 32h96c17.7 0 32-14.3 32-32V352z">
          </path>
        </svg><!-- <i class="fas fa-fw fa-expand fa-sm text-muted mr-1"></i> Font Awesome fontawesome.com --> Margin size</label>
      <input id="margin" type="number" min="0" max="25" name="margin" class="form-control" value="0" data-reload-qr-code="">
    </div>
    <div class="form-group">
      <label for="ecc"><svg class="svg-inline--fa fa-check fa-fw fa-sm text-muted mr-1" aria-hidden="true" focusable="false" data-prefix="fas" data-icon="check" role="img" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 448 512" data-fa-i2svg="">
          <path fill="currentColor" d="M438.6 105.4c12.5 12.5 12.5 32.8 0 45.3l-256 256c-12.5 12.5-32.8 12.5-45.3 0l-128-128c-12.5-12.5-12.5-32.8 0-45.3s32.8-12.5 45.3 0L160 338.7 393.4 105.4c12.5-12.5 32.8-12.5 45.3 0z"></path>
        </svg><!-- <i class="fas fa-fw fa-check fa-sm text-muted mr-1"></i> Font Awesome fontawesome.com --> Error correction</label>
      <select id="ecc" name="ecc" class="custom-select" data-reload-qr-code="">
        <option value="L">L - low (7%)</option>
        <option value="M">M - medium (15%)</option>
        <option value="Q">Q - high (25%)</option>
        <option value="H">H - best (30%)</option>
      </select>
    </div>
    <div class="form-group">
      <label for="encoding"><svg class="svg-inline--fa fa-feather-pointed fa-fw fa-sm text-muted mr-1" aria-hidden="true" focusable="false" data-prefix="fas" data-icon="feather-pointed" role="img" xmlns="http://www.w3.org/2000/svg"
          viewBox="0 0 512 512" data-fa-i2svg="">
          <path fill="currentColor"
            d="M278.5 215.6L23 471c-9.4 9.4-9.4 24.6 0 33.9s24.6 9.4 33.9 0l74.8-74.8c7.4 4.6 15.3 8.2 23.8 10.5C200.3 452.8 270 454.5 338 409.4c12.2-8.1 5.8-25.4-8.8-25.4l-16.1 0c-5.1 0-9.2-4.1-9.2-9.2c0-4.1 2.7-7.6 6.5-8.8l97.7-29.3c3.4-1 6.4-3.1 8.4-6.1c4.4-6.4 8.6-12.9 12.6-19.6c6.2-10.3-1.5-23-13.5-23l-38.6 0c-5.1 0-9.2-4.1-9.2-9.2c0-4.1 2.7-7.6 6.5-8.8l80.9-24.3c4.6-1.4 8.4-4.8 10.2-9.3C494.5 163 507.8 86.1 511.9 36.8c.8-9.9-3-19.6-10-26.6s-16.7-10.8-26.6-10C391.5 7 228.5 40.5 137.4 131.6C57.3 211.7 56.7 302.3 71.3 356.4c2.1 7.9 12 9.6 17.8 3.8L253.6 195.8c6.2-6.2 16.4-6.2 22.6 0c5.4 5.4 6.1 13.6 2.2 19.8z">
          </path>
        </svg><!-- <i class="fas fa-fw fa-feather-alt fa-sm text-muted mr-1"></i> Font Awesome fontawesome.com --> Encoding</label>
      <select id="encoding" name="encoding" class="custom-select" data-reload-qr-code="">
        <option value="ISO-8859-1">ISO-8859-1</option>
        <option value="ISO-8859-2">ISO-8859-2</option>
        <option value="ISO-8859-3">ISO-8859-3</option>
        <option value="ISO-8859-4">ISO-8859-4</option>
        <option value="ISO-8859-5">ISO-8859-5</option>
        <option value="ISO-8859-6">ISO-8859-6</option>
        <option value="ISO-8859-7">ISO-8859-7</option>
        <option value="ISO-8859-8">ISO-8859-8</option>
        <option value="ISO-8859-9">ISO-8859-9</option>
        <option value="ISO-8859-10">ISO-8859-10</option>
        <option value="ISO-8859-11">ISO-8859-11</option>
        <option value="ISO-8859-12">ISO-8859-12</option>
        <option value="ISO-8859-13">ISO-8859-13</option>
        <option value="ISO-8859-14">ISO-8859-14</option>
        <option value="ISO-8859-15">ISO-8859-15</option>
        <option value="ISO-8859-16">ISO-8859-16</option>
        <option value="SHIFT-JIS">SHIFT-JIS</option>
        <option value="WINDOWS-1250">WINDOWS-1250</option>
        <option value="WINDOWS-1251">WINDOWS-1251</option>
        <option value="WINDOWS-1252">WINDOWS-1252</option>
        <option value="WINDOWS-1256">WINDOWS-1256</option>
        <option value="UTF-16BE">UTF-16BE</option>
        <option value="UTF-8" selected="selected">UTF-8</option>
        <option value="ASCII">ASCII</option>
        <option value="GBK">GBK</option>
        <option value="EUC-KR">EUC-KR</option>
      </select>
    </div>
  </div>
  <a href="https://sqr.co/register" class="btn btn-block btn-outline-primary mt-4"><svg class="svg-inline--fa fa-plus fa-fw fa-xs mr-1" aria-hidden="true" focusable="false" data-prefix="fas" data-icon="plus" role="img" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 448 512" data-fa-i2svg=""><path fill="currentColor" d="M256 80c0-17.7-14.3-32-32-32s-32 14.3-32 32V224H48c-17.7 0-32 14.3-32 32s14.3 32 32 32H192V432c0 17.7 14.3 32 32 32s32-14.3 32-32V288H400c17.7 0 32-14.3 32-32s-14.3-32-32-32H256V80z"></path></svg><!-- <i class="fas fa-fw fa-xs fa-plus mr-1"></i> Font Awesome fontawesome.com --> Sign up first to Save (Free)</a>
</form>

Text Content

→ Short Links & QR codes for Agencies

 * Blog
 * API
 * Contact
 * Pricing
 * Login
 * Register


URL QR CODE GENERATOR

Generate custom URL QR codes in minutes.

Text
URL
Phone
SMS
Email
WhatsApp
FaceTime
Location
WiFi
Calendar Event
vCard
Crypto
PayPal
UPI Payment
EPC Payment
PIX Payment
URL
URL Create
Dynamic QR code Enabling this will create a QR code that points to an internal
short link, which will redirect to any specified link, dynamically. Change the
destination of your QR code at any time, no reprinting is needed.
Style
Style
Square
Dots
Round
Heart
Diamond
Inner eye style
Square
Dots
Rounded
Diamond
Flower
Leaf
Outer eye style
Square
Circle
Rounded
Flower
Leaf
Custom Colors
Foreground type
Color
Gradient
Foreground color

Foreground gradient style Vertical Horizontal Diagonal Inverse diagonal Radial
Foreground first color

Foreground second color

Background color

Background color transparency0%
Custom eyes color
Eyes inner color

Eyes outer color

Frame
Frame

Frame text
Frame text size0
Frame text font
Times New Roman
Georgia
Courier
Arial
Helvetica
Verdana
Tahoma
Trebuchet MS
Courier New
Monaco
Comic Sans MS
Impact
Luminari
Baskerville
Papyrus
Brush Script MT
Apply custom colors
Frame color

Frame text color

Add a Logo
Logo
Delete uploaded file
Remove selected file
.jpg, .jpeg, .png, .gif allowed. max 1 MB.
Logo size25
Background image
Delete uploaded file
Remove selected file
.jpg, .jpeg, .png, .gif allowed. max 2 MB.
Background image transparency0%
Foreground image
Delete uploaded file
Remove selected file
.jpg, .jpeg, .png, .gif allowed. max 2 MB.
Foreground image transparency0%
Quality settings
Size
px
Margin size
Error correction L - low (7%) M - medium (15%) Q - high (25%) H - best (30%)
Encoding ISO-8859-1 ISO-8859-2 ISO-8859-3 ISO-8859-4 ISO-8859-5 ISO-8859-6
ISO-8859-7 ISO-8859-8 ISO-8859-9 ISO-8859-10 ISO-8859-11 ISO-8859-12 ISO-8859-13
ISO-8859-14 ISO-8859-15 ISO-8859-16 SHIFT-JIS WINDOWS-1250 WINDOWS-1251
WINDOWS-1252 WINDOWS-1256 UTF-16BE UTF-8 ASCII GBK EUC-KR
Sign up first to Save (Free)
Print
Download
Download as SVG Download as PNG Download as JPG Download as WEBP
Embedded data

Make sure to test your QR code before using it in production.

If your QR code is not working you can adjust the "Error correction" in the
"Quality settings" tab.
QR Code seems to be readable.
QR Code might not be readable. Adjust your QR code settings or content.
Copyright © 2024 SQR.
Base
Base 🇳🇱 Dutch 🇫🇷 French 🇮🇹 Italian 🇵🇹 Portuguese 🇷🇺 Russian 🇪🇸
Spanish

 * Blog
 * Affiliate
 * QR Reader
 * Pricing
 * QR Menu
 * Status
 * Privacy
 * Terms
 * Changelog
 * Barcode Generator
 * Barcode Reader
 * Affordable Software
 * API Documentation
 * Documentation