Help Formating Forms

[Anonymous]

I've been scouring the community trying to find information about adding line breaks in forms to formating moving the submit button in a form, to seperating fields in forms. The task has proven very difficult. Every string of code I find and every link to a help article never works. It might also be that the discussions are outdated.
 

Can someone help me better understand how to custom format forms? I'm not a developer, I don't understand jQuery and I haven't the slightest idea on what I'm doing or how to do it.

I'm looking for information on the following:
1) Add space between form fields.
2) Create space between sections on a form without having to make a new form to add to the landing page
3) Center the submit button

http://info.softinway.com/UpdateEmailPreferences.html

Here's the page I'm working on. As you can see it is poorly organized. I'd like the section from the email address field until the training and workshops field to be seperated by a line or space or even in it's own box,  from the rest of the form. That way we have seperated sections, but it's still one form.

I'm very basic in coding, so explanations would be greatly appreciated as well.

Thank you to anyone willing to help!

[Anonymous]

Not sure how well this approach will play on mobile devices even with the jquery customization of the Marketo forms at the end of the day...Key here is to remember >65% of the visitors will need a "thumb friendly" page and from...

[Anonymous]

Here's a decent Marketo article that may help you with one or more of those issues: http://community.marketo.com/MarketoResource?id=kA650000000GttkCAC


For moving the submit button, look for mktFrmSubmit in the LP code and experiment with altering positional values (this is the best way to learn what works and what doesn't, in my opinion). If you can't figure it out, post again here and I or someone else will do our best to help! 🙂

[Anonymous]

Hi Mark - I don't think you finished your sentence...

Adam - thank you for wanting to help. I looked up the source code for the lp, found the mktFrmSubmit code, copoied and pasted into custom html snippet and played with numbers, but didn't get anywhere. It had no affect on the form layout. What am I doing wrong?

[Anonymous]

My point was to just step back first and consider the user experience of the page/form on mobile devices.

[Anonymous]

That's definitely something to keep in mind - I will be able to think more about it once I have better knowledge about formating my forms. Thanks.

[Anonymous]

Hi Jackie:

Have you had any luck? I am running into the same issue. Thank you!

[Anonymous]

Thanks for bumping this Sasa - I meant to get round to giving more detailed help to Jackie, but I've been really busy.

Jackie: I had a look at your LP and have identified the elements you probably want to change (parts you will want to tweak further in bold):

Note: When inserting code to modify styles using the custom HTML feature, make sure to include the <style> tags!

<style>
 

#mktFrmSubmit{

    margin-left: 10px;

}

form.lpeRegForm li.mktField {

    padding-bottom: 10px;

}

</style>

A good tip is to use Inspect Element on either FireFox or Chrome, as both browsers have excellent web code manipulation/debugging interfaces (right click on your LP element & select Inspect Element). After spending some time playing around with your LP elements using this feature you'll have a much better understanding of how the code works, or at least how to edit it if needed in future!

Hope this helps. Reply here if you get stuck again at all 🙂