Hello,
I am new to Blocs, I created the contact form and tested it, I got the email, but the fields I got are not labeled correctly. so I got the email fields labeled like that:
Name_33339: example name
Email_33339: example email
Input_1427: example phone
Message_33339: example message
Optin_33339: true
I need to change (Name_33339) to (Name:) and (Email_33339) to (Email) … and so on
Can you help me please.
Thank you
Very easy. Just change the ID in the side panel for each field. Click on the relevant input field on the form, then look at the side panel and change the ID to something better. After uploading it will all be correct.
Thank you Flashman, it works
But what if I added special field that I coded and it is not related to the contact form widget.
Because I added price range slider and I manage to add an ID to the input inside the div and I called them min-price and max-price, but it came twice like
min-price: 0
max-price: 3200
input_2402: 0
input_2800: 3200
Any suggestion
Thank you in advance 
That is difficult to say without seeing the code, but you may be able to edit that post export with a text editor. Have you checked the div ID?
Something like that might better be done with a custom mail script, rather than self hosted, because I think Blocs is automatically adding it’s own IDs here.
Personally I have never needed a custom form script, but I know some here use them regularly.
The range slider is an input field which blocs recognises and then adds to the mail handler.
If you want to let Blocs continue to handle the form. One option would be to use JavaScript to add the slider and then link the values of the slider to the min and max fields. Blocs then won’t include the slider.
Thank you for the reply
When I checked the div IDs, I noticed that there was no IDs, I added IDs to the both divs max and min, I got email with the same which is good, but the code has 2 other inputs which is the slider circles inputs, and that is counted as an inputs when sending the email.
The question is how to hide these circles inputs from sending emails, so it will not be repeated.
Thank you Malachiman, that’s correct
I already used javascript for the slider, but how to link the values
Thank you in advance
Here is the js code:
const rangeInput = document.querySelectorAll(".range-input input"),
priceInput = document.querySelectorAll(".price-input input"),
progress = document.querySelector(".slider .progress");
let priceGap = 1000;
priceInput.forEach(input =>{
input.addEventListener("input", e =>{
// getting two inputs value and parsing them to number
let minVal = parseInt(priceInput[0].value),
maxVal = parseInt(priceInput[1].value);
if((maxVal - minVal >= priceGap) && maxVal <= 10000){
if(e.target.className === "input-min"){ // if active input is min input
rangeInput[0].value = minVal;
progress.style.left = (minVal / rangeInput[0].max) * 100 + "%";
}else{
rangeInput[1].value = maxVal;
progress.style.right = 100 - (maxVal / rangeInput[1].max) * 100 + "%";
}
}
});
});
rangeInput.forEach(input =>{
input.addEventListener("input", e =>{
let minVal = parseInt(rangeInput[0].value),
maxVal = parseInt(rangeInput[1].value);
if(maxVal - minVal < priceGap){
if(e.target.className === "range-min"){ // if active slider is min slider
rangeInput[0].value = maxVal - priceGap;
}else{
rangeInput[1].value = minVal + priceGap;
}
}else{
priceInput[0].value = minVal;
priceInput[1].value = maxVal;
progress.style.left = (minVal / rangeInput[0].max) * 100 + "%";
progress.style.right = 100 - (maxVal / rangeInput[1].max) * 100 + "%";
}
});
});```Here my HTML code
<div class="wrapper">
<header>
<h2>Price Range</h2>
<p>Use slider or enter min and max price</p>
</header>
<div class="price-input">
<div id="price_range" class="field">
<span>Min</span>
<input id="min_price" type="number" class="input-min" value="2500">
</div>
<div class="separator">-</div>
<div class="field">
<span>Max</span>
<input id="max_price" type="number" class="input-max" value="7500">
</div>
</div>
<div class="slider">
<div class="progress"></div>
</div>
<div class="range-input">
<input id="min_price" type="range" class="range-min" min="0" max="10000" value="2500" step="100">
<input id="max_price" type="range" class="range-max" min="0" max="10000" value="7500" step="100">
</div>
</div>
Sorry I mean using JavaScript to add the slider markup. That way the user will see the sliders and can use them, but Blocs won’t and won’t add it to the form handler.
Thanks for the reply, can you please tell me how to do it?
I’m sure you noticed. But you have used the same IDs for the min and max sliders and input fields. IDs must be unique.
Thank you for the reply. Yes I know, but I don’t want them to show at all from the (range-input)
And when I remove the IDs it creates default random IDs like:
input_2402: 0
input_2800: 3200
I don’t want it to show either as ID or number.
You told me that if I use these input as JavaScript Blocs won’t add it to the form handler.
I am trying to search for this solution.
I hope you can help me with that.
Thank you
JavaScript to add the markup for the slider to the form. Yes since it only happens on the user end. Blocs doesn’t see it when exporting and making the files.
I had assumed you knew some JavaScript when you said you had coded the slider. Maybe it was a copy and paste?
Either way it’s one possible solution. I can’t make it for you though.