Embeddable Penguin Customization

Embeddable Penguin is a self-contained Angular Element you include on your existing website. Though it is written in Angular, the element is compatible with other frameworks and even static HTML. It fully supports Angular Form Validation and applies the appropriate classes to the form input fields based on current state. Elements within the form can be styled and the form contains a number of custom div elements that can inherit style as well.

Style

Here is a sample CSS file reflecting typical form styling:

embeddable-penguin {
  width: 300px;
  display: block;
  font-size: 1.2rem;
  font-family: sans-serif;
}

embeddable-penguin input[type="text"],
embeddable-penguin select {
  padding: 10px 10px;
  margin: 8px 0;
  box-sizing: border-box;
  width: 100%;
  font-size: 1.2rem;
  border: 1px solid grey;
  border-radius: 0.25rem;
}

embeddable-penguin button {
  background-color: #6200EA;
  color: white;
  padding: 10px 10px;
  font-size: 1.2rem;
  border-radius: 0.25rem;
  margin-bottom: 8px;
}

embeddable-penguin div.bp-submit-button-container {
  text-align: center;
}

embeddable-penguin button:disabled {
  background-color: lightgrey;
}

embeddable-penguin div.bp-disclaimer {
  font-size: .75rem;
}

embeddable-penguin div.bp-error-text {
  color: red;
  font-size: .85rem;
  margin-bottom: 8px;
}

embeddable-penguin div.bp-success-text span {
  font-size: 1rem;
}

Labels

You can include optional field labels in the form by adding the attribute show_text="True" to the embeddable-penguin element:

<embeddable-penguin client_id="LuW5x2Rd6dq848fkaj3eZah1NFw41nab" show_text="True" />

results matching ""

    No results matching ""