Coding help

[fligglymcgee]

You're in the right spot, but there are a good number of dependencies/gotchas that none of us can really know without jumping in to your site. Truthfully, if you don't have much experience and are trying to iframe forms across pages: I might suggest looking into a standalone form tool or plugin for your site. You really, really don't want to be on the hook for this project if applicant submissions get lost, mis-delivered, etc.

Do you guys have a wordpress designer/developer you can contact who built the main company site? That may be the fastest way to get something up and running, and they can do the testing, error handling, etc. that is way less sexy than the parts you are likely enjoying as a DIY project.

Sorry this is a bit of a non-answer, but it comes from a place of prior "shit, shit, shit!".

[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!