Joshkaneis

Hello Tuan, Yes the formassembly code is customisable/editable, What I need help with is identifying the Sqaurespace CSS classes within our site template so we can edit the form-assembly code to call the template CSS once embedded.

Site URL: https://www.thepush.com.au/aat-presale

Hello all looking for some general advice about how to approach this issue, any input or resources welcomed.

We have started using a form platform (formassembly) that provides embed code which you can place into the body and head of the page.

Here is an example of it in use  https://www.thepush.com.au/aat-presale

As you will see we have tried to match the style of our sites template/CSS but its not exactly the same see example (https://www.thepush.com.au/book-your-training), and if we change the site style the forms won't change over time

My question:

Is it possible to edit the embed coded supplied from formassembly so that when added to our squrespace site, the form style of the site template is adopted or inherited?

If so how do I access/discover those css names from the form Template?

<!-- FORM: HEAD SECTION -->
	<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <meta name="referrer" content="no-referrer-when-downgrade">
            <script type="text/javascript">
        document.addEventListener("DOMContentLoaded", function(){
            const FORM_TIME_START = Math.floor((new Date).getTime()/1000);
            let formElement = document.getElementById("tfa_0");
            if (null === formElement) {
                formElement = document.getElementById("0");
            }
            let appendJsTimerElement = function(){
                let formTimeDiff = Math.floor((new Date).getTime()/1000) - FORM_TIME_START;
                let cumulatedTimeElement = document.getElementById("tfa_dbCumulatedTime");
                if (null !== cumulatedTimeElement) {
                    let cumulatedTime = parseInt(cumulatedTimeElement.value);
                    if (null !== cumulatedTime && cumulatedTime > 0) {
                        formTimeDiff += cumulatedTime;
                    }
                }
                let jsTimeInput = document.createElement("input");
                jsTimeInput.setAttribute("type", "hidden");
                jsTimeInput.setAttribute("value", formTimeDiff.toString());
                jsTimeInput.setAttribute("name", "tfa_dbElapsedJsTime");
                jsTimeInput.setAttribute("id", "tfa_dbElapsedJsTime");
                jsTimeInput.setAttribute("autocomplete", "off");
                if (null !== formElement) {
                    formElement.appendChild(jsTimeInput);
                }
            };
            if (null !== formElement) {
                if(formElement.addEventListener){
                    formElement.addEventListener('submit', appendJsTimerElement, false);
                } else if(formElement.attachEvent){
                    formElement.attachEvent('onsubmit', appendJsTimerElement);
                }
            }
        });
    </script>

    <link href="https://www.tfaforms.com/dist/form-builder/5.0.0/wforms-layout.css?v=1627939504" rel="stylesheet" type="text/css" />

    <link href="https://www.tfaforms.com/uploads/themes/theme-78255.css" rel="stylesheet" type="text/css" />
    <link href="https://www.tfaforms.com/dist/form-builder/5.0.0/wforms-jsonly.css?v=1627939504" rel="alternate stylesheet" title="This stylesheet activated by javascript" type="text/css" />
    <script type="text/javascript" src="https://www.tfaforms.com/wForms/3.11/js/wforms.js?v=1627939504"></script>
    <script type="text/javascript">
        wFORMS.behaviors.prefill.skip = false;
    </script>
        <script type="text/javascript" src="https://www.tfaforms.com/wForms/3.11/js/localization-en_US.js?v=1627939504"></script>
<!-- FORM: BODY SECTION -->
<div class="wFormContainer" >
    <div class="wFormHeader"></div>
    <style type="text/css">
                #tfa_11,
                *[id^="tfa_11["] {
                    width: 578px !important;
                }
                #tfa_11-D,
                *[id^="tfa_11["][class~="field-container-D"] {
                    width: auto !important;
                }
            
                #tfa_13,
                *[id^="tfa_13["] {
                    width: 578px !important;
                }
                #tfa_13-D,
                *[id^="tfa_13["][class~="field-container-D"] {
                    width: auto !important;
                }
            
                #tfa_1873,
                *[id^="tfa_1873["] {
                    width: 578px !important;
                }
                #tfa_1873-D,
                *[id^="tfa_1873["][class~="field-container-D"] {
                    width: auto !important;
                }
            
                #tfa_1874,
                *[id^="tfa_1874["] {
                    width: 578px !important;
                }
                #tfa_1874-D,
                *[id^="tfa_1874["][class~="field-container-D"] {
                    width: auto !important;
                }
            </style><div class=""><div class="wForm" id="4920022-WRPR" dir="ltr">
<div class="codesection" id="code-4920022"><style type="text/css">
@import url('https://fonts.googleapis.com/css2?family=Montserrat:wght@400;600&display=swap');
.wFormTitle, .wForm {
 	font-family: 'Montserrat', sans-serif;
        font-size: 20px;
 }
</style>
<style type="text/css">
.wForm .wfPagingButtons, .wForm .actions { width: 100% !important; text-align: center; 
}
</style>
<style type="text/css">

#tfa_1876 {
color: #000000;
font-size: 50%;
}
</style>
<style type="text/css">
.wFormContainer .supportInfo {
    display: none;
 }
