1.2.0 • Published 4 years ago
@p9dig/lp9-form v1.2.0
Instalaçao
npm install --save lp9-form
Como Usar
Para utilizar o LP9 Form é simples, basta importar o componente e passar as configurações do cliente, que são, o clientId e o campaignId.
import React, { Component } from 'react'
import LP9Formulario from 'lp9-form'
const configuration = {
clientId: 'a12hk12h23112',
campaignId: '8237493nkj123'
}
class Example extends Component {
render () {
return (
<LP9Formulario {...configuration}/>
)
}
}
Guia de Estilos
O LP9 Form já conta com um estilo default, para realizar a personalização desses estilos, é indicado utilizar as classes CSS já definidas para o componente.
.lp9-form {
background-color: #f1f1f1;
padding: 25px;
width: 300px;
border-radius: 5px;
&__input-group {
display: flex;
margin-bottom: 10px;
flex-direction: column;
input, select {
padding-left: 10px;
margin: 5px 0;
font-size: 14px;
border-radius: 5px;
border: none;
outline: none;
height: 30px;
background-color: #fff;
}
}
&__submit {
margin-top: 20px;
width: 100%;
background-color: #4D4D4C;
font-size: 18px;
border-radius: 5px;
border: none;
color: #f1f1f1;
padding: 10px 0;
cursor: pointer;
outline: none;
}
&__status-wrapper {
width: 300px;
height: 440px;
border-radius: 5px;
display: flex;
justify-content: center;
background-color: #f1f1f1;
align-items: center;
}
&__error {
display: flex;
justify-content: flex-start;
align-items: center;
font-size: 10px;
font-weight: bold;
color: #f11;
img {
margin-right: 5px;
width: 15px;
height: 15px;
fill: #f11;
}
}
&__status-content) {
display: flex;
flex-direction: column;
align-items: center;
p {
margin: 0;
font-size: 18px;
}
img {
width: 60px;
height: 60px;
margin-bottom: 20px;
}
a {
font-size: 18px;
margin: 5px 0;
}
}
}
Live Demo
Vejá como o projeto está em sua fase atual no Live Demo.