Follow

Adding input fields to Welcome Mat

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.

Finished Product

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:

  

Adding Fields

    • 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.

Repositioning Elements

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.


  
  • Click the Advanced tab. Navigate to "text" in the editor and change "top: 388px" to "top: 288px", also moving the text 100 pixels closer to the top of the Welcome Mat, making even more room for our extra fields! Be sure to click Save.

  •   
  • Now it's time to move our fields into position! Click the Advanced tab. Navigate to "email" in the editor and change "top: 455px" to "top: 355px". This will move the "email" field up 100px. Be sure to click Save.

  •   
  • Click the Advanced tab. Navigate to "website_url" in the editor and change "top: 455px" to "top: 555px". This will move the "website_url" field down 100px. Now all of our fields are in the right place. Now all that is left is to reposition the buttons! Be sure to click Save.

  •   
  • Click the Advanced tab. Navigate to "buton" and "opt_out" in the editor and change "top: 510px" to "top: 650px" in both. This will move both of the buttons closer to the bottom of the mat. Be sure to click Save. We are done!


  •   

    Editing For Mobile

      • 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:
      
    Was this article helpful?
    3 out of 6 found this helpful
    Have more questions? Submit a request

    0 Comments

    Please sign in to leave a comment.