Joshkaneis Posted August 10, 2021 Posted August 10, 2021 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: "Avenir Next", 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>
tuanphan Posted August 11, 2021 Posted August 11, 2021 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? Have you tried contacting Formassembly support yet? Email me if you have need any help (free, of course.). Answer within 24 hours. Or send to forum message Contact Customer Care - Learn CSS - Buy me a coffee (thank you!)
Joshkaneis Posted August 11, 2021 Author Posted August 11, 2021 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.
Recommended Posts
Archived
This topic is now archived and is closed to further replies.