search.vivi-realestate.com
Open in
urlscan Pro
206.189.103.60
Public Scan
URL:
https://search.vivi-realestate.com/
Submission: On July 04 via api from US — Scanned from NL
Submission: On July 04 via api from US — Scanned from NL
Form analysis 1 forms found in the DOM
POST /
<form method="post" enctype="multipart/form-data" id="gform_1" class="gf_supercharge default anim_scroll controls_show_auto nav_bottom_left field_width_auto bar_full_footer full_window" action="/" data-formid="1" novalidate="">
<div class="gform-body gform_body">
<div class="gf_scharge_scroll_label_wrapper">
<div class="gf_scharge_scroll_label scroll_label_section"></div>
<div class="gf_scharge_scroll_label scroll_label_field" style="opacity: 1;">Reason for buying</div>
</div>
<div id="gform_fields_1" class="gform_fields top_label form_sublabel_below description_below validation_below">
<fieldset id="field_1_1"
class="gfield gfield--type-radio gfield--type-choice gfield--input-type-radio field_sublabel_below gfield--has-description field_description_below field_validation_below gfield_visibility_visible gf_list_3col gfsp_o_frame o-custom-bg o-ticktopright gfsp_o_clean o_medium gfield_sc_active"
data-field-class="gf_list_3col gfsp_o_frame o-custom-bg o-ticktopright gfsp_o_clean o_medium" data-js-reload="field_1_1">
<legend class="gfield_label gform-field-label">Reason for buying</legend>
<div class="ginput_container ginput_container_radio">
<div class="gfield_radio" id="input_1_1">
<div class="gfsp_choice_img gchoice gchoice_1_1_0">
<input class="gfield-choice-input" name="input_1" type="radio" value="holiday-homes" id="choice_1_1_0" onchange="gformToggleRadioOther( this )" aria-describedby="gfield_description_1_1">
<label for="choice_1_1_0" id="label_1_1_0" class="gform-field-label gform-field-label--type-inline">
<div class="o_label">
<div class="o_img_wr"><img class="gfsp_label_img" src="https://search.vivi-realestate.com/wp-content/uploads/2024/06/Holiday-home.jpg"></div>
<div class="o_text">Holiday home</div>
</div>
</label>
</div>
<div class="gfsp_choice_img gchoice gchoice_1_1_1">
<input class="gfield-choice-input" name="input_1" type="radio" value="investment" id="choice_1_1_1" onchange="gformToggleRadioOther( this )">
<label for="choice_1_1_1" id="label_1_1_1" class="gform-field-label gform-field-label--type-inline">
<div class="o_label">
<div class="o_img_wr"><img class="gfsp_label_img" src="https://search.vivi-realestate.com/wp-content/uploads/2024/06/investment.jpg"></div>
<div class="o_text">Investment</div>
</div>
</label>
</div>
<div class="gfsp_choice_img gchoice gchoice_1_1_2">
<input class="gfield-choice-input" name="input_1" type="radio" value="holiday-homes,holiday-homes" id="choice_1_1_2" onchange="gformToggleRadioOther( this )">
<label for="choice_1_1_2" id="label_1_1_2" class="gform-field-label gform-field-label--type-inline">
<div class="o_label">
<div class="o_img_wr"><img class="gfsp_label_img" src="https://search.vivi-realestate.com/wp-content/uploads/2024/06/combination.jpg"></div>
<div class="o_text">Combination</div>
</div>
</label>
</div>
</div>
</div>
<div class="gfield_description" id="gfield_description_1_1">What is your primary intention for buying.</div>
</fieldset>
<fieldset id="field_1_2"
class="gfield gfield--type-checkbox gfield--type-choice gfield--input-type-checkbox gfield--width-full field_sublabel_below gfield--has-description field_description_below field_validation_below gfield_visibility_visible gf_list_4col gf_list_2col-s gfsp_o_frame o-custom-bg o-ticktopright o_medium"
data-field-class="gf_list_4col gf_list_2col-s gfsp_o_frame o-custom-bg o-ticktopright o_medium" data-js-reload="field_1_2">
<legend class="gfield_label gform-field-label gfield_label_before_complex">Type of property</legend>
<div class="ginput_container ginput_container_checkbox">
<div class="gfield_checkbox" id="input_1_2">
<div class="gfsp_choice_img gchoice gchoice_1_2_1">
<input class="gfield-choice-input" name="input_2.1" type="checkbox" value="villa,detached-villa" id="choice_1_2_1" aria-describedby="gfield_description_1_2">
<label for="choice_1_2_1" id="label_1_2_1" class="gform-field-label gform-field-label--type-inline">
<div class="o_label">
<div class="o_img_wr"><img class="gfsp_label_img" src="https://search.vivi-realestate.com/wp-content/uploads/2024/06/villa.jpg"></div>
<div class="o_text">Villa</div>
</div>
</label>
</div>
<div class="gfsp_choice_img gchoice gchoice_1_2_2">
<input class="gfield-choice-input" name="input_2.2" type="checkbox" value="townhouse" id="choice_1_2_2">
<label for="choice_1_2_2" id="label_1_2_2" class="gform-field-label gform-field-label--type-inline">
<div class="o_label">
<div class="o_img_wr"><img class="gfsp_label_img" src="https://search.vivi-realestate.com/wp-content/uploads/2024/06/townhouse.jpg"></div>
<div class="o_text">Townhouse</div>
</div>
</label>
</div>
<div class="gfsp_choice_img gchoice gchoice_1_2_3">
<input class="gfield-choice-input" name="input_2.3" type="checkbox" value="apartment" id="choice_1_2_3">
<label for="choice_1_2_3" id="label_1_2_3" class="gform-field-label gform-field-label--type-inline">
<div class="o_label">
<div class="o_img_wr"><img class="gfsp_label_img" src="https://search.vivi-realestate.com/wp-content/uploads/2024/06/apartment.jpg"></div>
<div class="o_text">Apartment</div>
</div>
</label>
</div>
<div class="gfsp_choice_img gchoice gchoice_1_2_4">
<input class="gfield-choice-input" name="input_2.4" type="checkbox" value="penthouse" id="choice_1_2_4">
<label for="choice_1_2_4" id="label_1_2_4" class="gform-field-label gform-field-label--type-inline">
<div class="o_label">
<div class="o_img_wr"><img class="gfsp_label_img" src="https://search.vivi-realestate.com/wp-content/uploads/2024/06/penthouse.jpg"></div>
<div class="o_text">Penthouse</div>
</div>
</label>
</div>
</div>
</div>
<div class="gfield_description" id="gfield_description_1_2">What are the types of property you are focussing on? You can select multiple types.</div>
<div class="sc_field_ctrl_wrapper"><a class="button sc_e_proceed sc_field_ctrl_next"><span>Next</span></a></div>
</fieldset>
<div id="field_1_7"
class="gfield gfield--type-html gfield--input-type-html gfield--width-full gfield_html gfield_html_formatted field_sublabel_below gfield--no-description field_description_below field_validation_below gfield_visibility_visible"
data-js-reload="field_1_7"><!-- Voeg de jQuery bibliotheek toe -->
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.6.0/jquery.min.js"></script>
<!-- Voeg de jQuery UI bibliotheek toe -->
<link rel="stylesheet" href="https://code.jquery.com/ui/1.12.1/themes/base/jquery-ui.css">
<script src="https://code.jquery.com/ui/1.12.1/jquery-ui.min.js"></script>
<!-- Voeg de ImageMapResizer bibliotheek toe -->
<script src="https://search.vivi-realestate.com/wp-content/uploads/imagemap/imageMapResizer.min.js"></script>
<!-- CSS voor het markeren van de geselecteerde regio -->
<style>
.highlight {
fill: rgba(255, 0, 0, 0.5);
/* Rood met 50% transparantie */
stroke: #ff0000;
/* Rood randje */
stroke-width: 2;
/* Randdikte */
pointer-events: none;
/* Zorg ervoor dat de overlay geen klikbare acties blokkeert */
}
.hover {
fill: rgba(255, 0, 0, 0.3);
/* Rood met 30% transparantie voor hover */
stroke: #ff0000;
/* Rood randje */
stroke-width: 2;
/* Randdikte */
}
#costadelsolmap-image {
max-width: 100%;
height: auto;
}
.svg-overlay {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
pointer-events: none;
/* Zorg ervoor dat de overlay geen klikbare acties blokkeert */
z-index: 10;
/* Zorg ervoor dat de overlay bovenop de kaart ligt */
}
.map-container {
position: relative;
display: inline-block;
}
.price-slider {
width: 100%;
margin: 20px 0;
}
.ui-slider-horizontal .ui-slider-range {
background: #BFDB00;
border-radius: 10px;
/* Afgeronde hoeken voor de schuifbalk */
}
.ui-slider-horizontal .ui-slider-handle {
border-color: #BFDB00;
border-radius: 50%;
/* Afgeronde hoeken voor de handgrepen */
background: #0D2D00;
/* Handgreep achtergrondkleur */
}
.ui-widget-content {
background: #f0f0f0;
/* Achtergrondkleur van de schuifregelaar */
border-radius: 10px;
/* Afgeronde hoeken voor de achtergrond */
}
.price-display {
display: flex;
justify-content: space-between;
margin-top: 10px;
}
.price-display span {
font-weight: bold;
}
</style>
<!-- HTML voor de afbeelding, imagemap en SVG-overlay -->
<label class="gfield_label gform-field-label">Your preferred area</label>
<div class="map-container">
<img decoding="async" src="https://search.vivi-realestate.com/wp-content/uploads/2024/07/map_costa_regions.png" usemap="#image-map" id="costadelsolmap-image">
<svg class="svg-overlay" xmlns="http://www.w3.org/2000/svg"></svg>
</div>
<map name="image-map">
<area target="_self" alt="Manilva" title="Manilva" href="javascript:void(0);" onmouseover="highlightRegion(this)" onmouseout="unhighlightRegion(this)" onclick="selectRegion('Manilva', this)"
coords="118,455,138,394,116,385,103,385,96,389,92,400,83,407,75,426,71,435,88,430,97,433" shape="poly">
<area target="_self" alt="Casares" title="Casares" href="javascript:void(0);" onmouseover="highlightRegion(this)" onmouseout="unhighlightRegion(this)" onclick="selectRegion('Casares', this)"
coords="71,439,63,440,63,424,51,399,52,374,46,364,34,343,37,337,60,318,71,305,83,300,100,260,109,265,132,266,152,295,150,316,146,330,141,348,145,360,144,373,150,388,138,394,115,385,101,386,94,393,93,399,81,406" shape="poly">
<area target="_self" alt="Estepona" title="Estepona" href="javascript:void(0);" onmouseover="highlightRegion(this)" onmouseout="unhighlightRegion(this)" onclick="selectRegion('cancelada,el-paraiso,estepona,new-golden-mile,selwo', this)"
coords="152,385,167,368,175,357,189,359,206,346,216,343,244,326,260,324,279,321,306,322,298,288,269,306,255,309,244,289,227,271,211,257,195,247,182,251,168,264,169,275,154,292,150,316,144,343,150,354,146,369" shape="poly">
<area target="_self" alt="Benahavis" title="Benahavis" href="javascript:void(0);" onmouseover="highlightRegion(this)" onmouseout="unhighlightRegion(this)"
onclick="selectRegion('benahavis,el-madronal,la-quinta,los-arqueros,los-arquerosgolf', this)"
coords="266,304,298,286,312,275,327,249,319,225,303,196,293,183,289,160,278,151,267,160,261,183,251,194,241,208,229,216,223,232,206,248,233,275,255,305" shape="poly">
<area target="_self" alt="Marbella" title="Marbella" href="javascript:void(0);" onmouseover="highlightRegion(this)" onmouseout="unhighlightRegion(this)"
onclick="selectRegion('marbella-area,istan,marbella,nagueles,sierra-blanca,the-golden-mile,marbella-east,cabopino,el-rosario-2,elviria,la-mairena,las-chapas,los-monteros,marbesa,reserva-de-marbella,santa-clara,marbella-west,benahavis,la-heredia,la-zagaleta,los-almendros,nueva-andalucia,puerto-banus,san-pedro-de-alcantara,el-rosario-2,marbella,cabopino,los-monteros,nagueles,', this)"
coords="307,321,336,299,348,292,366,284,380,278,412,280,426,284,444,288,467,296,484,299,508,299,510,279,502,265,489,257,464,245,435,252,416,254,404,247,394,236,375,240,370,232,354,243,340,247,329,245,319,263,311,275,299,286" shape="poly">
<area target="_self" alt="Mijas" title="Mijas" href="javascript:void(0);" onmouseover="highlightRegion(this)" onmouseout="unhighlightRegion(this)"
onclick="selectRegion('mijas,calahonda,calanova-golf,la-cala,la-cala-de-mijas,la-cala-golf,mijas,mijas-costa,mijas-golf,riviera-del-sol,mijas-pueblo,valtocado,sierrezuela,las-lagunas,calanova-golf', this)"
coords="508,302,523,301,543,295,553,288,581,282,583,270,581,260,587,256,585,242,595,227,604,213,613,206,614,185,599,173,586,172,574,183,561,179,543,185,529,195,482,200,477,215,484,229,498,243,502,260,509,275" shape="poly">
<area target="_self" alt="Fuengirola" title="Fuengirola" href="javascript:void(0);" onmouseover="highlightRegion(this)" onmouseout="unhighlightRegion(this)"
onclick="selectRegion('Fuengirola,fuengirola,carvajal,torreblanca,los-boliches', this)" coords="584,275,598,247,607,230,619,223,612,206,600,215,592,230,585,249,581,259" shape="poly">
<area target="_self" alt="Benalmadena" title="Benalmadena" href="javascript:void(0);" onmouseover="highlightRegion(this)" onmouseout="unhighlightRegion(this)"
onclick="selectRegion('Benalmadena,benalmadena,benalmadena-costa,arroyo-de-la-miel,torrequebrada,torremuelle', this)" coords="619,223,641,216,660,210,669,202,673,195,661,186,648,173,633,178,618,183,613,202" shape="poly">
<area target="_self" alt="Torremolinos" title="Torremolinos" href="javascript:void(0);" onmouseover="highlightRegion(this)" onmouseout="unhighlightRegion(this)" onclick="selectRegion('Torremolinos', this)"
coords="674,192,684,184,705,152,692,146,684,149,679,158,666,159,658,158,648,168" shape="poly">
</map>
<script type="text/javascript">
function highlightRegion(area) {
console.log("Highlight region");
var coords = area.coords.split(',');
var points = [];
for (var i = 0; i < coords.length; i += 2) {
points.push(coords[i] + ',' + coords[i + 1]);
}
var pointsString = points.join(' ');
// Voeg een hover polygon toe aan de SVG-overlay
$('.svg-overlay').append('<polygon class="hover" points="' + pointsString + '"></polygon>');
}
function unhighlightRegion() {
console.log("Unhighlight region");
// Verwijder de hover polygon
$('.svg-overlay .hover').remove();
}
function selectRegion(region, area) {
console.log("Select region: " + region);
// Verwijder de bestaande highlight
$('.svg-overlay').empty();
// Haal de coördinaten van het geselecteerde gebied
var coords = area.coords.split(',');
var points = [];
for (var i = 0; i < coords.length; i += 2) {
points.push(coords[i] + ',' + coords[i + 1]);
}
var pointsString = points.join(' ');
// Voeg een nieuwe polygon toe aan de SVG-overlay
$('.svg-overlay').append('<polygon class="highlight" points="' + pointsString + '"></polygon>');
// Sla de geselecteerde regio op in het verborgen invoerveld
document.getElementById('input_1_13').value = region;
// Verplaats de focus naar het volgende veld
var nextInput = document.querySelector('#input_1_4');
if (nextInput) {
nextInput.focus();
}
// Pas de schaal van de SVG-overlay aan
resizeSvgOverlay();
}
function resizeSvgOverlay() {
var img = $('#costadelsolmap-image');
var imgWidth = img.width();
var imgHeight = img.height();
var imgOriginalWidth = img[0].naturalWidth;
var imgOriginalHeight = img[0].naturalHeight;
var scaleX = imgWidth / imgOriginalWidth;
var scaleY = imgHeight / imgOriginalHeight;
$('.svg-overlay polygon').each(function() {
var points = $(this).attr('points').split(' ');
var newPoints = points.map(function(point) {
var coords = point.split(',');
return (coords[0] * scaleX) + ',' + (coords[1] * scaleY);
});
$(this).attr('points', newPoints.join(' '));
});
}
// Initialiseer de schuifregelaar en update de overlay
function initializeSlider() {
var minPrice = 300000;
var maxPrice = 10000000;
// Voeg de schuifregelaar toe
$('#gform_wrapper_1 .price-slider').slider({
range: true,
min: minPrice,
max: maxPrice,
values: [minPrice, maxPrice],
slide: function(event, ui) {
// Update de waarden in de velden
$('#input_1_17').val(ui.values[0]);
$('#input_1_18').val(ui.values[1]);
// Optioneel: update de tekstweergave van de waarden
$('#min-price-display').text('€ ' + ui.values[0].toLocaleString());
$('#max-price-display').text('€ ' + ui.values[1].toLocaleString());
}
});
// Initiele waarden instellen
$('#input_1_17').val(minPrice);
$('#input_1_18').val(maxPrice);
$('#min-price-display').text('€ ' + minPrice.toLocaleString());
$('#max-price-display').text('€ ' + maxPrice.toLocaleString());
// Zorg ervoor dat de overlay correct wordt geschaald na het initialiseren van de schuifregelaar
resizeSvgOverlay();
}
// Initialize ImageMapResizer and adjust SVG overlay on document ready
$(document).ready(function() {
console.log("Document ready");
$('map').imageMapResize();
$(window).on('resize', resizeSvgOverlay);
// Wacht tot de afbeelding volledig is geladen
$('#costadelsolmap-image').on('load', function() {
console.log("Image loaded");
resizeSvgOverlay(); // Initial call
initializeSlider(); // Initialiseer de schuifregelaar
});
// Extra initialisatie met vertraging om ervoor te zorgen dat alles goed is geladen
setTimeout(function() {
resizeSvgOverlay();
$('#costadelsolmap-image').attr('src', $('#costadelsolmap-image').attr('src')); // Force reload image
initializeSlider(); // Initialiseer de schuifregelaar
}, 500);
// Event listener voor het focussen op invoervelden
$('#input_1_13 input, #input_1_5').on('focus', function() {
console.log("Input field focused");
resizeSvgOverlay();
});
});
</script>
</div>
<div id="field_1_13" class="gfield gfield--type-text gfield--input-type-text gfield--width-full field_sublabel_below gfield--no-description field_description_below field_validation_below gfield_visibility_visible" data-js-reload="field_1_13">
<label class="gfield_label gform-field-label" for="input_1_13">Area</label>
<div class="ginput_container ginput_container_text"><input name="input_13" id="input_1_13" type="text" value="" class="large" aria-invalid="false"> </div>
</div>
<div id="field_1_8" class="gfield gfield--type-hidden gfield--input-type-hidden gfield--width-full gform_hidden field_sublabel_below gfield--no-description field_description_below field_validation_below gfield_visibility_visible"
data-js-reload="field_1_8">
<div class="ginput_container ginput_container_text"><input name="input_8" id="input_1_8" type="hidden" class="gform_hidden" aria-invalid="false" value=""></div>
</div>
<div id="field_1_4" class="gfield gfield--type-number gfield--input-type-number gfield--width-full field_sublabel_below gfield--has-description field_description_below field_validation_below gfield_visibility_visible"
data-js-reload="field_1_4"><label class="gfield_label gform-field-label" for="input_1_4"># of bedrooms</label>
<div class="ginput_container ginput_container_number"><input name="input_4" id="input_1_4" type="number" step="any" min="1" max="12" value="" class="large" aria-invalid="false" aria-describedby="gfield_instruction_1_4 gfield_description_1_4">
<div class="gfield_description instruction " id="gfield_instruction_1_4">Please enter a number from <strong>1</strong> to <strong>12</strong>.</div>
</div>
<div class="gfield_description" id="gfield_description_1_4">The minimum amount of bedrooms you require.</div>
</div>
<fieldset id="field_1_5"
class="gfield gfield--type-checkbox gfield--type-choice gfield--input-type-checkbox gfield--width-full field_sublabel_below gfield--has-description field_description_below field_validation_below gfield_visibility_visible gf_list_3col gf_list_2col-s gfsp_o_frame o-custom-bg o-ticktopright o_medium"
data-field-class="gf_list_3col gf_list_2col-s gfsp_o_frame o-custom-bg o-ticktopright o_medium" data-js-reload="field_1_5">
<legend class="gfield_label gform-field-label gfield_label_before_complex">Category</legend>
<div class="ginput_container ginput_container_checkbox">
<div class="gfield_checkbox" id="input_1_5">
<div class="gfsp_choice_img gchoice gchoice_1_5_1">
<input class="gfield-choice-input" name="input_5.1" type="checkbox" value="golf" id="choice_1_5_1" aria-describedby="gfield_description_1_5">
<label for="choice_1_5_1" id="label_1_5_1" class="gform-field-label gform-field-label--type-inline">
<div class="o_label">
<div class="o_img_wr"><img class="gfsp_label_img" src="https://search.vivi-realestate.com/wp-content/uploads/2024/06/golf.jpg"></div>
<div class="o_text">Golf</div>
</div>
</label>
</div>
<div class="gfsp_choice_img gchoice gchoice_1_5_2">
<input class="gfield-choice-input" name="input_5.2" type="checkbox" value="beachfront" id="choice_1_5_2">
<label for="choice_1_5_2" id="label_1_5_2" class="gform-field-label gform-field-label--type-inline">
<div class="o_label">
<div class="o_img_wr"><img class="gfsp_label_img" src="https://search.vivi-realestate.com/wp-content/uploads/2024/06/beach-front.jpg"></div>
<div class="o_text">Beachfront</div>
</div>
</label>
</div>
<div class="gfsp_choice_img gchoice gchoice_1_5_3">
<input class="gfield-choice-input" name="input_5.3" type="checkbox" value="luxury" id="choice_1_5_3">
<label for="choice_1_5_3" id="label_1_5_3" class="gform-field-label gform-field-label--type-inline">
<div class="o_label">
<div class="o_img_wr"><img class="gfsp_label_img" src="https://search.vivi-realestate.com/wp-content/uploads/2024/06/luxury.jpg"></div>
<div class="o_text">Luxury</div>
</div>
</label>
</div>
<div class="gfsp_choice_img gchoice gchoice_1_5_4">
<input class="gfield-choice-input" name="input_5.4" type="checkbox" value="off-plan" id="choice_1_5_4">
<label for="choice_1_5_4" id="label_1_5_4" class="gform-field-label gform-field-label--type-inline">
<div class="o_label">
<div class="o_img_wr"><img class="gfsp_label_img" src="https://search.vivi-realestate.com/wp-content/uploads/2024/06/off-plan.jpg"></div>
<div class="o_text">Off plan</div>
</div>
</label>
</div>
<div class="gfsp_choice_img gchoice gchoice_1_5_5">
<input class="gfield-choice-input" name="input_5.5" type="checkbox" value="contemporary" id="choice_1_5_5">
<label for="choice_1_5_5" id="label_1_5_5" class="gform-field-label gform-field-label--type-inline">
<div class="o_label">
<div class="o_img_wr"><img class="gfsp_label_img" src="https://search.vivi-realestate.com/wp-content/uploads/2024/06/modern.jpg"></div>
<div class="o_text">Modern</div>
</div>
</label>
</div>
</div>
</div>
<div class="gfield_description" id="gfield_description_1_5">Choose one or more categories that you prefer.</div>
<div class="sc_field_ctrl_wrapper"><a class="button sc_e_proceed sc_field_ctrl_next"><span>Next</span></a></div>
</fieldset>
<fieldset id="field_1_6"
class="gfield gfield--type-checkbox gfield--type-choice gfield--input-type-checkbox gfield--width-full field_sublabel_below gfield--has-description field_description_below field_validation_below gfield_visibility_visible gf_list_3col gf_list_2col-s gfsp_o_frame o-custom-bg o-ticktopright o_medium"
data-field-class="gf_list_3col gf_list_2col-s gfsp_o_frame o-custom-bg o-ticktopright o_medium" data-js-reload="field_1_6">
<legend class="gfield_label gform-field-label gfield_label_before_complex">Views</legend>
<div class="ginput_container ginput_container_checkbox">
<div class="gfield_checkbox" id="input_1_6">
<div class="gfsp_choice_img gchoice gchoice_1_6_1">
<input class="gfield-choice-input" name="input_6.1" type="checkbox" value="beach,sea" id="choice_1_6_1" aria-describedby="gfield_description_1_6">
<label for="choice_1_6_1" id="label_1_6_1" class="gform-field-label gform-field-label--type-inline">
<div class="o_label">
<div class="o_img_wr"><img class="gfsp_label_img" src="https://search.vivi-realestate.com/wp-content/uploads/2024/06/seaview.jpg"></div>
<div class="o_text">Sea</div>
</div>
</label>
</div>
<div class="gfsp_choice_img gchoice gchoice_1_6_2">
<input class="gfield-choice-input" name="input_6.2" type="checkbox" value="golf" id="choice_1_6_2">
<label for="choice_1_6_2" id="label_1_6_2" class="gform-field-label gform-field-label--type-inline">
<div class="o_label">
<div class="o_img_wr"><img class="gfsp_label_img" src="https://search.vivi-realestate.com/wp-content/uploads/2024/06/golfcourseview.jpg"></div>
<div class="o_text">Golf</div>
</div>
</label>
</div>
<div class="gfsp_choice_img gchoice gchoice_1_6_3">
<input class="gfield-choice-input" name="input_6.3" type="checkbox" value="garden" id="choice_1_6_3">
<label for="choice_1_6_3" id="label_1_6_3" class="gform-field-label gform-field-label--type-inline">
<div class="o_label">
<div class="o_img_wr"><img class="gfsp_label_img" src="https://search.vivi-realestate.com/wp-content/uploads/2024/06/gardenview.jpg"></div>
<div class="o_text">Garden</div>
</div>
</label>
</div>
<div class="gfsp_choice_img gchoice gchoice_1_6_4">
<input class="gfield-choice-input" name="input_6.4" type="checkbox" value="urban" id="choice_1_6_4">
<label for="choice_1_6_4" id="label_1_6_4" class="gform-field-label gform-field-label--type-inline">
<div class="o_label">
<div class="o_img_wr"><img class="gfsp_label_img" src="https://search.vivi-realestate.com/wp-content/uploads/2024/06/urbanview.jpg"></div>
<div class="o_text">Urban</div>
</div>
</label>
</div>
<div class="gfsp_choice_img gchoice gchoice_1_6_5">
<input class="gfield-choice-input" name="input_6.5" type="checkbox" value="mountain" id="choice_1_6_5">
<label for="choice_1_6_5" id="label_1_6_5" class="gform-field-label gform-field-label--type-inline">
<div class="o_label">
<div class="o_img_wr"><img class="gfsp_label_img" src="https://search.vivi-realestate.com/wp-content/uploads/2024/06/mountainview.jpg"></div>
<div class="o_text">Mountain</div>
</div>
</label>
</div>
<div class="gfsp_choice_img gchoice gchoice_1_6_6">
<input class="gfield-choice-input" name="input_6.6" type="checkbox" value="panoramic" id="choice_1_6_6">
<label for="choice_1_6_6" id="label_1_6_6" class="gform-field-label gform-field-label--type-inline">
<div class="o_label">
<div class="o_img_wr"><img class="gfsp_label_img" src="https://search.vivi-realestate.com/wp-content/uploads/2024/06/panoramicview.jpg"></div>
<div class="o_text">Panoramic</div>
</div>
</label>
</div>
</div>
</div>
<div class="gfield_description" id="gfield_description_1_6">What kind of view would you like? You can select multiple views.</div>
<div class="sc_field_ctrl_wrapper"><a class="button sc_e_proceed sc_field_ctrl_next"><span>Next</span></a></div>
</fieldset>
<div id="field_1_16"
class="gfield gfield--type-html gfield--input-type-html gfield--width-third gfield_html gfield_html_formatted field_sublabel_below gfield--no-description field_description_below field_validation_below gfield_visibility_visible"
data-js-reload="field_1_16"><!-- HTML voor de schuifregelaar en prijsweergave -->
<label class="gfield_label gform-field-label">Your preferred price range</label>
<div class="price-slider ui-slider ui-corner-all ui-slider-horizontal ui-widget ui-widget-content">
<div class="ui-slider-range ui-corner-all ui-widget-header" style="width: 100%; left: 0%;"></div><span tabindex="0" class="ui-slider-handle ui-corner-all ui-state-default" style="left: 0%;"></span><span tabindex="0"
class="ui-slider-handle ui-corner-all ui-state-default" style="left: 100%;"></span>
</div>
<div class="price-display">
<span id="min-price-display">€ 300.000</span>
<span id="max-price-display">€ 10.000.000</span>
</div>
<input type="hidden" id="input_1_17" name="input_17" value="300000">
<input type="hidden" id="input_1_18" name="input_18" value="10000000">
</div>
<div id="field_1_17" class="gfield gfield--type-number gfield--input-type-number gfield--width-third field_sublabel_below gfield--has-description field_description_below field_validation_below gfield_visibility_hidden"
data-js-reload="field_1_17">
<div class="admin-hidden-markup"><i class="gform-icon gform-icon--hidden"></i><span>Hidden</span></div><label class="gfield_label gform-field-label" for="input_1_17">Min. price</label>
<div class="ginput_container ginput_container_number"><input name="input_17" id="input_1_17" type="number" step="any" value="300000" class="large" aria-invalid="false" aria-describedby="gfield_description_1_17"></div>
<div class="gfield_description" id="gfield_description_1_17">Select the minimum price level you are searching for.</div>
</div>
<div id="field_1_18" class="gfield gfield--type-number gfield--input-type-number gfield--width-third field_sublabel_below gfield--has-description field_description_below field_validation_below gfield_visibility_hidden"
data-js-reload="field_1_18">
<div class="admin-hidden-markup"><i class="gform-icon gform-icon--hidden"></i><span>Hidden</span></div><label class="gfield_label gform-field-label" for="input_1_18">Max. price</label>
<div class="ginput_container ginput_container_number"><input name="input_18" id="input_1_18" type="number" step="any" value="10000000" class="large" aria-invalid="false" aria-describedby="gfield_description_1_18"></div>
<div class="gfield_description" id="gfield_description_1_18">Select the maximum price level you are searching for.</div>
</div>
<div id="field_1_9" class="gfield gfield--type-text gfield--input-type-text gfield_contains_required field_sublabel_below gfield--has-description field_description_below field_validation_below gfield_visibility_visible"
data-js-reload="field_1_9"><label class="gfield_label gform-field-label" for="input_1_9">Name<span class="gfield_required"><span class="gfield_required gfield_required_text">(Required)</span></span></label>
<div class="gf_sc_validation_message gfield_description validation_message">This field is required.</div>
<div class="ginput_container ginput_container_text"><input name="input_9" id="input_1_9" type="text" value="" class="large" aria-describedby="gfield_description_1_9" aria-required="true" aria-invalid="false"> </div>
<div class="gfield_description" id="gfield_description_1_9">Please fill in to get to your properties search results.</div>
</div>
<div id="field_1_11" class="gfield gfield--type-email gfield--input-type-email gfield--width-full gfield_contains_required field_sublabel_below gfield--has-description field_description_below field_validation_below gfield_visibility_visible"
data-js-reload="field_1_11"><label class="gfield_label gform-field-label" for="input_1_11">Email<span class="gfield_required"><span class="gfield_required gfield_required_text">(Required)</span></span></label>
<div class="gf_sc_validation_message gfield_description validation_message">This field is required.</div>
<div class="ginput_container ginput_container_email">
<input name="input_11" id="input_1_11" type="email" value="" class="large" aria-required="true" aria-invalid="false" aria-describedby="gfield_description_1_11">
</div>
<div class="gfield_description" id="gfield_description_1_11">Please fill in to get to your properties search results.</div>
</div>
<div id="field_1_12" class="gfield gfield--type-phone gfield--input-type-phone gfield--width-full gfield_contains_required field_sublabel_below gfield--has-description field_description_below field_validation_below gfield_visibility_visible"
data-js-reload="field_1_12"><label class="gfield_label gform-field-label" for="input_1_12">Phone<span class="gfield_required"><span class="gfield_required gfield_required_text">(Required)</span></span></label>
<div class="gf_sc_validation_message gfield_description validation_message">This field is required.</div>
<div class="ginput_container ginput_container_phone"><input name="input_12" id="input_1_12" type="tel" value="" class="large" aria-required="true" aria-invalid="false" aria-describedby="gfield_description_1_12"></div>
<div class="gfield_description" id="gfield_description_1_12">Please fill in to get to your properties search results.</div>
</div>
<div id="field_1_19"
class="gfield gfield--type-html gfield--input-type-html gfield--width-full gfield_html gfield_html_formatted field_sublabel_below gfield--no-description field_description_below field_validation_below gfield_visibility_hidden"
data-js-reload="field_1_19">
<script>
document.addEventListener('DOMContentLoaded', function() {
// Functie om te normaliseren (kleine letters en URL-veilig)
function normalizeValue(value) {
return encodeURIComponent(value.toLowerCase());
}
// Functie om meerdere waarden te normaliseren
function normalizeValues(values) {
return values.map(normalizeValue).join(',');
}
// Initialiseer de prijs schuifregelaar
// function initializePriceSlider() {
// var minPrice = 300000;
// var maxPrice = 10000000;
//
// $(".price-slider").slider({
// range: true,
// min: minPrice,
// max: maxPrice,
// values: [minPrice, maxPrice],
// slide: function(event, ui) {
// $("#input_1_17").val(ui.values[0]);
// $("#input_1_18").val(ui.values[1]);
// $("#min-price-display").text('€ ' + ui.values[0].toLocaleString());
// $("#max-price-display").text('€ ' + ui.values[1].toLocaleString());
// }
// });
//
// $("#input_1_17").val(minPrice);
// $("#input_1_18").val(maxPrice);
// $("#min-price-display").text('€ ' + minPrice.toLocaleString());
// $("#max-price-display").text('€ ' + maxPrice.toLocaleString());
// }
// Voer de volgende code uit wanneer het formulier wordt ingediend
jQuery(document).on('submit', '#gform_1', function(event) {
// Voorkom de standaard formulieractie
event.preventDefault();
// Haal de waarden op van de verschillende velden
var locationsField = jQuery('#input_1_13').val().toLowerCase();
var typesField = jQuery('#input_1_2 input:checked').map(function() {
return this.value.toLowerCase();
}).get();
var minBedroomsField = jQuery('#input_1_4').val();
var minPriceField = jQuery('#input_1_17').val().replace(/,/g, '');
var maxPriceField = jQuery('#input_1_18').val().replace(/,/g, '');
var categoriesField = jQuery('#input_1_5 input:checked').map(function() {
return this.value.toLowerCase();
}).get();
var viewsField = jQuery('#input_1_6 input:checked').map(function() {
return this.value.toLowerCase();
}).get();
// Normaliseer de waarden
var normalizedLocations = normalizeValue(locationsField);
var normalizedTypes = normalizeValues(typesField);
var normalizedCategories = normalizeValues(categoriesField);
var normalizedViews = normalizeValues(viewsField);
// Creëer de querystring
var queryString = '?property-locations=' + normalizedLocations + '&property-types=' + normalizedTypes + '&min-bedrooms=' + minBedroomsField + '&min-price=' + minPriceField + '&max-price=' + maxPriceField +
'&property-categories=' + normalizedCategories + '&property-views=' + normalizedViews;
// Stel de nieuwe actie-URL in met de genormaliseerde waarden
var formAction = 'https://vivi-realestate.com/property-listing/' + queryString;
// Sla het formulier op (zorgt ervoor dat Gravity Forms het formulier opslaat)
jQuery(this).append('<input type="hidden" name="redirect_url" value="' + formAction + '">');
this.submit();
// Stuur een postMessage naar de ouderpagina voor de redirect
window.parent.postMessage({
type: 'formSubmission',
data: {
action: formAction
}
}, '*');
});
// Gebruik gform_confirmation_loaded om het formulier daadwerkelijk in te dienen
jQuery(document).on('gform_confirmation_loaded', function(event, formId) {
if (formId == 1) {
document.querySelector('#gform_1').submit();
}
});
// Scroll naar de bovenkant en focus op het eerste veld wanneer de pagina geladen is
function scrollToTopAndFocus() {
window.parent.postMessage({
type: 'scrollToTop'
}, '*');
// Focus on the first field
setTimeout(function() {
document.querySelector('input, select, textarea').focus();
}, 100);
}
scrollToTopAndFocus();
initializePriceSlider();
});
</script>
</div>
<div class="gfield gfield_supercharge_submit type_field">
<div class="gf_scharge_footer"><button class="gf_scharge_submit large button" onclick="jQuery('#gform_submit_button_1').trigger('click')">Search in the Costa del Sol</button></div>
</div>
</div>
<div class="gf_scharge_controls_wrapper gf_scharge_controls_bottom_wrapper">
<div class="gf_scharge_controls gf_scharge_controls_footer_bar bar_full_footer">
<span class="percentage_wrapper"><span class="percentage bar_full_footer"><span class="perc_text">0%</span><span class="perc_bar"
style="width: 0%;"></span></span></span><a data-id="gf_scharge_control_1_prev" tabindex="0" class="button sc_e_proceed_back gf_scharge_control_prev"><i class="sc-i-left-open"></i><span>Back</span></a><a data-id="gf_scharge_control_1_next" tabindex="0" class="button sc_e_proceed gf_scharge_control_next"><span>Next</span><i class="sc-i-right-open"></i></a><a data-id="gf_scharge_control_1_validation" class="button sc_e_proceed_validation gf_scharge_control_validation" tabindex="-1"></a>
</div>
</div>
</div>
<div class="gform_footer top_label"> <input type="submit" id="gform_submit_button_1" class="gform_button button" value="Search in the Costa del Sol"
onclick="if(window["gf_submitting_1"]){return false;} if( !jQuery("#gform_1")[0].checkValidity || jQuery("#gform_1")[0].checkValidity()){window["gf_submitting_1"]=true;} "
onkeypress="if( event.keyCode == 13 ){ if(window["gf_submitting_1"]){return false;} if( !jQuery("#gform_1")[0].checkValidity || jQuery("#gform_1")[0].checkValidity()){window["gf_submitting_1"]=true;} jQuery("#gform_1").trigger("submit",[true]); }">
<input type="hidden" class="gform_hidden" name="is_submit_1" value="1">
<input type="hidden" class="gform_hidden" name="gform_submit" value="1">
<input type="hidden" class="gform_hidden" name="gform_unique_id" value="">
<input type="hidden" class="gform_hidden" name="state_1"
value="WyJ7XCIxXCI6W1wiNTBjNmE0MzQzMzZkNjQyNGM3MTY0YTc5OGViZmY1ZTlcIixcImFlOWE5OGRlOGY3ZmMwNjg2ZDU0MjFhODU4MWNhZjk3XCIsXCI4NWM5MWNmOGVkN2QxMmJkMTBiMGE0Yzk5ZGQwN2YxNVwiXSxcIjIuMVwiOlwiNTE4M2ZhZDI3ODEyM2FiNTQ1YmNiZDg0Mjg1NWEzMzRcIixcIjIuMlwiOlwiMmQ4ODc4OWM5NWNkNjkyZTEzMmMwODUwNThkODA2YjdcIixcIjIuM1wiOlwiNjcyYzNjM2MyZmZlM2VhYWQzMmUzYjQxNzUxZjA3YmFcIixcIjIuNFwiOlwiNTg3MDM3MTAwZmQxZmIyMGMyNzdhMjVjZGE5YjE2NzRcIixcIjUuMVwiOlwiNTI1NTVhM2RkZTE4MjA1Yjg1ODM0OTQ4YjYxZmFlNjZcIixcIjUuMlwiOlwiNTFhMGUyMzE1NzllNmJiNTRmOTAzYzg4OTgxNzQ5NWFcIixcIjUuM1wiOlwiODEyYTFmYjQwY2QyNDM1ZWNiNmFhYjVhNDc5NDJmNzBcIixcIjUuNFwiOlwiODRmOGI2MjM1ZmE1MWNhYTMyOTkxZDQ0MTEwNDhhYzRcIixcIjUuNVwiOlwiYzJhZmQyNThhZWM5NjA5YmNiODE3NGNiMzQzMjViN2ZcIixcIjYuMVwiOlwiZDA5NDI5ZWJkNTY0ZDAwOTg4YzI4NGIyYTE4ZWE3MmZcIixcIjYuMlwiOlwiNTI1NTVhM2RkZTE4MjA1Yjg1ODM0OTQ4YjYxZmFlNjZcIixcIjYuM1wiOlwiMDQ3MDFiOWY4ODQ2ZGI1ZjM2Nzk0ZWM1MmNmMzMyNTdcIixcIjYuNFwiOlwiNzdiODUxMmRhYTQyZmZhNjNiMmU1YjRlMTE0MGU4MjhcIixcIjYuNVwiOlwiZGNiMjM1NTNmZTI2YWQwMzI0M2RhNjAxMDdiYWIyYWVcIixcIjYuNlwiOlwiNjlkYTY5Zjk2ZmY4ZTgzZGMzZDQzMWM0M2QwMWI2MDdcIn0iLCJhY2Q3MTlkNTQ1N2IwMTdlNjRjNDA1M2E3OTM3OTRkZiJd">
<input type="hidden" class="gform_hidden" name="gform_target_page_number_1" id="gform_target_page_number_1" value="0">
<input type="hidden" class="gform_hidden" name="gform_source_page_number_1" id="gform_source_page_number_1" value="1">
<input type="hidden" name="gform_field_values" value="">
</div>
</form>Text Content
Skip to content * form embed * search * vivi real estate Reason for buying Reason for buying Holiday home Investment Combination What is your primary intention for buying. Type of property Villa Townhouse Apartment Penthouse What are the types of property you are focussing on? You can select multiple types. Next Your preferred area Area # of bedrooms Please enter a number from 1 to 12. The minimum amount of bedrooms you require. Category Golf Beachfront Luxury Off plan Modern Choose one or more categories that you prefer. Next Views Sea Golf Garden Urban Mountain Panoramic What kind of view would you like? You can select multiple views. Next Your preferred price range € 300.000 € 10.000.000 Hidden Min. price Select the minimum price level you are searching for. Hidden Max. price Select the maximum price level you are searching for. Name(Required) This field is required. Please fill in to get to your properties search results. Email(Required) This field is required. Please fill in to get to your properties search results. Phone(Required) This field is required. Please fill in to get to your properties search results. Search in the Costa del Sol 0%BackNext BackNext Scroll to Top Notifications