Log in to your IDXAddons platform account

In the main menu, select Custom Forms App option.

The custom form for leads sign up will look like this in your website:

To start customizing your custom form, follow these steps:

• Widget Option: The first option is the widget. Here, you can add your Sign-Up Custom Form Widget to any page you need. Simply click the Copy Code button to proceed.
• Title Option (optional): You can write the name you want to appear on the form. To save and apply the changes, click the Save Title button.
• Redirect URL (optional): Enter the URL where you'd like to redirect your leads after they submit the form. If no URL is specified, leads will remain on the same page. To save and apply this change, click the Save URL button.

CSS Customization: You can further customize the form's appearance using CSS. Once you're done, simply click the Save Changes button to apply all updates.

After your leads submit the form, you'll receive an email like the following:

The information will also be added to the lead notes.

The Contact Custom Form widget needs to be added in pages where an IDX Broker contact form is used.

The contact form will look like this in your website:

• Widget Option: The Contact Custom Form Widget must be added to pages where an IDX Broker contact form is used. Click the Copy Code button to copy the script to your clipboard.
• Title Option (optional): Enter the title you want for the header of your contact form. To save and apply the changes, click the Save Title button.

You can customize the CSS to adjust the form’s appearance. By default, the contact form displays a single field for the full name. However, this can be customized to hide the full name input and display separate fields for the first name and last name. For example, you can add specific styles to achieve this customization.

After you've finished, just click on the "Save Changes" button.

For this example, we will paste the code in the Details page Sub-headers

Log into your IDX broker account and access this page: IDX Broker Sub-headers

Then, click on the "Pages" tab and select the "Details" page.

Turn the WYSIWYG off.

You may find that there is or isn't code there. You should never remove any codes you have there since you might lose styles and customizations if you remove them. Paste the widget along with the other codes. You can paste it in the beginning or in the end of that section, but never in the middle of it.

As you can see, the form is added at the beginning of the details page.

Lets move the position of the element before the map. To do this, we will add this piece of code to the sub-header (this is just an example and the element can be named different in your site):

Lets move the position of the element before the map. To do this, we will add this piece of code to the sub-header (this is just an example and the element can be named different in your site):

                                    <script type="text/javascript">
                                        window.onload = function() { 
                                            idx('#details-container').appendTo(idx('#IDX-details-row-content'));
                                        }
                                    <script>
                                

Click on Save Changes and now you'll see the contact form in its new position.

Allows you to add a custom contact form to any page on your website. Leads submitted through the form are automatically registered using the IDX Broker API, streamlining the management and tracking of contact data.