...
Token: It is a security token or key automatically generated by Sagicc. It functions as an identifier for the channel and cannot be edited.
Authorized Domain: Allows specifying the domain or URL of the page on which the form will be embedded to connect with Sagicc. This way, Sagicc will only allow information capture from this authorized domain.
Redirect URL: It is the URL of the page to which the customer will be redirected once they enter the form information and click Send. In case you do not specify a redirect URL, a basic message will be displayed informing the successful submission of the form.
Form Template: It is an example template to embed a form on your company's website. It is pure HTML code that you can add to your website's source code if you do not have a form, and modify it to suit your requirements. If you already have a form, you can modify it and point it to the URL shown in the template.
...
| Info |
|---|
Copy and paste this template into the source code of your company's website and adapt it to your business requirements. You can apply CSS styles to modify the appearance of the elements or add additional HTML or Javascript code. To make these changes, seek the advice of a person with basic programming knowledge. |
| Bloque de código |
|---|
<form id="sagicc-form-captcha" action="'.env('APP_URL').'/api/v2/canal-website/website-callback" method="post" enctype="multipart/form-data" style="font-family: Arial;">
<input type="hidden" id="sagicc_token" name="sagicc_token" value="2b406a62f1dad21cd0ebcf25e08e6f92">
<div style="margin-bottom: 15px;">
<label for="nombre" style="display: inline-block; max-width: 100%; margin-bottom: 5px; font-weight: 700;">Nombre:</label>
<input type="text" id="nombre" name="nombre" required style="display: block; width: 100%; height: 34px; padding: 6px 12px; font-size: 14px; line-height: 1.42857143; color: #555; background-color: #fff; background-image: none; border: 1px solid #ccc; border-radius: 4px;" />
</div>
<div style="margin-bottom: 15px;">
<label for="apellido" style="display: inline-block; max-width: 100%; margin-bottom: 5px; font-weight: 700;">Apellido:</label>
<input type="text" id="apellido" name="apellido" required style="display: block; width: 100%; height: 34px; padding: 6px 12px; font-size: 14px; line-height: 1.42857143; color: #555; background-color: #fff; background-image: none; border: 1px solid #ccc; border-radius: 4px;">
</div>
<div style="margin-bottom: 15px;">
<label for="email" style="display: inline-block; max-width: 100%; margin-bottom: 5px; font-weight: 700;">Correo Electrónico:</label>
<input type="email" id="email" name="email" required style="display: block; width: 100%; height: 34px; padding: 6px 12px; font-size: 14px; line-height: 1.42857143; color: #555; background-color: #fff; background-image: none; border: 1px solid #ccc; border-radius: 4px;">
</div>
<div style="margin-bottom: 15px;">
<label for="telefono" style="display: inline-block; max-width: 100%; margin-bottom: 5px; font-weight: 700;">Teléfono:</label>
<input type="text" id="telefono" name="telefono" required style="display: block; width: 100%; height: 34px; padding: 6px 12px; font-size: 14px; line-height: 1.42857143; color: #555; background-color: #fff; background-image: none; border: 1px solid #ccc; border-radius: 4px;">
</div>
<div style="margin-bottom: 15px;">
<label for="mensaje" style="display: inline-block; max-width: 100%; margin-bottom: 5px; font-weight: 700;">Mensaje:</label>
<textarea id="mensaje" name="mensaje" rows="4" required style="display: block; width: 100%; padding: 6px 12px; font-size: 14px; line-height: 1.42857143; color: #555; background-color: #fff; background-image: none; border: 1px solid #ccc; border-radius: 4px;"></textarea>
</div>
<div style="margin-bottom: 15px;">
<label for="file" style="display: inline-block; max-width: 100%; margin-bottom: 5px; font-weight: 700;">Adjunto:</label>
<input type="file" id="files[]" name="files[]" style="display: block; width: 100%;">
</div>
<div style="max-width: 100%;">
<div style="display: flex; flex-direction: column; justify-content: center;">
<p style="margin: 6px 0px; color: #ee7e6a;" id="sagicc-status"></p>
</div>
<div style="margin-bottom: 10px; display: flex;">
<input type="text" id="sagicc-text-captcha" readonly style="text-decoration: line-through; font-weight: bold; text-align: center; font-size: 22px; background-color: #ccc; border-radius: 4px; border: 1px solid #ccc; padding: 6px; outline: none; color: #1d1d1d;">
<button type="button" id="sagicc-btn-generate" style="padding: 4px 8px; margin-left: 10px; font-size: 12px; font-weight: 400; line-height: 1.42857143; text-align: center; white-space: nowrap; vertical-align: middle; touch-action: manipulation; cursor: pointer; user-select: none; background-image: none; border: 1px solid transparent; border-radius: 4px; color: #333; background-color: #fff; border-color: #ccc;">Refrescar</button>
</div>
<div style="margin-bottom: 10px; display: flex; flex-direction: column;">
<small style="margin-bottom: 10px;"><b>Digite los caracteres de la imagen de arriba</b></small>
<input type="text" id="sagicc-int-captcha" placeholder="Enter the captcha.." style="border: 2px solid #ccc; outline: none; border-radius: 6px; padding: 6px; font-size: 16px; font-weight: bold; text-decoration: none;color: #555;width: 50%;">
</div>
</div>
<button type="submit" id="sagicc-btn-submit" style="display: inline-block; padding: 6px 12px; margin-bottom: 0; font-size: 14px; font-weight: 400; line-height: 1.42857143; text-align: center; white-space: nowrap; vertical-align: middle; touch-action: manipulation; cursor: pointer; user-select: none; background-image: none; border: 1px solid transparent; border-radius: 4px; color: #333; background-color: #fff; border-color: #ccc;">Enviar</button>
<script type="text/javascript" src="https://static.sagicc.co/webform/v2/static/js/sagicc-webform.js"></script>
</form>
|
...