I have this landing page in ODOO:
and as you can see the URL contains some information that I want to prefill in the form.
The landing page's html is the following:
<t name="Contact Us" t-name="website.contactus">
<t t-call="website.layout">
<t t-set="logged_partner" t-value="request.env['website.visitor']._get_visitor_from_request().partner_id"/>
<t t-set="contactus_form_values" t-value="{ 'email_to': res_company.email, 'name': request.params.get('name', ''), 'phone': request.params.get('phone', ''), 'email_from': request.params.get('email_from', ''), 'company': request.params.get('company', ''), 'subject': request.params.get('subject', ''), }"/>
<span class="hidden" data-for="contactus_form" t-att-data-values="contactus_form_values"/>
<div id="wrap" class="oe_structure oe_empty">
<section class="s_title parallax s_parallax_is_fixed bg-black-50 pt24 pb24 o_colored_level" data-vcss="001" data-snippet="s_title" data-scroll-background-ratio="1" data-name="Title">
<span class="s_parallax_bg oe_img_bg" style="background-image: url('/web/image/website.s_parallax_default_image'); background-position: 50% 0;"/>
<div class="o_we_bg_filter bg-black-50"/>
<div class="container">
<h1>Booking Form</h1>
</div>
</section>
<section class="s_text_block pt40 pb40 o_colored_level" data-snippet="s_text_block" data-name="Text">
<div class="s_allow_columns container">
<div class="row">
<div class="mt-4 mt-lg-0 o_colored_level col-lg-8">
<p>
Contact us about anything related to our company or services.<br/>
We'll do our best to get back to you as soon as possible.
</p>
<section class="s_website_form" data-vcss="001" data-snippet="s_website_form" data-name="Form">
<div class="container">
<form id="contactus_form" action="/website/form/" method="post" enctype="multipart/form-data" class="o_mark_required" data-mark="*" data-model_name="mail.mail" data-success-mode="redirect" data-success-page="/contactus-thank-you" data-pre-fill="true">
<div class="s_website_form_rows row s_col_no_bgcolor">
<div class="mb-0 py-2 col-12 s_website_form_field s_website_form_custom s_website_form_required" data-type="char" data-name="Field">
<div class="row s_col_no_resize s_col_no_bgcolor">
<label class="col-form-label col-sm-auto s_website_form_label" style="width: 200px" for="contact1">
<span class="s_website_form_label_content">Name</span>
<span class="s_website_form_mark"> *</span></label>
<div class="col-sm">
<input id="contact1" type="text" class="form-control s_website_form_input" name="name" required="" data-fill-with="name"/>
</div>
</div>
</div>
<div data-name="Field" class="s_website_form_field mb-3 col-12 s_website_form_custom s_website_form_required" data-type="char"><div class="row s_col_no_resize s_col_no_bgcolor"><label class="col-form-label col-sm-auto s_website_form_label" style="width: 200px" for="owrem1mtipto"><span class="s_website_form_label_content">Phone Number</span><span class="s_website_form_mark"> *</span></label><div class="col-sm"><input class="form-control s_website_form_input" type="text" name="Phone Number" required="1" placeholder="" id="owrem1mtipto" data-fill-with="phone"/></div></div></div>
<div class="mb-0 py-2 col-12 s_website_form_field s_website_form_required s_website_form_model_required" data-type="email" data-name="Field">
<div class="row s_col_no_resize s_col_no_bgcolor">
<label class="col-form-label col-sm-auto s_website_form_label" style="width: 200px" for="contact3">
<span class="s_website_form_label_content">Email</span>
<span class="s_website_form_mark"> *</span></label>
<div class="col-sm">
<input id="contact3" type="email" class="form-control s_website_form_input" name="email_from" required="" data-fill-with="email"/>
</div>
</div>
</div>
<div data-name="Field" class="s_website_form_field mb-3 col-12 s_website_form_custom" data-type="char"><div class="row s_col_no_resize s_col_no_bgcolor"><label class="col-form-label col-sm-auto s_website_form_label" style="width: 200px" for="okrnw4dmgwrr"><span class="s_website_form_label_content">Pickup Location</span></label><div class="col-sm"><input class="form-control s_website_form_input" type="text" name="Pickup Location" placeholder="" id="okrnw4dmgwrr" data-fill-with="undefined"/></div></div></div><div data-name="Field" class="s_website_form_field mb-3 col-12 s_website_form_custom" data-type="char"><div class="row s_col_no_resize s_col_no_bgcolor"><label class="col-form-label col-sm-auto s_website_form_label" style="width: 200px" for="ovidp6buq8u"><span class="s_website_form_label_content">Destination</span></label><div class="col-sm"><input class="form-control s_website_form_input" type="text" name="Destination" placeholder="" id="ovidp6buq8u" data-fill-with="undefined"/></div></div></div><div data-name="Field" class="s_website_form_field mb-3 col-12 s_website_form_custom" data-type="char"><div class="row s_col_no_resize s_col_no_bgcolor"><label class="col-form-label col-sm-auto s_website_form_label" style="width: 200px" for="o07yl9vfg3bmw"><span class="s_website_form_label_content">Pickup Date</span></label><div class="col-sm"><input class="form-control s_website_form_input" type="text" name="Pickup Date" placeholder="" id="o07yl9vfg3bmw" data-fill-with="undefined"/></div></div></div><div data-name="Field" class="s_website_form_field mb-3 col-12 s_website_form_custom" data-type="char"><div class="row s_col_no_resize s_col_no_bgcolor"><label class="col-form-label col-sm-auto s_website_form_label" style="width: 200px" for="o0kj7girt231"><span class="s_website_form_label_content">Return Date</span></label><div class="col-sm"><input class="form-control s_website_form_input" type="text" name="Return Date" placeholder="" id="o0kj7girt231" data-fill-with="undefined"/></div></div></div><div data-name="Field" class="s_website_form_field mb-3 col-12 s_website_form_custom" data-type="char"><div class="row s_col_no_resize s_col_no_bgcolor"><label class="col-form-label col-sm-auto s_website_form_label" style="width: 200px" for="ocasezgtzgos"><span class="s_website_form_label_content">Adults</span></label><div class="col-sm"><input class="form-control s_website_form_input" type="text" name="Adults" id="ocasezgtzgos"/></div></div></div><div data-name="Field" class="s_website_form_field mb-3 col-12 s_website_form_custom" data-type="char"><div class="row s_col_no_resize s_col_no_bgcolor"><label class="col-form-label col-sm-auto s_website_form_label" style="width: 200px" for="ofvlz4jmtkod"><span class="s_website_form_label_content">Children</span></label><div class="col-sm"><input class="form-control s_website_form_input" type="text" name="Children" placeholder="" id="ofvlz4jmtkod" data-fill-with="undefined"/></div></div></div><div data-name="Field" class="s_website_form_field mb-3 col-12 s_website_form_custom" data-type="char"><div class="row s_col_no_resize s_col_no_bgcolor"><label class="col-form-label col-sm-auto s_website_form_label" style="width: 200px" for="onw8u9um8dv"><span class="s_website_form_label_content">Infants</span></label><div class="col-sm"><input class="form-control s_website_form_input" type="text" name="Infants" id="onw8u9um8dv"/></div></div></div><div data-name="Field" class="s_website_form_field mb-3 col-12 s_website_form_custom" data-type="char"><div class="row s_col_no_resize s_col_no_bgcolor"><label class="col-form-label col-sm-auto s_website_form_label" style="width: 200px" for="oew9ot9i5kpj"><span class="s_website_form_label_content">Transfer Type</span></label><div class="col-sm"><input class="form-control s_website_form_input" type="text" name="Transfer Type" id="oew9ot9i5kpj" data-fill-with="undefined"/></div></div></div><div data-name="Field" class="s_website_form_field mb-3 col-12 s_website_form_custom" data-type="text"><div class="row s_col_no_resize s_col_no_bgcolor"><label class="col-form-label col-sm-auto s_website_form_label" style="width: 200px" for="ouxyjeu82zy"><span class="s_website_form_label_content">Comments</span></label><div class="col-sm"><textarea class="form-control s_website_form_input" name="Comments" placeholder="" id="ouxyjeu82zy" rows="2"/></div></div></div><div data-name="Field" class="s_website_form_field mb-3 col-12 s_website_form_custom" data-type="url"><div class="row s_col_no_resize s_col_no_bgcolor"><label class="col-form-label col-sm-auto s_website_form_label" style="width: 200px" for="o063d24dsn5ws"><span class="s_website_form_label_content">Tracking values</span></label><div class="col-sm"><input class="form-control s_website_form_input" type="url" name="Tracking values" placeholder="null" id="o063d24dsn5ws" data-fill-with="undefined"/></div></div></div><div data-name="Field" class="s_website_form_field mb-3 col-12 s_website_form_dnone"><div class="row s_col_no_resize s_col_no_bgcolor"><label class="col-form-label col-sm-auto s_website_form_label" style="width: 200px"><span class="s_website_form_label_content"/></label><div class="col-sm"><input type="hidden" class="form-control s_website_form_input" name="email_to" value="info@yourcompany.example.com"/></div></div></div><div class="mb-0 py-2 col-12 s_website_form_submit" data-name="Submit Button">
<div style="width: 200px;" class="s_website_form_label"/>
<a href="#" role="button" class="btn btn-primary s_website_form_send">Submit</a>
<span id="s_website_form_result"/>
</div>
</div>
</form>
</div>
</section>
</div>
<script>
document.addEventListener('DOMContentLoaded', function() {
// Get the value of the 'pickup_location' URL parameter
const urlParams = new URLSearchParams(window.location.search);
const pickupLocation = urlParams.get('origin');
// Fill the 'Pickup Location' input field with the value from the URL parameter
const pickupLocationInput = document.querySelector('input[name="Pickup Location"]');
if (pickupLocationInput) {
pickupLocationInput.value = pickupLocation;
}
}
</script>
<div class="mt-4 mt-lg-0 col-lg-4 o_colored_level">
<ul class="list-unstyled mb-0 ps-2">
<li>My Company</li>
<li><i class="fa fa-map-marker fa-fw me-2"/><span class="o_force_ltr">3575 Fake Buena Vista Avenue</span></li>
<li><i class="fa fa-phone fa-fw me-2"/><span class="o_force_ltr">+1 (650) 555-0111</span></li>
<li><i class="fa fa-1x fa-fw fa-envelope me-2"/>info@yourcompany.example.com</li>
</ul>
</div>
</div>
</div>
</section>
</div>
</t>
</t>
What I tried so far:
I included the part:
<script>
document.addEventListener('DOMContentLoaded', function() {
// Get the value of the 'pickup_location' URL parameter
const urlParams = new URLSearchParams(window.location.search);
const pickupLocation = urlParams.get('origin');
// Fill the 'Pickup Location' input field with the value from the URL parameter
const pickupLocationInput = document.querySelector('input[name="Pickup Location"]');
if (pickupLocationInput) {
pickupLocationInput.value = pickupLocation;
}
}
</script>
to try to just prefill one value (Pickup Location) but apparently didn't work.
Is there a solution or ODOO just does not allow this customatization?
Console Errors:
.o_app[data-menu-xmlid='sale.sale_menu_root']
web.assets_web_dark.min.js:11156 .o_field_res_partner_many2one[name='partner_id'] input
web.assets_web_dark.min.js:11156 .o_website_preview[data-view-xmlid='website.homepage'] :iframe #wrapwrap .s_cover h1
web.assets_web_dark.min.js:11156 a.o_onboarding_step_action[data-method=action_open_step_company_data]
web.assets_web_dark.min.js:11156 .o_menu_systray .o_new_content_container > a
web.assets_web_dark.min.js:11156 a[data-module-xml-id="base.module_website_blog"]
booking-form:367 Uncaught SyntaxError: missing ) after argument list
booking-form:367 Uncaught SyntaxError: missing ) after argument list
booking-form:367 Uncaught SyntaxError: missing ) after argument list
but my code does not have more than 100 lines.
If you want to prefill contact-us form from url parameters you should modify the template's variable contactus_form_values as given below.
request.params.get('destination_location', '') Inside the get you should specify the name of parameter passed along with URL,
and it should match with the input's name.
Eg:
<input id="contact9" type="text" class="form-control s_website_form_input" name="destination_location"/>
<xpath expr="//t[@t-set='contactus_form_values']" position="attributes">
<attribute name="t-value">{
'email_to': res_company.email,
'name': request.params.get('name', ''),
'phone': request.params.get('phone', ''),
'email_from': request.params.get('email_from', ''),
'company': request.params.get('company', ''),
'subject': request.params.get('subject', ''),
'destination_location':
request.params.get('destination_location', '')
}
</attribute>
</xpath>