How to mail form to liquid variable?

nachogarabedian

Asked on March 29, 2016 at 10:34 PM

Hello, I wanted to know if it's possible te mail my form not to anspecific address but to {{ product.vendor }} variable. I'm using shopify and my products vendor names are email addresses. This is my form code:

JotForm.init(function(){

setTimeout(function() {

$('input_3').hint('ex: myname@example.com');

}, 20);

JotForm.alterTexts({"required":"Campo requerido.","requireOne":"Por lo menos un campo requerido","requireEveryRow":"Todas las filas son obligatorias.","requireEveryCell":"Todas las celdas son requeridas.","alphabetic":"Este campo solo puede contener letras","cyrillic":"Este campo solo puede contener caracteres cirílicos","url":"Este campo solo contiene una URL vÃ¡lida","numeric":"Este campo sólo admite valores numéricos","alphanumeric":"Este campo solo puede contener letras y números.","currency":"Este campo sólo puede contener valores de moneda","fillMask":"El valor de campo debe llenar la mascara","incompleteFields":"Existen campos requeridos incompletos. Por favor complételos.","uploadFilesize":"Tamaño del archivo no puede ser mayor que:","uploadFilesizemin":"Tamañao de archivo no puede ser menos de:","confirmClearForm":"¿Está seguro de querer borra el formulario?","lessThan":"Tu cuenta debería ser menor o igual que","email":"Introduzca una dirección e-mail válida","uploadExtensions":"Solo puede subir los siguientes archivos:","pleaseWait":"Por favor, espere ...","confirmEmail":"Correo electrónico no coincide","submissionLimit":"¡Lo siento! Sólo se permite una entrada. Múltiples envíos están desactivados para este formulario.","gradingScoreError":"El puntaje total debería ser sólo \"menos que\" o \"igual que\"","inputCarretErrorA":"El valor introducido no puede ser menor que el mínimo especificado:","inputCarretErrorB":"Entrada no debe ser mas grande que el valor maximo:","maxDigitsError":"El máximo de dígitos permitido es","freeEmailError":"Cuentas de correos gratis no se permiten","minSelectionsError":"El número mínimo de selección requerido es","maxSelectionsError":"El número máximo de selecciones es","pastDatesDisallowed":"La fecha debe ser futura","dateLimited":"Esta fecha no se encuentra disponible.","dateInvalid":"Esta fecha no es valida. El formato de fecha es {format}","multipleFileUploads_typeError":"El fichero {file} posee una extensión no permitida. Sólo están permitidas las extensiones {extensions}.","multipleFileUploads_sizeError":"{file} es demasiado grande; el tamaño del archivo no debe superar los {sizeLimit}.","multipleFileUploads_minSizeError":"{file} is demasiado pequeño, el tamaño mínimo de fichero es: {minSizeLimit}.","multipleFileUploads_emptyError":"El fichero {file} está vacío; por favor, selecciona de nuevo los ficheros sin él.","multipleFileUploads_onLeave":"Se están cargando los ficheros, si cierras ahora, se cancelará dicha carga.","multipleFileUploads_fileLimitError":"Solo {fileLimit} carga de archivos permitida.","generalError":"Existen errores en el formulario, por favor corríjalos antes de continuar.","generalPageError":"Hay errores en esta página. Por favor, corríjalos antes de continuar.","wordLimitError":"Too many words. The limit is","wordMinLimitError":"Too few words. The minimum is","characterLimitError":"Too many Characters. The limit is","characterMinLimitError":"Too few characters. The minimum is","ccInvalidNumber":"su número de terjeta de crédito no es válido","ccInvalidCVC":"El número CVC no es válido.","ccInvalidExpireDate":"La fecha de expiración no es válida","ccMissingDetails":"Por favor rellene los datos de su Tarjeta de Crédito","ccMissingProduct":"Por favor seleccione al menos un producto.","ccMissingDonation":"Ingresa por favor una cantidad a donar","disallowDecimals":"Por favor, introduzca un número entero."});

JotForm.clearFieldOnHide="disable";

JotForm.onSubmissionDISABLEDerror="jumpToFirstError";

});

