When you add a form from Marketo to your Knak landing page, we provide two options 'Default Style' and 'Knak Style'.
The 'Default style' will be the form coming directly from your Marketo instance. This might work for you if you have already added custom CSS to the form and like the way it looks on your landing page but unfortunately Marketo adds a lot of CSS code to the form itself which makes it difficult to make any adjustments to how the form looks, the code applied is very outdated, it doesn't account for responsive behavior on mobile and often leads to an undesirable result.
The 'Knak Style' removes the CSS code set by Marketo in order to enable you to set the style in the sidebar of the Knak builder. This leads to a responsive form that is generated with cleaner, more modern code.
There are a lot of things to consider when it comes to form styling so here are some questions on forms that you may wish to review if things aren't working quite as expected.
Something looks odd with my form with Knak style applied?
If something is looking incorrect with your form when the Knak style is applied, it is likely that there is some custom CSS on the form that is interfering with the style. You can check if there is custom CSS on the form by opening the form in Marketo → navigating to form settings and then clicking on "Edit Custom CSS".
If this text box contains a lot of code then it may be a good idea to clone the form in Marketo. Remove the custom CSS from the cloned form and then use the cloned form in Knak instead to see if that resolves the issue.
If that doesn't resolve it then please contact the Knak Support at support@knak.com.
Why are the labels positioned above the inputs?
The 'Knak style' positions the label above the text inputs. This is a clean way to ensure responsive behavior and allow you to set the width of the entire form without the label text wrapping onto multiple lines.
My labels are in the inputs. Why do the label styles not work?
If you have no labels above the text inputs then you are using hint text and the labels contain no content. This may be preferable for styling the form but it is not ideal for accessibility as screen readers would not properly be able to determine the labels for your fields. We would strongly recommend going into your Marketo form and adding the labels back in and using more appropriate hint text that gives the user an example answer to the field.
The label should be populated:
Why does the form not look the same as on my other landing page?
If you have a landing page that contains styling or javascript that controls how a form looks then the code lives on the other landing page and we can't utilize that code in Knak unless you can provide it to us. If this is the case, please send us an example of the page where your form is styled and we will try our best to match the style of your current form within the Knak builder.
Visibility Rules:
We recommend for simplicity reasons to disable visibility rules; however, if you choose to enable visibility rules, please ensure that you match the picklist values to ensure your forms display as intended.
Need more help? Contact support via live chat within Knak using the chat bubble in the bottom right corner or email support@knak.com