Skip to main content

Demos

This page provides a series of demos to help you understand and utilize the features of the Pingback Embeddable Form.

Each demo includes a live example and the corresponding code.

Basic Demo​

The following demo shows the simplest way to embed the Pingback Form into your website.

Code​

<pb-embeddable-form></pb-embeddable-form>

Adding Name and Phone Fields​

To include name and phone fields in your form, use the type phone and name inside fields attribute.

Code​

<pb-embeddable-form
  fields='[{"id":"name","label":"Name","type":"name"},{"id":"email","label":"E-mail","type":"email"},{"id":"phone","label":"Phone","type":"phone"}]'
  theme_color="green"
></pb-embeddable-form>

Custom Fields​

You can add custom fields to your form by using the fields attributes.

Code​

<pb-embeddable-form
  fields='[{"id":"email","label":"Email","type":"email", "placeholder": "Enter your email"},{"id":"1","label":"CPF","type":"text","placeholder":"000.000.000-00"},{"id":"2","label":"Matiral Status","type":"dropdown","placeholder":"Select an option","helper":"Select an option","options":["Single","Married", "Divorced"]}]'
></pb-embeddable-form>

Changing Language (Locale)​

Use the locale attribute to change the language of the form. Supported languages include Portuguese (pt), English (en) and Spanish (es).

Portuguese (pt)​

Code​

<pb-embeddable-form
  fields='[{"id":"email","label":"E-mail","type":"email"},{"id":"phone","label":"Phone","type":"phone"}]'
  locale="pt"
  theme_color="green"
></pb-embeddable-form>

English (en)​

Code​

<pb-embeddable-form
  show_phone
  locale="en"
  theme_color="blue"
></pb-embeddable-form>

Spanish (es)​

Code​

<pb-embeddable-form
  fields='[{"id":"email","label":"Correo electrónico","type":"email"},{"id":"phone","label":"Phone","type":"phone"}]'
  locale="es"
  theme_color="green"
></pb-embeddable-form>

Custom Call to Action​

You can customize the call to action button text by using the call_to_action attribute.

Code​

<pb-embeddable-form
  fields='[{"id":"email","label":"Email","type":"email"},{"id":"phone","label":"Phone","type":"phone"}]'
  locale="en"
  call_to_action="Submit"
  theme_color="magenta"
></pb-embeddable-form>

Dark Theme​

To use the dark theme, set the theme_mode attribute to dark.

Code​

<div
  style="background-color: #282828; padding: 2rem; border-radius: 0.5rem; margin-bottom: 1.5rem;"
>
  <pb-embeddable-form theme_mode="dark" theme_color="pink"></pb-embeddable-form>
</div>

Custom HTML with Form​

In this demo, we'll show you how to integrate the Pingback Embeddable Form into a custom HTML layout. This can help you create a more cohesive design and user experience for your website.

Contact Us Form​

Contact Us

Fill out the form below to get in touch with us.

We'll get back to you as soon as possible.

Code​

<div
  style="background-color: #282828; padding: 2rem; border-radius: 0.5rem; margin-bottom: 1.5rem;"
>
  <h2 style="color: #fafafa; margin-bottom: 1rem;">Contact Us</h2>
  <p style="color: #fafafa; margin-bottom: 1.5rem;">
    Fill out the form below to get in touch with us.
  </p>
  <pb-embeddable-form
    fields='[{"id":"name", "label":"Name", "type":"name"},{"id":"email","label":"Email","type":"email"},{"id":"phone","label":"Phone","type":"phone"}, {"id": "subject", "label":"Subject", "required": true, "placeholder": "Enter subject"}]'
    locale="en"
    theme_mode="dark"
    theme_color="teal"
    call_to_action="Send Message"
  ></pb-embeddable-form>
  <p style="color: #fafafa; margin-top: 1.5rem;">
    We'll get back to you as soon as possible.
  </p>
</div>

Newsletter Signup Form​

Subscribe to our Newsletter

Sign up to receive the latest news and updates.

Over 654,000 subscribers

Code​

<div
  style="background-color: #fafafa; padding: 2rem; border-radius: 0.5rem; margin-bottom: 1.5rem;"