</script>

.form-label-left{

width:150px !important;

}

.form-line{

padding-top:12px;

padding-bottom:12px;

}

.form-label-right{

width:150px !important;

}

.form-all{

width:690px;

color:#555 !important;

font-family:"Lucida Grande", "Lucida Sans Unicode", "Lucida Sans", Verdana, sans-serif;

font-size:14px;

}

</style>

Nombre

*

</span>

</label>

</div>

</li>

Correo Electrónico

*

</span>

</label>

</div>

</li>

<label class="form-label form-label-left form-label-auto" id="label_4" for="input_4"> Número de teléfono </label>

 -

</span>

<label class="form-sub-label" for="input_4_area" id="sublabel_area" style="min-height: 13px;"> Area Código </label>

</span>

<label class="form-sub-label" for="input_4_phone" id="sublabel_phone" style="min-height: 13px;"> Número de teléfono </label>

</span>

</div>

</li>

Mensaje

*

</span>

</label>

</div>

</li>

Enviar

</button>

</div>

</li>

Should be Empty:

</li>

</ul>

</div>

document.getElementById("si" + "mple" + "_spc").value = "60888308282666-60888308282666";

</script>

</form>

Chriistian Jotform Support

Replied on March 30, 2016 at 2:51 AM

If I understand correctly, you want to send the submission data of the form (http://www.jotform.com/form/60888308282666) to the email address (Correo Electrónico) field in your form? If that is so, then you can achieve that by adding an autoresponder in your form and using Correo Electrónico as the recipient e-mail.

Here's a guide that can help you set it up: Creating a Form Autoresponder.

Here's a cloned demo that you can see in action: https://form.jotform.com/60891700048959

When you submit the form, an autoresponder email will be sent to the email address that you entered in the Correo Electrónico field.

If you need further assistance, please let us know.
Regards.

nachogarabedian

Replied on March 30, 2016 at 10:21 AM

Hello, thanks for your reply. That's not what I want. I have this form on every product of my online store, each product has a product vendor field which is filled with his email address. I want the email not to be sent to an specific email address but to a liquid variable such as {{ product.vendor }}. So this way the form is sent to the product vendor of each of the products from where is being send.

So to resume, I need to know what part of the code is the one that states to whom (email address) is the form being send to, so I can modify that part of the code.

Thanks

Charlie

Replied on March 30, 2016 at 12:23 PM

You can set another email field, set it to hidden and modify that one and assign your liquid variable.

How to mail form to liquid variable? Image 1 Screenshot 30

Then create an autoresponder and map the hidden email field (the one with the liquid variable) as the recipient email address.

How to mail form to liquid variable? Image 2 Screenshot 41

Please note that if you are using the form's full source code, you'll need to get a fresh copy of it every time you are making changes using the online form builder.

Let us know if this will work for you.

nachogarabedian

Replied on March 30, 2016 at 1:43 PM

That's great, it's fully working. Thanks a lot.

I have another question. Can I do the same with "Sender Name" and "Reply to email", I mean choosing a field from the form to fill that details.

Regards

Charlie

Replied on March 30, 2016 at 2:56 PM

Yes, that is possible, you can't map the fields BUT you can use the form field name tags.

Example:

1. Here, I'll set two hidden fields, one for the sender name and one for the "Reply-To Email". Now navigate to the properties and get their field names.

How to mail form to liquid variable? Image 1 Screenshot 40

2. Here the field name tag for "Hidden Name" is {hiddenName}.

How to mail form to liquid variable? Image 2 Screenshot 51

3. In the autoresponder, you cannot map these fields, BUT you can use the field name tags. Here I set the "Sender Name" as {hiddenName} and the "Reply-To Email" as {hiddenEmail}.

How to mail form to liquid variable? Image 3 Screenshot 62

The tags will be dependent on your own fields. After setting it like that, you can now use the liquid variables and assign them to your hidden fields.

Let us know if that works for you.

nachogarabedian

Replied on March 31, 2016 at 12:10 PM

Thanks Charlie. That was really helpfull. Sorry to bother so much but I have another problem.

The form was working fine until something changed, it wasn't me I didn't make any changes and my shoppify support neither. The thing is that when I submit the form instead of submitting what it does is to add the product to the cart. If I put the form on another page that is not a product it works just fine but if it's submitted from a product it just add the product to cart. You can see the form here:

https://www.skatemag.com.ar/collections/gorras/products/gorra-zelva-dorada-marron

You have to press "Contactar al vendedor". It's in spanish

Thanks

Charlie

Replied on March 31, 2016 at 2:48 PM

Unfortunately, it seems like if you'll use the form's full source code and embed it on your Shopify's product page, it conflicts with your other scripts, causing a conflict. The problem may have happens depending on how the browser is loading the scripts. At first try it works, but doing multiple submissions might show the problem.

Would it be possible to pass your liquid variable in an iFrame embed code instead of the full source code? Here's how to get your iFrame embed code in JotForm: https://www.jotform.com/help/148-Getting-the-Form-iFrame-Code

Here's an example on how I will pass the liquid variable in the iFrame embedded code:

Example:

<iframe

id="JotFormIFrame"

onDISABLEDload="window.parent.scrollTo(0,0)"

allowtransparency="true"

src="https://form.jotformz.com/60888308282666?nombre={{product.vendor}}&correoElectronico={{product.email}}"

frameborder="0"

style="width:100%;

height:539px;

border:none;"

scrolling="no">

</iframe>

window.handleIFrameMessage = function(e) {

var args = e.data.split(":");

var iframe = document.getElementById("JotFormIFrame");

if (!iframe)

return;

switch (args[0]) {

case "scrollIntoView":

iframe.scrollIntoView();

break;

case "setHeight":

iframe.style.height = args[1] + "px";

break;

case "collapseErrorPage":

if (iframe.clientHeight > window.innerHeight) {

iframe.style.height = window.innerHeight + "px";

}

break;

case "reloadPage":

window.location.reload();

break;

}

var isJotForm = (e.origin.indexOf("jotform") > -1) ? true : false;

if(isJotForm && "contentWindow" in iframe && "postMessage" in iframe.contentWindow) {

var urls = {"docurl":encodeURIComponent(document.URL),"referrer":encodeURIComponent(document.referrer)};

iframe.contentWindow.postMessage(JSON.stringify({"type":"urls","value":urls}), "*");

}

};

if (window.addEventListener) {

window.addEventListener("message", handleIFrameMessage, false);

} else if (window.attachEvent) {

window.attachEvent("onmessage", handleIFrameMessage);

}

if(window.location.href && window.location.href.indexOf("?") > -1) {

var ifr = document.getElementById("JotFormIFrame");

var get = window.location.href.substr(window.location.href.indexOf("?") + 1);

if(ifr && get.length > 0) {

var src = ifr.src;

src = src.indexOf("?") > -1 ? src + "&" + get : src + "?" + get;

ifr.src = src;

}

</script>

Noticed the highlighted yellow in my iframe code? I presume you can prepopulate the form's hidden fields using the URL parameter with the liquid variable. Here's a guide about it: https://www.jotform.com/help/71-Prepopulating-Fields-to-Your-JotForm-via-URL-Parameters. Instead of prepopulating the form's direct link. We will populate the src link in the iframe tag.

Let us know if that will work.

nachogarabedian

Replied on March 31, 2016 at 3:04 PM

Charlie. You are a genuis, thanks to you I'm able to finally finish my website. Thanks a lot man! Regards

Charlie

Replied on March 31, 2016 at 4:11 PM

Thank you for the kind words :)

If you need our help again, please do not hesitate to visit us here in the forum.