Adding input fields to Welcome Mat
With the ability to edit the JSON of your Welcome Mats, there is a large degree of customization available. Placement, transparency, borders, fonts, you name it. Go to town!. This guide will provide a brief introduction to JSON editing with the example of adding extra input fields.
We will take the "Atomic" template for Welcome Mat and add two additional fields, styling and repositioning elements within the mat using the Advanced JSON Editor. The finished product should look something like this:
- Create a new Mat. Hover over Mats and click New.
- Click on the Design tab and select the Atomic template.
- Click on the Fields tab and create two additional fields. One should be "name" and the other should be "Website URL."
- Click on the Design tab and notice the newly created fields. Time to style them!
- Click on the Advanced tab. This is the Advanced JSON editor. If you scroll all the way to the bottom, you will see our newly created fields. However you will notice they are not styled.
- In order to ensure that the newly created fields are styled identically to our email field, let's select the code from the email field and copy it.
- Paste the email field JSON into the "name" and "website URL" fields, making sure to edit the "placeholder" and "name" properties to match the respective fields.
- Click Save. Then click on the Design tab to see the new fields. They should be all jumbled together.
Now that we have new fields. It is time to reposition the content in the Welcome Mat to make room for them on the page. Click the Advanced tab. Navigate to the "heading" in the editor and change "top: 260px" to "top: 160px", essentially moving the heading closer to the top of the Welcome Mat, and making room for our extra fields! Be sure to click Save.
- If we switch over to the mobile tab, we see that the newly created and positioned fields do not translate to mobile. This is because all of the styling and positioning for mobile is in a separate section of the editor named "responsive." Let's correct this.
- Click on the Advanced tab and navigate to "responsive" in the editor.
- Scroll down to the end of the the "responsive" section until you see the "email" form field. Copy and paste your new form fields below the "email" field (Note: Make sure your new form fields are within the responsive section). Now reposition the elements similar to how we did in the desktop version of the Welcome Mat, moving elements up and down in the mat to allow room for all of the fields.
- You're done. Click on the Design tab. Check out your new custom, mobile-optimized Welcome Mat! The finished product should look something like this: