Bitrix24 Community

Support » Forum » CRM » Working Example: how to create a new lead from a contact form in your site
Pages: 1
RSS
Working Example: how to create a new lead from a contact form in your site
Hello!

I tried using Bitrix24 Form Constructor app from Anton Dolganin, but even though he provided me some support (thanks Anton!) I ran into some limitations.
So,I tried to code a custom contact form to automatically add a new lead from my site to Bitrix24 and I had a hard time doing it (I'm no coder)...
I am using wix for my website, so PHP is not an option for me.

But I think I got it!

I am no HTML/CSS expert (just a curious guy), so it's not optimized and there may be some errors, but it is working as it is.

IMPORTANT:

  1. in the input fields below, the name attribute must be the same as a Bitrix24 Lead field, as described here: https://www.bitrix24.com/about/blogs/community-blog/lead-creation-from-external-services.php;

  2. the ASSIGNED_BY_ID is the user responsible for the new added Lead

  3. the Login and password info must be from a valid Bitrix24 user (if you have a user with permissions only for Leads adding, steps 5 and 6 below may not be necessary);

  4. Add code below to your website (in Wix, inside an iFrame);
  5. after the first form submission, open the console log (in Google Chrome Ctrl+Shift+I) and get the AUTH key in the object returned by the server (copy and paste);

  6. Uncomment AUTH input field below and paste your auth key (don't forget to delete your login and password info!!!);

  7. Check Leads in the CRM and the new contact info should be there.
Feel free to improve this or use it anyway you like.

Enjoy!

Code
<fo rm id="contactform" class="contact-form" action="https://YOURADDRESS.bitrix24.com/crm/configs/import/lead.php" method="post">

<st yle type="text/css">
   /* Add custom styles here */

</style>


    <div id="form-field">
   
   <div class="field-group">
      <input class="input-field" name="NAME" required pattern="\S+" type="text" value="" placeholder="First Name"/>
   </div>

   <div class="field-group">
      <input class="input-field" name="LAST_NAME" required pattern="\S+" type="text" value="" placeholder="Last Name"/>
   </div>

   <div class="field-group">
      <input class="input-field" name="EMAIL_WORK" required pattern="[a-z0-9._%+-]+@[a-z0-9.-]+\.[a-z]{2,4}$" type="email" value="" placeholder="E-mail"/>
   </div>

   <div class="field-group">
      <input class="input-field" name="PHONE_WORK" required pattern="\S+" type="tel" value="" placeholder="Phone"/>
   </div>

   <div class="field-group">
      <input class="input-field" name="UF_CRM_1454096619" required pattern="\S+" type="text" value="" placeholder="Message Subject"/>
   </div>

   <div class="field-group">
      <textarea class="input-field" name="COMMENTS" required pattern="\S+" rows="5" placeholder="Message"></textarea>
   </div>

   <div class="form-submit">
      <input class="button" id="submit" name="form_submit" type="submit" value="Send" />
   </div>

   <input name="LOGIN" type="hidden" value="YOUR@EMAIL.COM" />
   <input name="PASSWORD" type="hidden" value="PASSWORD" />
<!--
   <input name="AUTH" type="hidden" value="AUTH KEY" />
-->
   <input name="TITLE" type="hidden" value="New lead from contact form" />
   <input name="SOURCE_ID" type="hidden" value="WEB" />
   <input name="ASSIGNED_BY_ID" type="hidden" value="1" />

   <div class="response" id="contactResponse-error" style="display:block"></div>
   <div class="response" id="contactResponse-success" style="display:block"></div>


</form>

<sc ript type='text/javascript' src="http://code.jquery.com/jquery-1.9.1.js">
</sc ript>

<sc ript type='text/javascript'>
$( document ).ready(function() {

     $("#contactform").submit(function(event) 
     {
         /* stop form from submitting normally */
         event.preventDefault();

         /* get some values from elements on the page: */
         var $form = $( this ),

         $submit = $form.find( 'button[type="submit"]' ),
         url = $form.attr('action');
   
         /* Send the data using post */
   var posting = $.post( url, $form.serialize())

     .always(function(data) {
      /* successfully submited */
      if(data.status == 200){
         /* formating server response to JSON */
         data.responseText = data.responseText.replace(/"/g, '');
         data.responseText = data.responseText.replace(/'/g, '"');
         data.responseText = data.responseText.replace(/\\/g, '\'');

         var responseText = $.parseJSON(data.responseText);
         console.log(responseText);

         if(responseText.error == 201){
            divResponse = "Message sent!<br>Thank you!"
            $form.trigger("reset");
            $("#contactResponse-success").html(divResponse);
         }else if(responseText.error == 400){
            field = data.responseText.split("'")[1].split("'")[0];

            divResponse = "Please check field '" + field +"'";
            $("#contactResponse-error").html(divResponse);
         }else{
            divResponse = "Server access error.<br>Try again later.";
            $("#contactResponse-error").html(divResponse);
         }
      }else{
         divResponse = "Server communication error.<br>Try again later.";
         $("#contactResponse-error").html(divResponse);
      }

     });

    });


});

</sc ript>
Edited: Matheus - 02/15/2016 23:35:37
I don't know why, but when I post the code it keeps adding a space in the form, style and script HTML tags.
Got no luck editing it, so don't forget to remove those spaces!
Pages: 1
2,000,000+
organizations
are already using Bitrix24