add jotform to specific product pages in shopify

  • Profile Image
    Oliver 
    Asked on July 01, 2021 at 08:34 AM

    We are trying to add a jotform in specific shopify product pages and tried doing what you indicate here

    https://www.jotform.com/blog/shopify-integration/


    However, the code on  cart.liquid is calling to another template (template-cart.liquid). I have tried modifying that code, but have had no luck, and the form is not showing up.


    You can see the code for template-cart.liquid in the link below

    https://www.codepile.net/pile/8wa7D7gz


    And the product page which has a "custom" tag here

    https://www.med24.clinic/collections/covid-19-testing-services/products/pcr-test-with-fit-to-fly-certificate?variant=39358723489923


    I am not sure what is wrong?

    Many thanks

    Oliver

  • Profile Image
    Patrick_R
    Answered on July 01, 2021 at 10:11 AM

    Hello Oliver!

    > However, the code on  cart.liquid is calling to another template (template-cart.liquid). I have tried modifying that code, but have had no luck, and the form is not showing up. You can see the code for template-cart.liquid in the link below https://www.codepile.net/pile/8wa7D7gz

    Hello! I don't see the Jotform code in your template file. Maybe, it isn't saved successfully, can you please try again?

    Once properly setup, the form should show up correctly on the /cart page.

    Let us know how it goes.

    Thank you!

  • Profile Image
    Oliver 
    Answered on July 01, 2021 at 10:31 AM

    Hi Patrick

    Might be because I have been editing it. I have actually managed to insert the code so the form shows, but it breaks the site (the form is rather long!)

    1625149744_60ddd130907a6_Screenshot 2021Also, the user can make the purchase without completing the form, plus if click on the "buy now" button, it skips the cart page (thus the form). Is there any way to make the form show at the checkout page only for certain products?

    adding the code below:

    {% assign needs_form = false %}
    <script
      type="application/json"
      data-section-type="static-cart"
      data-section-id="{{ section.id }}"
      data-section-data
    >
      {
        "not_available_text": {{ 'cart.general.not_available'| t | json }},
        "stock_level_text": {{ 'cart.general.stock_level' | t: stock_count: '** stock_count **' | json }},
        "okay_text": {{ 'cart.general.okay' | t | json }}
      }
    </script>

    <h1 class="page-title">{{ 'cart.general.header' | t }}</h1>

    {% if cart.item_count > 0 %}
      <form
        class="cart"
        action="/cart"
        method="post"
        data-cart
      >
        <div class="cart-header">
          <span class="cart-header-product">{{ 'cart.header.product' | t }}</span>
          <span class="cart-header-price">{{ 'cart.header.price' | t }}</span>
          <span class="cart-header-quantity">{{ 'cart.header.quantity' | t }}</span>
          <span class="cart-header-total">{{ 'cart.header.total' | t }}</span>
        </div>

        <div class="cart-items" data-cart-items>
          {% for line_item in cart.items %}
          {% if line_item.product.tags contains "custom" %}
    {% assign needs_form = true %}
    {% endif %}
            {% include 'line-item', line_item: line_item %}
          {% endfor %}
        </div>

        <div class="cart-tools">
          {% if section.settings.enable_order_notes %}
            <div class="cart-instructions">
              <p>{{ 'cart.general.instructions_title' | t }}</p>
              <textarea
                class="input-field-textarea"
                rows="6"
                name="note"
                placeholder="{{ 'cart.general.instructions_placeholder' | t }}"
                data-cart-note
              >
    {{ cart.note }}</textarea>
            </div>
          {% endif %}
    {% if needs_form %}
    {% include 'custom' %}
    {% else %}
          <div
            class="
              cart-totals-checkout
              {% unless section.settings.enable_order_notes %}cart-totals-checkout-full-width{% endunless %}
            "

          >

            <div class="cart-totals" data-cart-totals>
              {% if cart.cart_level_discount_applications.size > 0 %}
                <div class="cart-discounts">
                  {%- for discount_application in cart.cart_level_discount_applications -%}
                    <div class="cart-discount">
                      <div class="cart-discount-title">
                        {%- include 'icon-discount-tag' -%}
                        {{- discount_application.title -}}
                      </div>
                      <div class="cart-discount-value">-<span class="money">{{ discount_application.total_allocated_amount | money }}</span></div>
                    </div>
                  {%- endfor -%}
                </div>
              {% endif %}
               {% endif %}

              <span class="cart-price money">{{ cart.total_price | money }}</span>

              <p class="cart-message meta">{{ 'cart.general.tax_and_shipping' | t }}</p>
            </div>

            <div class="cart-checkout-buttons-wrapper">

              <button class="cart-button-checkout button"
                type="submit"
                name="checkout"
                value="{{ 'cart.general.submit' | t }}">

                
                {% if section.settings.enable_checkout_lock_icon %}
                  <svg width="20" height="20" viewBox="0 0 20 20" fill="none" xmlns="http://www.w3.org/2000/svg">
                    <path fill-rule="evenodd" clip-rule="evenodd" d="M2.5 11.1667C2.5 10.0622 3.39543 9.16675 4.5 9.16675H15.5C16.6046 9.16675 17.5 10.0622 17.5 11.1667V16.3334C17.5 17.438 16.6046 18.3334 15.5 18.3334H4.5C3.39543 18.3334 2.5 17.438 2.5 16.3334V11.1667Z" fill="currentColor"/>
                    <path d="M5.83337 9.16675V5.83341C5.83337 3.53223 7.69885 1.66675 10 1.66675C12.3012 1.66675 14.1667 3.53223 14.1667 5.83341V9.16675" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>
                  </svg>
                {% endif %}
                <span>{{ 'cart.general.submit' | t }}</span>
              </button>
             
            </div>

            {% if additional_checkout_buttons %}
              <div class="additional-checkout-buttons">
                {{ content_for_additional_checkout_buttons }}
              </div>
            {% endif %}

            {% if settings.enable_currency_converter %}
              <p class="cart-currency-note meta">
                {{ 'cart.general.currency_note_html' | t: currency: shop.currency }}
              </p>
            {% endif %}
            
          </div>
        </div>
      </form>

      {% if section.settings.show_shipping_calculator and cart.requires_shipping %}
        {% include 'shipping-calculator' %}
      {% endif %}
    {% endif %}

    <p class="cart-empty">{{ 'cart.general.empty' | t }} <a target="_blank" href="{{ shop.url }}/collections/all">{{ 'cart.general.continue' | t }}</a></p>

    {% schema %}
    {
      "name": "Cart page",
      "settings": [
        {
          "type": "checkbox",
          "id": "enable_checkout_lock_icon",
          "label": "Show lock icon on checkout button",
          "default": false
        },
        {
          "type": "checkbox",
          "id": "product_show_vendor",
          "label": "Show names of vendors",
          "default": false
        },
        {
          "type": "checkbox",
          "id": "enable_order_notes",
          "label": "Enable order notes",
          "info": "This feature gives your customers the ability to attach a note to the order.",
          "default": true
        },
        {
          "type": "header",
          "content": "Shipping rate calculator"
        },
        {
          "type": "checkbox",
          "id": "show_shipping_calculator",
          "label": "Enable"
        },
        {
          "type": "text",
          "id": "shipping_calculator_default_country",
          "label": "Default country",
          "default": "United States",
          "info": "If a customer is logged in to their account, their default shipping address country will be selected."
        }
      ]
    }

    {% endschema %}
  • Profile Image
    Kenneth_C
    Answered on July 01, 2021 at 01:02 PM

    Hi there,

    I can't seem to locate the form based on the image you share, can you share with us the Direct Form Link of the form?

    Here is how: https://www.jotform.com/help/401-where-to-find-my-form-url.

    Or is it this?

    https://www.jotform.com/form/203065381099356

    Awaiting your response.

    Best.

  • Profile Image
    Oliver 
    Answered on July 01, 2021 at 01:18 PM

    I created an alternative product template for the custom snippet to test, at the moment changed the template to the original as did not want the form to be showing on the live site at the moment

    This is the link to the form

    https://form.jotform.com/211793030837051





  • Profile Image
    Kenneth_C
    Answered on July 01, 2021 at 05:08 PM

    Hi there,

    So as you previously mentioned, the form is too long, so you can set the HEIGHT of the form according to your liking, as well as enable to SCROLLING to YES, for respondents to have access to a vertical scroll.

    Here is the iFrame Embed Code: https://www.jotform.com/help/148-getting-the-form-iframe-code

    <iframe

       id="JotFormIFrame-211793030837051"

       title="BOOKING REFERENCE FORM"

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

       allowtransparency="true"

       allowfullscreen="true"

       allow="geolocation; microphone; camera"

          src="https://form.jotform.com/211793030837051"

       frameborder="0"

       style="

       min-width: 100%;

       height:539px;

       border:none;"

       scrolling="no"

      >

      </iframe>

    You may set the HEIGHT and change the scrolling to yes.

    I hope that helps.
    Best.

  • Profile Image
    Oliver 
    Answered on July 03, 2021 at 08:28 AM

    May thanks for this!

    I have some questions:

    Can the form be made compulsory so that user can’t checkout without filling it in? and also,

    if a user chooses to buy 2 poducts / tests, then data for the second one would also need to be entered, is there anyway to make the form so that "multiple forms" need to be filled? (one for each user / product bought)


  • Profile Image
    Sam_G
    Answered on July 03, 2021 at 10:22 AM

    Hello Oliver,

    It seems you want to make a question required field. You may like to take a look at the following guide which should help you how to set a form fields a required or non-required field:  https://www.jotform.com/help/546-How-to-Set-a-Field-as-Required-or-Non-Required 

    This would not allow the user to checkout without filling all fields.

    I have moved your other concern to ticket https://www.jotform.com/answers/3199051.

    We will respond to it shortly.

  • Profile Image
    gerardw
    Answered on July 05, 2021 at 10:12 AM

    Hello Oliver,

    Please let us know which form are you referring to where this issue with products is occurring.

    You may let us know the form URL as I could neither locate this on the form on your account nor on this form https://form.jotform.com/211793030837051 that you shared above.

  • Profile Image
    Oliver 
    Answered on July 05, 2021 at 10:40 AM
  • Profile Image
    Jovanne_A
    Answered on July 05, 2021 at 11:24 AM

    Hi Oliver,

    I can't seem to find any products listed on this form https://form.jotform.com/211793030837051.

    Could you please provide us with the screenshot of which product field you're referring to so we can check?

    GUIDE: how-to-post-screenshots-to-our-support-forum

    We look forward to your response.

  • Profile Image
    Oliver 
    Answered on July 05, 2021 at 12:13 PM

    Hi,

    sorry for not making myself clear. The form is embedded in a shopify page as per instructed here https://www.jotform.com/blog/shopify-integration/

    Like this, when a product containing a "custom" tag is added to the cart, The cart will not show the "check-out" button but a link to a pop up containing the form.

    So when a product with a "custom" tag is in the cart and another without the custom tag is also added, the "check out" button is still hidden, which is fine. But, if I delete the product with the custom tag leaving the one without the tag, the cart updates automatically but the button does not. The "check out" button only appears after I have refreshed the page, which is not ideal, ideally the button will show at the same time the cart updates.


  • Profile Image
    Patrick_R
    Answered on July 06, 2021 at 02:47 AM

    Hi Oliver! Thank you for clearly specifying your case. However, it seems that this issue is related to the Shopify template engine instead. They are not refreshing the cart page when they should (after re-selection).

    As per their official instructions, if any item with the 'custom' tag is in the cart, Jotform should be shown instead of the checkout button. However, it is not working as expected in this case. The logic that we defined in the cart.liquid template is not implemented here by their liquid engine.

    This problem could be related to the Shopify theme being used as well. But Shopify support should be able to assist with this as we don't have enough details about how their liquid engine works or refreshes the web pages.

    Please get in touch with their support regarding this. They should be able to give a definite answer.

    Thank you!