working with form 2.0

[Anonymous]

Hi There,

I am working with form 2.0 and facing some problem. have a form 2.0 embedded on a Marketo landing page. I am using a background div with some color. My form has state field that is only visible if and only if one selects a country as the USA or Canada. Due to this form height is not constant. I need to change the height of background div in the same manner.. I tried different things in the query, but not get any success. Can any one help me how can I overcome this problem?

Your quick feedback will be really appreciated.

[Anonymous]

You'll need Javascript to do this; you'll have to add some sort of listener that adds height to your background div when the state field is shown. If you need some coding/consulting help I'm available to help. If you want to tackle it yourself, check out the Forms 2.0 Documentation and all the regular JS haunts on the web (Stack Overflow, etc.).

[Anonymous]

Hi Jason,

Thanks you very much for your reply. I already tried using javascript and jquery but not get any success. My code i not even able to get any form field. I am suing something like:

1. <script type="text/javascript">
2. $jQ(document).ready(function(){
3. var country=document.getElementById("#Country");
4. alert(country);
5. country.change(function() {
6.   alert( $jQ(this).val() ); // or $(this).val()
7.  
8.  
9. });
10. });
11. </script>
     

From the 4th line, in Alert I am gettinh null, which means my code is getting executed before form loading. As per my understanding, Mareto also load form 2.0 dynamicaly using javascript. This might be causeing problrm. It will be very helpful for me if you can review my code above and let me know what I am missing here.

[Anonymous]

To run js after the Form 2.0 has finished loading you can

wrap your code inside a onFormRender() method

MktoForms2.onFormRender(function(){
//insert your code here

});

or add a callback function in the loadForm()

ie

1. MktoForms2.loadForm("//app-sjst.marketo.com", "785-UHP-775", 1057, function(form){
2. //insert your code here
3. });