Contact form

Integrating Your Application with InLeads Contact Form Widget

Integrating the InLeads Contact Form Widget into your application allows you to capture leads efficiently by providing a user-friendly contact form directly on your website. This guide will walk you through the steps to integrate the Contact Form Widget.

Step-by-Step Guide to Contact Form Widget Integration

Step 1: Add the Contact Form Widget Container

1. Identify the Placement Area:

   • Determine where you want the contact form to appear on your webpage. This could be on your homepage, a dedicated contact page, or any other relevant section of your site.

2. Add the Container Div:

   • Insert the following <div> tag in the HTML of your chosen page. This will serve as the container for the Contact Form Widget.

   <div id="contact-form-div"></div>

Step 2: Include the Contact Form Widget Script

1. Place the Script Tag:

   • Add the following <script> tag to your HTML file. This script will load the Contact Form Widget from InLeads.

   <script type="text/javascript" src="https://www.inleads.ai/widgets/contact-form-widget/contact-form-widget.js?apiKey=xxxxxx-xxxx-xxxx-xxxx-xxxxxx"></script>

   • Ensure this script is placed appropriately within your HTML document. Typically, this script can be added just before the closing </body> tag to ensure it loads after the rest of the page content.

Customizing the Contact Form Widget

After integrating the Contact Form Widget, you might want to customize its appearance and behavior to better match your website’s design and user experience. Here are some customization options:

• Styling: Use CSS to style the contact form container. You can apply custom styles to the #contact-form-div to adjust the form's appearance.

• Form Fields: Configure the fields included in the contact form through the InLeads dashboard if customization options are available.

Testing the Integration

1. Load Your Webpage:

   • Open your webpage where the Contact Form Widget has been integrated. Ensure the form appears as expected within the #contact-form-div.

2. Submit a Test Form:

   • Fill out and submit the contact form to verify that lead information is correctly captured and sent to InLeads.

3. Check InLeads Dashboard:

   • Log in to your InLeads dashboard to confirm that the test lead submission is recorded correctly.

Troubleshooting Common Issues

• Form Not Displaying: Ensure that the div container and script tag are correctly placed and the script URL is correct.

• Form Submission Issues: Verify that your API key is valid and correctly included in the script URL.

• Styling Conflicts: Check for any CSS conflicts that might affect the appearance of the contact form.

Benefits of Contact Form Widget Integration

• Easy Lead Capture: Provide a seamless way for visitors to contact you and submit their information.

• Increased Engagement: Enhance user experience by integrating a user-friendly contact form.

• Automated Lead Management: Automatically capture and manage leads through the InLeads platform.

By following this detailed guide, you'll successfully integrate the InLeads Contact Form Widget into your application. This integration will streamline your lead capture process and improve user engagement on your website.