CODEWITHSUNDEEP
cssformsiframe
sdesign
sdesign

Reputation: 47

Customize Form within iFrame via CSS (iFrame contents not editable)

I need help customizing a form with CSS. The form was auto generated and cannot be edited. The iframe simply opens this form within so I cannot add CSS to the contact form to effect it. See link for the form: 

label {
    color: red;
}

input {
    color: green;
}
<h2>Contact Us </h2>
<b style="color: red;">NOTE: I would like to modify the label font, input, and "required" text.</b> <br /> <br /><br />

<iframe name="lc_contact_form" frameborder="0" width="100%" height="600" src="https://sindesignphotography.17hats.com/embed/lead/form/nffgsxgpxrcxvcdwwcvwdpwhfvwwcfsz"></iframe><script type="text/javascript" src="https://sindesignphotography.17hats.com/js/lib/iframeSizer.min.js"></script>

Upvotes: 0

Views: 1001

Answers (1)

Roger
Roger

Reputation: 3256

Get Cross-Domain iFrame content

You can't access cross domain content. If it is comming from your own domain, you can. Run my code and look at the console log. It throws a security error. This is to prevent 3rd party webapplications from reading your bank account information.

$('#getStuff').contents().find("input").css('color', 'green')
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
Can't Access iframe
<iframe id="getStuff" name="lc_contact_form" frameborder="0" width="100%" height="600" src="https://sindesignphotography.17hats.com/embed/lead/form/nffgsxgpxrcxvcdwwcvwdpwhfvwwcfsz"></iframe>

Upvotes: 1

Related Questions