javascript – a page with two or more forms (Contact Form 7)
I have a website that uses two contact forms and in the near future will use up to 4, all this done with contact form 7. When analyzing the code to insert a reset() function with javascript I noticed that one of the forms does not come out as but as a div, so the script I want to implement does not do its job correctly. Next I put the forms as they come out in html:
FORM 1:
<?php echo do_shortcode( '[contact-form-7 404 "Not Found"]' ); ?>
<div role="form" class="wpcf7" id="wpcf7-f47-p18-o1" dir="ltr" lang="de-DE">
<div class="screen-reader-response"><p role="status" aria-live="polite" aria-atomic="true"></p>
<ul></ul>
</div>
<div style="display: none;">
<input type="hidden" name="_wpcf7" value="47">
<input type="hidden" name="_wpcf7_version" value="5.5.3">
<input type="hidden" name="_wpcf7_locale" value="de_DE">
<input type="hidden" name="_wpcf7_unit_tag" value="wpcf7-f47-p18-o1">
<input type="hidden" name="_wpcf7_container_post" value="18">
<input type="hidden" name="_wpcf7_posted_data_hash" value="">
</div>
<p><span class="wpcf7-form-control-wrap glass-name"><input type="text" name="glass-name" value="" size="40"
class="wpcf7-form-control wpcf7-text"
aria-invalid="false"></span></p>
<p><span class="wpcf7-form-control-wrap glasstel-391"><input type="tel" name="glasstel-391" value="" size="40"
class="wpcf7-form-control wpcf7-text wpcf7-tel wpcf7-validates-as-tel"
aria-invalid="false"></span></p>
<p><span class="wpcf7-form-control-wrap glassFirma"><input type="text" name="glassFirma"
value="Firma (optional)" size="40"
class="wpcf7-form-control wpcf7-text"
aria-invalid="false"></span></p>
<div class="display-none">
<p><span class="wpcf7-form-control-wrap glassPartner-614"><input type="email" name="glassPartner-614"
value="" size="40"
class="wpcf7-form-control wpcf7-text wpcf7-email wpcf7-validates-as-required wpcf7-validates-as-email"
id="glassPartnerMail" aria-required="true"
aria-invalid="false"></span></p>
<p><span class="wpcf7-form-control-wrap glassleistung-312"><input type="text" name="glassleistung-312"
value="" size="40"
class="wpcf7-form-control wpcf7-text"
id="glassLeistungForm"
aria-invalid="false"></span></p>
<p><span class="wpcf7-form-control-wrap privat-184"><input type="text" name="privat-184" value="" size="40"
class="wpcf7-form-control wpcf7-text"
id="glassStatus" aria-invalid="false"></span></p>
<p><span class="wpcf7-form-control-wrap glassType-420"><input type="text" name="glassType-420" value=""
size="40"
class="wpcf7-form-control wpcf7-text"
id="glassType" aria-invalid="false"></span>
</p>
<p><span class="wpcf7-form-control-wrap objektType-493"><input type="text" name="objektType-493" value=""
size="40"
class="wpcf7-form-control wpcf7-text"
id="glassModel" aria-invalid="false"></span>
</p>
<p><span class="wpcf7-form-control-wrap glassRhythm-541"><input type="text" name="glassRhythm-541" value=""
size="40"
class="wpcf7-form-control wpcf7-text"
id="glassRhythmOutput" aria-invalid="false"></span>
</p>
</div>
<p><input type="submit" value="Senden" class="wpcf7-form-control has-spinner wpcf7-submit"></p>
<div class="wpcf7-response-output" aria-hidden="true"></div>
</div>
FORM 2:
<?php echo do_shortcode( '[contact-form-7 404 "Not Found"]' ); ?>
<div role="form" class="wpcf7" id="wpcf7-f17-p18-o2" dir="ltr" lang="de-DE">
<div class="screen-reader-response"><p role="status" aria-live="polite" aria-atomic="true"></p>
<ul></ul>
</div>
<form action="/kontakt/#wpcf7-f17-p18-o2" method="post" class="wpcf7-form init" novalidate="novalidate"
data-status="init" _lpchecked="1">
<div style="display: none;">
<input type="hidden" name="_wpcf7" value="17">
<input type="hidden" name="_wpcf7_version" value="5.5.3">
<input type="hidden" name="_wpcf7_locale" value="de_DE">
<input type="hidden" name="_wpcf7_unit_tag" value="wpcf7-f17-p18-o2">
<input type="hidden" name="_wpcf7_container_post" value="18">
<input type="hidden" name="_wpcf7_posted_data_hash" value="">
</div>
<p><span class="wpcf7-form-control-wrap clean-name"><input type="text" name="clean-name" value="" size="40"
class="wpcf7-form-control wpcf7-text"
aria-invalid="false"></span></p>
<p><span class="wpcf7-form-control-wrap cleanTel"><input type="tel" name="cleanTel" value="" size="40"
class="wpcf7-form-control wpcf7-text wpcf7-tel wpcf7-validates-as-tel"
aria-invalid="false"></span></p>
<p><span class="wpcf7-form-control-wrap cleanFirma"><input type="text" name="cleanFirma" value="" size="40"
class="wpcf7-form-control wpcf7-text"
aria-invalid="false"
placeholder="Firma (optional)"></span></p>
<div class="display-none">
<p><span class="wpcf7-form-control-wrap cleanMmail"><input type="email" name="cleanMmail" value=""
size="40"
class="wpcf7-form-control wpcf7-text wpcf7-email wpcf7-validates-as-required wpcf7-validates-as-email"
id="partnerMail" aria-required="true"
aria-invalid="false"></span></p>
<p><span class="wpcf7-form-control-wrap cleanLeistung"><input type="text" name="cleanLeistung" value=""
size="40"
class="wpcf7-form-control wpcf7-text"
id="leistungform"
aria-invalid="false"></span></p>
<p><span class="wpcf7-form-control-wrap zweig-295"><input type="text" name="zweig-295" value=""
size="40"
class="wpcf7-form-control wpcf7-text"
id="zweigform" aria-invalid="false"></span>
</p>
<p><span class="wpcf7-form-control-wrap cleanLocation"><input type="text" name="cleanLocation" value=""
size="40"
class="wpcf7-form-control wpcf7-text"
id="locationform"
aria-invalid="false"></span></p>
<p><span class="wpcf7-form-control-wrap area-969"><input type="text" name="area-969" value="" size="40"
class="wpcf7-form-control wpcf7-text"
id="areaqm" aria-invalid="false"></span></p>
<p><span class="wpcf7-form-control-wrap rhythm-483"><input type="text" name="rhythm-483" value=""
size="40"
class="wpcf7-form-control wpcf7-text"
id="rhythmOutput"
aria-invalid="false"></span></p>
<p><span class="wpcf7-form-control-wrap textarea-94"><textarea name="textarea-94" cols="40" rows="10"
class="wpcf7-form-control wpcf7-textarea"
id="textareaform"
aria-invalid="false"></textarea></span>
</p>
</div>
<p><input type="submit" value="Senden" class="wpcf7-form-control has-spinner wpcf7-submit"><span
class="wpcf7-spinner"></span></p>
<div class="wpcf7-response-output" aria-hidden="true"></div>
</form>
</div>
I have been analyzing that no type or name are the same, and I don’t see any similarity between both, if someone sees a bug or knows why this happens, I would be very grateful.
Greetings to all and thanks
Leave an answer