What is JotForm?
JotForm is a free online form builder which helps you create online forms without writing a single line of code. No sign-up required.

At JotForm, we want to make sure that you’re getting the online form builder help that you need. Our friendly customer support team is available 24/7.

We believe that if one user has a question, there could be more users who may have the same question. This is why many of our support forum threads are public and available to be searched and viewed. If you’d like help immediately, feel free to search for a similar question, or submit your question or concern.


  • Profile Image

    How to mail form to liquid variable?

    Asked by nachogarabedian 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:

     

     

    <script src="https://cdn.jotfor.ms/static/prototype.forms.js" type="text/javascript"></script>

    <script src="https://cdn.jotfor.ms/static/jotform.forms.js?3.3.12313" type="text/javascript"></script>

    <script type="text/javascript">

       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&Atilde;&iexcl;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.onSubmissionError="jumpToFirstError";

       });

    </script>

    <link target="_blank" href="https://cdn.jotfor.ms/static/formCss.css?3.3.12313" rel="nofollow" rel="stylesheet" type="text/css" />

    <link type="text/css" rel="stylesheet" target="_blank" href="https://cdn.jotfor.ms/css/styles/nova.css?3.3.12313" rel="nofollow" />

    <link type="text/css" media="print" rel="stylesheet" target="_blank" href="https://cdn.jotfor.ms/css/printForm.css?3.3.12313" rel="nofollow" />

    <link type="text/css" rel="stylesheet" target="_blank" href="https://cdn.jotfor.ms/themes/CSS/566a91c2977cdfcd478b4567.css?" rel="nofollow"/>

    <style type="text/css">

        .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>

     

    <form class="jotform-form" action="https://submit.jotformz.com/submit/60888308282666/" method="post" name="form_60888308282666" id="60888308282666" accept-charset="utf-8">

      <input type="hidden" name="formID" value="60888308282666" />

      <div class="form-all">

        <ul class="form-section page-section">

          <li class="form-line jf-required" data-type="control_textbox" id="id_6">

            <label class="form-label form-label-left form-label-auto" id="label_6" for="input_6">

              Nombre

              <span class="form-required">

                *

              </span>

            </label>

            <div id="cid_6" class="form-input jf-required">

              <input type="text" class=" form-textbox validate[required]" data-type="input-textbox" id="input_6" name="q6_nombre" size="20" value="" />

            </div>

          </li>

          <li class="form-line jf-required" data-type="control_email" id="id_3">

            <label class="form-label form-label-left form-label-auto" id="label_3" for="input_3">

              Correo Electrónico

              <span class="form-required">

                *

              </span>

            </label>

            <div id="cid_3" class="form-input jf-required">

              <input type="email" class=" form-textbox validate[required, Email]" id="input_3" name="q3_correoElectronico" size="30" value="" />

            </div>

          </li>

          <li class="form-line" data-type="control_phone" id="id_4">

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

            <div id="cid_4" class="form-input jf-required">

              <span class="form-sub-label-container" style="vertical-align: top">

                <input class="form-textbox" type="tel" name="q4_numeroDe[area]" id="input_4_area" size="3">

                <span class="phone-separate">

                  &nbsp;-

                </span>

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

              </span>

              <span class="form-sub-label-container" style="vertical-align: top">

                <input class="form-textbox" type="tel" name="q4_numeroDe[phone]" id="input_4_phone" size="8">

                <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>

          <li class="form-line jf-required" data-type="control_textarea" id="id_5">

            <label class="form-label form-label-left form-label-auto" id="label_5" for="input_5">

              Mensaje

              <span class="form-required">

                *

              </span>

            </label>

            <div id="cid_5" class="form-input jf-required">

              <textarea id="input_5" class="form-textarea validate[required]" name="q5_mensaje" cols="40" rows="6"></textarea>

            </div>

          </li>

          <li class="form-line" data-type="control_button" id="id_2">

            <div id="cid_2" class="form-input-wide">

              <div style="margin-left:156px" class="form-buttons-wrapper">

                <button id="input_2" type="submit" class="form-submit-button">

                  Enviar

                </button>

              </div>

            </div>

          </li>

          <li style="display:none">

            Should be Empty:

            <input type="text" name="website" value="" />

          </li>

        </ul>

      </div>

      <input type="hidden" id="simple_spc" name="simple_spc" value="60888308282666" />

      <script type="text/javascript">

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

      </script>

    </form>

    <script type="text/javascript">JotForm.ownerView=true;</script>

    form class JotForm textarea style size
  • Profile Image
    JotForm Support

    Answered by Chriistian on March 30, 2016 at 02: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.

  • Profile Image

    Answered by nachogarabedian 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

  • Profile Image
    JotForm Support

    Answered by Charlie 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.

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

    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.

  • Profile Image

    Answered by nachogarabedian on March 30, 2016 at 01: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

  • Profile Image
    JotForm Support

    Answered by Charlie on March 30, 2016 at 02: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.

     

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

     

    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}. 

     

    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.

  • Profile Image

    Answered by nachogarabedian 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

     

  • Profile Image
    JotForm Support

    Answered by Charlie on March 31, 2016 at 02: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"

          onload="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>

        <script type="text/javascript">

          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.

  • Profile Image

    Answered by nachogarabedian on March 31, 2016 at 03:04 PM

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

  • Profile Image
    JotForm Support

    Answered by Charlie on March 31, 2016 at 04: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.