</style>
<style type="text/css">
#tfa_1876 {
font-size: ;
}
</style></div>
<form method="post" action="https://www.tfaforms.com/responses/processor" class="hintsBelow labelsAbove" id="4920022" role="form">
<div id="tfa_10" class="section inline group">
<div class="oneField field-container-D    " id="tfa_11-D">
<label id="tfa_11-L" class="label preField " for="tfa_11">First Name</label><br><div class="inputWrapper"><input type="text" id="tfa_11" name="tfa_11" value="" title="First Name" class=""></div>
</div>
<div class="oneField field-container-D    " id="tfa_13-D">
<label id="tfa_13-L" class="label preField reqMark" for="tfa_13">Last Name</label><br><div class="inputWrapper"><input type="text" id="tfa_13" name="tfa_13" value="" aria-required="true" title="Last Name" class="required"></div>
</div>
</div>
<div id="tfa_1875" class="section inline group">
<div class="oneField field-container-D    " id="tfa_1873-D">
<label id="tfa_1873-L" class="label preField reqMark" for="tfa_1873">Email</label><br><div class="inputWrapper"><input type="text" id="tfa_1873" name="tfa_1873" value="" aria-required="true" title="Email" class="validate-email required"></div>
</div>
<div class="oneField field-container-D    " id="tfa_1874-D">
<label id="tfa_1874-L" class="label preField " for="tfa_1874">Postcode</label><br><div class="inputWrapper"><input type="text" id="tfa_1874" name="tfa_1874" value="" title="Postcode" class=""></div>
</div>
</div>
<div class="oneField field-container-D  labelsRemoved  " id="tfa_1876-D" role="group" aria-labelledby="tfa_1876-L" data-tfa-labelledby="-L tfa_1876-L"><div class="inputWrapper"><span id="tfa_1876" class="choices vertical "><span class="oneChoice maskControl"><input type="checkbox" value="tfa_1877" class="" checked data-default-value="true" id="tfa_1877" name="tfa_1877" aria-labelledby="tfa_1877-L" data-tfa-labelledby="tfa_1876-L tfa_1877-L"><label class="label postField" id="tfa_1877-L" for="tfa_1877"><span class="input-checkbox-faux"></span><div style="font-family: &quot;Avenir Next&quot;, sans-serif; font-size: 16px; text-align: justify;">By selecting the submit button you agree to join The Push mailing list, and also agree to The Push’s <u><a tabindex="-1" style="color:#6888c9;" title="https://www.thepush.com.au/privacypolicy" target="_blank" rel="noreferrer noopener" href="https://www.thepush.com.au/privacypolicy">privacy policy</a></u> and <u><a tabindex="-1" style="color:#6888c9;" title="https://www.thepush.com.au/collectionnotice" target="_blank" rel="noreferrer noopener" href="https://www.thepush.com.au/collectionnotice">collection notice</a></u>.</div></label></span></span></div></div>
<div class="actions" id="4920022-A"><input type="submit" data-label="SUBMIT" class="primaryAction" id="submit_button" value="SUBMIT"></div>
<div style="clear:both"></div>
<input type="hidden" value="4920022" name="tfa_dbFormId" id="tfa_dbFormId"><input type="hidden" value="" name="tfa_dbResponseId" id="tfa_dbResponseId"><input type="hidden" value="a6959a24b72add671377dffefddf766f" name="tfa_dbControl" id="tfa_dbControl"><input type="hidden" value="" name="tfa_dbWorkflowSessionUuid" id="tfa_dbWorkflowSessionUuid"><input type="hidden" value="45" name="tfa_dbVersionId" id="tfa_dbVersionId"><input type="hidden" value="" name="tfa_switchedoff" id="tfa_switchedoff">
</form>
</div></div><div class="wFormFooter"><p class="supportInfo"><a target="new" class="contactInfoLink" href="https://www.tfaforms.com/forms/help/4920022">Contact Information</a><br></p></div>
  <p class="supportInfo" >
      </p>
 </div>