javascript – a page with two or more forms (Contact Form 7)

Question

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

0
Dario B. 1 year 2022-01-14T06:27:01-05:00 0 Answers 0 views 0

Leave an answer

Browse
Browse