0

We have a business requirement to capture country of the lead automatically based on the web-to-lead feature of salesforce where I have inserted this below JS code after the web to-lead form is auto generated but still it is not working

Country

fetch("https://ipinfo.io/").then( (response) => document.getElementById("country").value = response.country ); ----please help this JS code was received by sfdcfox and thanks to him for trying to help me out. But no luck so far. can someone help here? As it is a bit urgent.
1
  • Any help would be much appreciated as its an urgent need..sorry for the hurry Jun 25, 2023 at 9:45

2 Answers 2

0

In the general sense, you just put the data into the variable:

<form
  action="https://webto.salesforce.com/servlet/servlet.WebToLead?encoding=UTF-8"
  method="POST"
>
  <input type="hidden" name="country_code" id="country_code" />
  <input type="hidden" name="state_code" id="state_code" />
  <!-- other fields go here -->
</form>

Then, in your script, you'll load the resource. Note that you should have a valid API key and enable whitelisting for your domain, assuming you want to keep the logic on the frontend. Read Securing your IPinfo token on the frontend. They actually recommend doing this on the server, in which case you can use an IP-address-based solution. Here's a sample implementation. Replace <<token>> with your actual token.

    <script>
      function onload() {
        fetch("https://ipinfo.io/?token=<<token>>")
          .then((response) => response.json())
          .then((data) => {
            document.getElementById("country_code").value = data.country;
            document.getElementById("state_code").value = data.region;
          })
          .catch((error) => console.log(error));
      }
      window.addEventListener("DOMContentLoaded", onload);
    </script>

Edit (entire code sample):

<!DOCTYPE html>
<html>
  <head>
    <!--  ----------------------------------------------------------------------  -->
    <!--  NOTE: Please add the following <META> element to your page <HEAD>.      -->
    <!--  If necessary, please modify the charset parameter to specify the        -->
    <!--  character set of your HTML page.                                        -->
    <!--  ----------------------------------------------------------------------  -->

    <meta http-equiv="Content-type" content="text/html; charset=UTF-8" />
    <script>
      function onload() {
        fetch("https://ipinfo.io/?token=YOUR+TOKEN+HERE")
          .then((response) => response.json())
          .then((data) => {
            document.getElementById("country_code").value = data.country;
            document.getElementById("state_code").value = data.region;
          })
          .catch((error) => console.log(error));
      }
      window.addEventListener("DOMContentLoaded", onload);
    </script>
  </head>
  <body>
    <!--  ----------------------------------------------------------------------  -->
    <!--  NOTE: Please add the following <FORM> element to your page.             -->
    <!--  ----------------------------------------------------------------------  -->

    <form
      action="https://webto.salesforce.com/servlet/servlet.WebToLead?encoding=UTF-8"
      method="POST"
    >
      <input type="hidden" namne="country_code" />
      <input type="hidden" name="oid" value="00D000YOURORGID" />
      <input type="hidden" name="retURL" value="http://www.example.fake/thank-you.html" />

      <!--  ----------------------------------------------------------------------  -->
      <!--  NOTE: These fields are optional debugging elements. Please uncomment    -->
      <!--  these lines if you wish to test in debug mode.                          -->
      <!--  <input type="hidden" name="debug" value=1>                              -->
      <!--  <input type="hidden" name="debugEmail"                                  -->
      <!--  value="[email protected]">                                         -->
      <!--  ----------------------------------------------------------------------  -->

      <label for="first_name">First Name</label
      ><input
        id="first_name"
        maxlength="40"
        name="first_name"
        size="20"
        type="text"
      /><br />

      <label for="last_name">Last Name</label
      ><input
        id="last_name"
        maxlength="80"
        name="last_name"
        size="20"
        type="text"
      /><br />

      <label for="email">Email</label
      ><input
        id="email"
        maxlength="80"
        name="email"
        size="20"
        type="text"
      /><br />

      <label for="company">Company</label
      ><input
        id="company"
        maxlength="40"
        name="company"
        size="20"
        type="text"
      /><br />

      <label for="city">City</label
      ><input
        id="city"
        maxlength="40"
        name="city"
        size="20"
        type="text"
      /><br />

      <input type="hidden" name="country_code" id="country_code" />
      <input type="hidden" name="state_code" id="state_code" />

      <input type="submit" name="submit" />
    </form>
  </body>
</html>
8
  • I tried with this option and added the snippet you mentioned only added script src part with <scrpit src=ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"> before adding your script..but no luck its still do not working. Jun 26, 2023 at 4:34
  • I can grant you access to my org if needed. Please let me know as its a bit urgent @sfdcfox..One quick query did you try this in your org and was it working there? Jun 26, 2023 at 5:05
  • @AritraDasgupta I appreciate the urgency. I have not tried this, but I'll try generating my own form and post a more complete example.
    – sfdcfox
    Jun 26, 2023 at 9:17
  • @AritraDasgupta I managed to get this working locally, and I've edited this answer. Please let me know if that helps.
    – sfdcfox
    Jun 26, 2023 at 10:21
  • I tried with the answers I got so far.would really help if you can paste the full code here instead of JS part as I am still not able to get it work..though the <input type="hidden" name="country" id="country"> and then putting rest of the fields below it works fine and makes country field hidden. the JS part is still not working. I might sound silly but you can just paste your whole code by hiding your orgid and other details which should not be exposed.putting your JS code before this <input type="submit" name="submit"></form></html>. Also specifying the<script src=...../>b4 the <script>. Jun 26, 2023 at 19:34
0

You can add just script tag before closing form tag.

I have tried below code and its working absolutely fine for me.

<script>
  const TOKEN = '<<token>>';
  const BASE_URL = 'https://ipinfo.io';
  let apiEndpoint = BASE_URL + '?token='+TOKEN;

  fetch(apiEndpoint)
  .then((response) => response.json())
  .then((data) => {
    document.getElementById("country").value = data.country;
  })
  .catch((error) => console.log(error));
</script>
3
  • is it the token that gets generated for an user which we pass as a Bearer Token in API request Header. If not then what should be the source of the token? Jun 26, 2023 at 18:59
  • i was able to obtain the token but with this code its updating Address field with the country value fetched from the API response. In my case Country is a custom field created which is of Text type and using the script above its not updating the Country custom field. Also I cant use formula to update the Country with the value present in address as both are different data types. Kindly help as I am stuck and need to provide the solution by tomorrow only. Thanks in advance. Jun 26, 2023 at 21:08
  • Custom field means? you can query any input field and set value in below line document.getElementById("country").value = data.country; Jun 27, 2023 at 6:12

Not the answer you're looking for? Browse other questions tagged .