Connect Custom HTML Form
to Odoo CRM

Go to your Odoo website. Navigate to the page where the custom form already exists. Click the Edit button (top right) to enter the website editor.

In the left sidebar, click BLOCKS. Scroll down until you see the “Form” block (it has a form icon). It is usually near “CTA Badge”, “Blockquote” and “Countdown”.

Click and drag the Form block. Drop it anywhere on the page — it does not matter where because we will hide it with CSS later. Drop it just below the section that has the custom form.

Click on the form you just dropped. In the right panel under CUSTOMIZE, find the Action dropdown. It will say “Send an E-mail” by default.

Click it and look for “Create a Lead” or type crm.lead in the search box. Select it.

Look at the custom HTML form on the page. Note down every field it has. For example:

• Name input field
• Phone number input
• Dropdown (interest/event type)

The Odoo native form needs to have at least the same fields so data can be copied across using JavaScript.

Click on a field in the Odoo form to select it. In the right panel you will see its settings — Type, Label, Visibility.

To add a field, click the + Field button at the top of the right panel. A dropdown will appear showing all CRM fields available — scroll and select the one you need.

To delete a field you do not need, select it and press the trash icon in the panel.

Some fields like Email are required by Odoo but we do not want to show them to users. To hide them:

• Click the field (e.g. Email)
• In the right panel, find Visibility and set it to “Hidden”
• Then set a default value — e.g. noreply@medkon.in — so the field is not empty on submit

Click Save in the top bar. This is important — the Odoo form field IDs are only stable after saving. If you skip this step, the IDs you collect in Step 3 may change.

Go to the live URL of the page. Make sure you are NOT in the website editor — click Preview or open the URL directly in a new tab.

Press F12 (or right-click anywhere → Inspect). Click the Console tab. Paste this command and press Enter:

document.querySelectorAll('form[action="/website/form/"] input, form[action="/website/form/"] select, form[action="/website/form/"] textarea').forEach(function(el) { console.log(el.name, '|', el.id, '|', el.type); })

You will see output like this:

name                | owude1wmma9   | text
phone               | ovpkeyzraqc   | tel
x_studio_event_type | o8alwh71bxhb  | text
email_from          | o382en45sli4  | email

Copy this output into a notepad. You will need the IDs (the middle column) in the next step to build the JavaScript bridge.

In Odoo website editor, click on the section that contains your custom HTML. Click Edit in HTML editor or the code icon (</>) to open the raw HTML.

Find the <script> block in your custom HTML. Replace the existing submit handler with this template — filling in the IDs from Step 3:

// ── Bridge: Custom Form → Odoo CRM ──
var form       = document.getElementById('YOUR_CUSTOM_FORM_ID');
var successBox = document.getElementById('YOUR_SUCCESS_DIV_ID');

if (form) {
  form.addEventListener('submit', function(e) {
    e.preventDefault();

    // 1. Read values from your custom form fields
    var name     = document.getElementById('YOUR_NAME_INPUT_ID').value.trim();
    var phone    = document.getElementById('YOUR_PHONE_INPUT_ID').value.trim();
    var interest = document.getElementById('YOUR_SELECT_ID').value;

    // 2. Basic validation
    if (!name || phone.length < 10 || !interest) {
      alert('Please fill all fields correctly.');
      return;
    }

    // 3. Copy values into Odoo's hidden native form
    //    Use the IDs from the browser console (Step 3)
    document.getElementById('ODOO_NAME_FIELD_ID').value     = name;
    document.getElementById('ODOO_PHONE_FIELD_ID').value    = phone;
    document.getElementById('ODOO_INTEREST_FIELD_ID').value = interest;

    // 4. Click Odoo's native submit button — handles CSRF automatically
    document.querySelector('.s_website_form_send').click();

    // 5. Show success message, hide custom form
    form.style.display = 'none';
    if (successBox) successBox.style.display = 'block';
  });
}

If the page has more than one Odoo native form, document.querySelector('.s_website_form_send') will click the first one it finds. To target the correct one, give the Odoo submit button a unique ID in the HTML editor and use document.getElementById('your-unique-id').click() instead.

In the Odoo website editor, go to Customize → Edit CSS. Add this single line:

.s_website_form { display: none !important; }

On the live page, fill in your custom form with test data:

• Name: Test Lead
• Phone: 9999999999
• Interest: Select any option

Click submit. The success message should appear and the form should hide.

Go to CRM → Leads in the Odoo backend. The new lead should appear at the top with the name, phone, and event type you entered.

After confirming everything works, go to CRM and delete the test lead so it does not pollute your real pipeline data.

• Your custom form HTML — copy the entire <form>…</form> block from the HTML editor in Odoo
• Odoo field IDs output — the console output from Step 3 (the name | id | type list)

Open Claude (claude.ai) or any AI assistant. Paste this prompt — replacing the two sections marked with [ ]:

I have a custom HTML form on an Odoo website page. I also have an Odoo native
form hidden on the same page that connects to Odoo CRM.

My goal: When the user submits MY custom form, JavaScript should:
1. Read the values from my custom form fields
2. Copy those values into the matching Odoo native form fields
3. Click the Odoo native submit button (.s_website_form_send)
4. Hide my custom form and show a success message div

Here is my CUSTOM FORM HTML:
[PASTE YOUR CUSTOM FORM HTML HERE]

Here is the Odoo native form field list (from browser console):
[PASTE THE CONSOLE OUTPUT HERE — the name | id | type list]

Please write the complete bridge JavaScript for this.
Map each custom form field to its corresponding Odoo field by name.
Include basic validation (required fields must not be empty).
The success div ID is: [YOUR SUCCESS DIV ID]

AI will return a complete JavaScript block. Here is how to use it:

• Copy the JS code AI gives you
• In Odoo website editor, open the HTML block that has your custom form
• Find the existing <script> tag with the old form submit handler
• Replace the old handler with the new AI-generated code
• Save the page and test