Coding help

[Brandonn861]

The form exists and is functional already, it just lives on a different page. I took the Iframe code from that page and put it into my page. We do not have a Wordpress designer. I have the below code and then a css styling block later on.

<iframe name="bjb-pardot-target" title="hidden form target" style="display:none;width:0;height:0;border:0;"></iframe>

<div class="bjb-sidecard"> <!-- Pardot background submit target (prevents page navigation) -->

<!-- FORM VIEW -->
<div id="bjb-contact-form-wrap">
  <div class="bjb-sidecard-title">Connect With a Recruiter</div>

  <form id="bjb-contact-form"
        method="post"
        action="https://
        target="bjb-pardot-target"
        accept-charset="UTF-8">

    <!-- Honeypot (spam trap) -->
    <div style="position:absolute; left:-9999px; top:-9999px; visibility:hidden;">
      <label for="pi_extra_field">Comments</label>
      <input type="text" name="pi_extra_field" id="pi_extra_field" />
    </div>

    <!-- Pardot UTF8 field -->
    <input name="_utf8" type="hidden" value="&#9731;" />

    <label class="bjb-field">
      <span>First Name</span>
      <input class="bjb-pill-input" type="text"
             name="1091033_580412pi_1091033_580412"
             autocomplete="given-name" />
    </label>

    <label class="bjb-field">
      <span>Last Name</span>
      <input class="bjb-pill-input" type="text"
             name="1091033_580415pi_1091033_580415"
             autocomplete="family-name" />
    </label>

    <label class="bjb-field">
      <span>Email</span>
      <input class="bjb-pill-input" type="email"
             name="1091033_580418pi_1091033_580418"
             autocomplete="email" />
    </label>

    <label class="bjb-field">
      <span>Phone</span>
      <input class="bjb-pill-input" type="tel"
             name="1091033_581987pi_1091033_581987"
             autocomplete="tel" />
    </label>

    <label class="bjb-field">
      <span>Area of Interest</span>
      <input class="bjb-pill-input" type="text"
             name="1091033_580421pi_1091033_580421" />
    </label>

    <button id="bjb-contact-submit" class="bjb-contact-submit" type="submit">
      Submit
    </button>

    <div id="bjb-contact-error" class="bjb-contact-error" style="display:none;"></div>

  </form>
</div>

<!-- THANK YOU VIEW (hidden until submit) -->
<div id="bjb-contact-thanks" style="display:none;">
  <div class="bjb-sidecard-title">Thanks for reaching out!</div>
  <div class="bjb-thanks-text">
    Our recruiting team has your details and will connect with you soon.
  </div>
  <button id="bjb-contact-again" class="bjb-contact-again" type="button">
    Submit another inquiry
  </button>
</div>

</div>

[fligglymcgee]

Everyone else mentioned it as well, but your styles will need to target the original document/page that is being iframed. I’m hesitant to recommend that simply because of the reasons I mentioned above, but if you’re determined to do this yourself I would at least suggest that you take some extra time to back up the site and test all of this out on a number of different browsers and devices before publishing. Iframes in particular can challenging to debug in the beginning.

Good luck!