>
  <div
    style="display: flex; align-items: center; justify-content: center; width: 100%; margin-bottom: 1.5rem"
  >
    <svg
      width="64"
      height="64"
      viewBox="0 0 24 24"
      fill="none"
      xmlns="http://www.w3.org/2000/svg"
    >
      <path
        d="M16.8686 7.75C17.8238 7.75 18.4956 7.75057 19.0172 7.79254C19.5316 7.83395 19.8289 7.91173 20.051 8.02627C20.2074 8.10694 20.3522 8.20302 20.4835 8.31206L16.8619 11.4163C16.4401 11.7779 16.157 12.0197 15.9239 12.189C15.6981 12.3531 15.5702 12.41 15.4732 12.4345C15.2228 12.4978 14.959 12.4819 14.7179 12.3891C14.6246 12.3531 14.5045 12.2812 14.2999 12.0913C14.0888 11.8952 13.8368 11.6212 13.4614 11.2116L11.5529 9.12957C11.273 8.82423 10.7986 8.8036 10.4932 9.0835C10.1879 9.36339 10.1672 9.83782 10.4471 10.1432L12.3759 12.2472C12.7259 12.6291 13.0185 12.9483 13.2792 13.1904C13.5514 13.4432 13.834 13.656 14.1789 13.7888C14.7091 13.9931 15.2896 14.028 15.8405 13.8888C16.1989 13.7983 16.5049 13.621 16.8055 13.4026C17.0933 13.1935 17.4221 12.9117 17.8155 12.5746L21.2294 9.64834C21.2419 9.76929 21.2489 9.90846 21.2499 10.0712C21.2528 10.5664 21.2014 11.2019 21.1266 12.114L20.9297 14.514C20.8647 15.3064 20.819 15.8555 20.7484 16.2818C20.735 16.3626 20.721 16.4367 20.7064 16.505L18.5695 14.0119C18.2999 13.6974 17.8265 13.661 17.512 13.9306C17.1975 14.2001 17.161 14.6736 17.4306 14.9881L19.8424 17.8019C19.7229 17.8861 19.5944 17.9601 19.4583 18.0227C19.2503 18.1182 18.984 18.1814 18.5373 18.2152C18.0824 18.2495 17.5015 18.25 16.6717 18.25L12.5743 18.25C11.6004 18.25 10.9179 18.2494 10.3912 18.204C9.98873 18.1693 9.72464 18.1113 9.52892 18.0318L12.5304 15.0303C12.8233 14.7374 12.8233 14.2626 12.5304 13.9697C12.2375 13.6768 11.7626 13.6768 11.4697 13.9697L8.45886 16.9805C8.4315 16.924 8.40643 16.8662 8.38375 16.8072C8.29757 16.583 8.25783 16.2848 8.29068 15.7645C8.32397 15.2369 8.42466 14.5619 8.56924 13.5988L9.01771 10.6114C9.0792 10.2017 8.79698 9.81983 8.38736 9.75834C7.97774 9.69684 7.59582 9.97906 7.53433 10.3887L7.08071 13.4103C6.97312 14.127 6.88206 14.7336 6.82912 15.25H4C3.58579 15.25 3.25 15.5858 3.25 16C3.25 16.4142 3.58579 16.75 4 16.75H6.82619C6.85854 16.9542 6.9093 17.152 6.9836 17.3453C7.29518 18.156 7.87847 18.8334 8.6339 19.2619C9.11344 19.5339 9.6491 19.6456 10.2624 19.6984C10.8611 19.75 11.6084 19.75 12.5396 19.75L16.7014 19.75C17.4946 19.75 18.1322 19.75 18.6502 19.7109C19.1831 19.6707 19.6481 19.5861 20.0842 19.3858C20.7837 19.0646 21.3717 18.5472 21.7675 17.8956C22.0163 17.4859 22.1435 17.0385 22.2282 16.5269C22.3102 16.0324 22.3603 15.4215 22.422 14.6684L22.6244 12.202C22.6957 11.3328 22.7533 10.6313 22.7499 10.0622C22.7464 9.47648 22.6798 8.95659 22.4554 8.47153C22.1015 7.70682 21.4952 7.08335 20.7385 6.69313C20.2632 6.44797 19.7403 6.3459 19.1375 6.29738C18.5487 6.24999 17.8164 6.24999 16.9009 6.25L2 6.25003C1.58579 6.25003 1.25 6.58581 1.25 7.00003C1.25 7.41424 1.58579 7.75003 2 7.75003L16.8686 7.75Z"
        fill="#666666"
      />
      <path
        d="M3 9.25C2.58579 9.25 2.25 9.58579 2.25 10C2.25 10.4142 2.58579 10.75 3 10.75H6C6.41421 10.75 6.75 10.4142 6.75 10C6.75 9.58579 6.41421 9.25 6 9.25H3Z"
        fill="#666666"
      />
      <path
        d="M4 12.25C3.58579 12.25 3.25 12.5858 3.25 13C3.25 13.4142 3.58579 13.75 4 13.75L5 13.75C5.41421 13.75 5.75 13.4142 5.75 13C5.75 12.5858 5.41421 12.25 5 12.25L4 12.25Z"
        fill="#666666"
      />
    </svg>
  </div>

  <h2 style="color: #282828; margin-bottom: 1rem; text-align: center;">
    Subscribe to our Newsletter
  </h2>
  <p style="color: #282828; margin-bottom: 1.5rem; text-align: center;">
    Sign up to receive the latest news and updates.
  </p>

  <pb-embeddable-form
    locale="en"
    theme_mode="dark"
    theme_color="yellow"
    call_to_action="Subscribe"
  ></pb-embeddable-form>

  <p
    style="color: #282828; margin-top: 1.5rem; text-align: center; font-size: 0.8rem; font-weight: bold;"
  >
    Over 654,000 subscribers
  </p>
</div>