<img height="1" width="1" style="display:none" src="https://www.facebook.com/tr?id=946808582111724&amp;ev=PageView&amp;noscript=1">
Material Mega Menu - Responsive

Salsa Blog

Creating Responsive Salsa Templates

by Alexis Findiesen, Design Director, 4site Studios

If you’ve ever used Salsa to create a form, you know that it can be very powerful, but sometimes overwhelming. The Salsa templating system gives you the ability to enter completely custom HTML markup, import custom stylesheets uploaded and hosted on their servers, and add editable regions. While they don’t have responsive forms by default, it’s pretty simple to retrofit through this very customizable system.

Use a responsive system you know, and only start from scratch if you have to

To create the responsive Salsa forms for PreventObesity.net, we updated and imported a lot of existing markup and styles from their recent redesign. Like us, many Salsa users will likely be trying to match an existing design so their Salsa pages fit seamlessly. If you’re looking into making your Salsa pages responsive for whatever reason, it’s smart to start with a responsive framework.

Our typical site is built on the 960 responsive grid (because we use the Omega theme for Drupal), but you could easily use the same method I describe here with Bootstrap or Zurb Foundation or whatever your heart desires! If your entire site is built in Salsa, it’ll be simplest if you start by making a basic page responsive and work your way up to the form pages, to get your feet wet with responsive.

Work on the files locally

To work on the CSS quickly, I preliminarily kept it in the head of the HTML template. Then, once I’m happy with all of the changes I’ve made, I put it in a separate document and upload it to the Salsa servers, adding in the reference in the head of the HTML.

Handy tip: Edit your css and markup in your favorite code editor, such as SublimeText or PHPStorm, so that you can save version that you can easily revert back to. Once you hit save in the Salsa template, it completely overrides your old code, so it’s good to have a backup saved on your desktop. This also makes developing much much easier, as you can test your simple HTML document in the browser without needing to upload anything.

Style the fields so they fit on the screen

Salsa outputs fields in a fairly consistent format. The label and its field are placed together in a field wrapper, which you can set to float and have margins. The field itself I set to have a particular width, then also have a max-width of 100% so that it won’t overflow the edge of the page on mobile.

#page .formRow input[type="text"], #page input.blockInput,
#page .formRow .checkboxLabel
{ width: 390px; max-width: 100%; }

Note that I have an additional id before each of the field selectors. Normally this would not be necessary, and in fact would be bad practice, but we need to add more specificity to override the default Salsa styling of the form elements.

The fields are then grouped inside wrappers depending on what kind of information is being gathered. For example, on the signup page, you can have .supporterInfo, .groups, and .tags, each of which may have 10 or so fields inside. You can check the output of the page to see what’s there and will need styles applied, even if you aren’t currently using all of the options for that page. Salsa simply puts a type=hidden on the inputs when they aren’t in use.

You can float these groups so that they sit next to each other instead of all in a row, giving them a specific column width so that they fit nicely on your page. In the PreventObesity.net template, we went with a two-column format. The key is only having the styles for the columns show up past a certain viewport width, so you’ll need a specific media query in your stylesheet for when this style shows up. Something like:

@media all and (min-width:740px) and (min-device-width:740px),(max-device-width:800px) and (min-width:740px) and (orientation:landscape){ insert styles here}

Dealing with the additional content

Salsa uses a few different labels for the paragraphs of text you can add when you create a new page using the template. Sometimes it will be wrapped in a handy wrapper, other times it will just put it in a simple <p> tag. This works similarly to the way fields are wrapped, in that it will be consistent for particular kinds of pages because they each have a set amount of different kinds of information you can enter (this time when you’re creating the page). However, in this case the wrapper will only show up if you’ve entered content in the text editor for it. Because of this, we’ve been adding styles for these wrappers as needed on the PreventObesity.net pages.

Make sure the content that gets entered in the <page editable> area will be styled too!

Last but still VERY important is to make sure your images will resize as needed so that you don’t get unexpected (bad!) cutoff of images in mobile. Similarly to the field widths, we’ll set two widths: one that’s the actual size (width:auto), one that makes it the full width of its container (max-width:100%). The trick to images is to make sure you also set your image height to auto.

Upload your new template to Salsa

If you already have an existing Salsa template for your forms, don’t override it just yet. Create a new template to work out any remaining kinks so that it’ll be perfect before anyone sees it on your live donation pages.

Salsa templates have a very handy feature - if you’re importing images from another site (say, your main site), you can have it automatically import the assets and update your code for you. If not, you’ll just need to go through all the links in your HTML and make sure each assets gets uploaded to the Files and Images section of the Salsa website toolkit. Then, update all your links in the Salsa template online. Copy all of this and save another local copy with “Live” in the name to help remember that it’s the actual Salsa relative links.

 

Test, test, test

Once you get everything setup, make sure you test your new pages using the template in multiple browsers, devices, and with varying input methods (I’m looking at you, touch screens!). Making sure things float and stack and resize properly gets to be a bit of an art form, so have some patience and don’t be afraid to try something new. As always, make sure you make frequent backups of your work on your local machine so that you don’t lose work if something winds up breaking upon upload to the Salsa servers.

 

Link your new pages to your website

Now that you’re satisfied with how your forms look and change to fit many devices, you can set up a link to go to your sign up or donate page, and start rolling in those submissions! Congratulations, you can now get donations from people on their smartphones in the subway or browsing the web in bed on their tablet!

Topics: Salsa