Form Builder - Tips & Tricks

00:01: Hi, this is Maggie from healthy roster. And I'm going to show you some tips and tricks of the 2.0 form Builder. 00:08: I'm starting with the formatted content component. You can either drag and drop the formatted content component over to your field and designer build or if you already have one there click the gear icon to open up the HTML Builder. 00:23: When opening the HTML Builder we give examples on how you can code each different format. Whether it's a header you want to bold something underlined italicize create a bulleted section. There are many different options that you can see on the page here. I'm starting out with the example of how to make something bold. You can see that we have a carrot B carrot and then enter the word that you need and then to close it out. You will carry it slash B carrot. 00:57: I've given two more examples underneath the Bold section in this formatted content. You can see the carrot BR closed carrot will break your paragraphs and create space on your form underneath that there is an italicized example on how to italicize a sentence or a word. Underneath this video. We have several different options on what you can use for formatting your HTML. You can use underlined headers centers how to create a link how to create a logo paragraphs bulleted lists or numbered lists. These examples are provided in this helped docs page. 01:36: The HTML and four mounted content area is broken up into two sections the top section that you saw previously is the coded area where you enter your HTML building and the bottom is a preview section what I just went over you can see the examples Below in bold italicized and underlines. You can also see a full list that is not highlighted with different header options different link options and how to make a list. 02:05: The formatted content component is the component you will utilize for the bulk of your forms. This is where you can copy and paste your paragraphs that are on your forms. So they are visible on the new form you're creating in healthy roster an example would be a consented treat page and all of the legal and information that you're sending out to the athlete or parents in a paragraphs format. You will copy and paste into the formatted content component and edit with the HDMI Builder to create the Bold sections create links bullet points, things like that. Once you have edited the HTML Builder and the formatted content to your liking and to your needs you will click save at the bottom. 02:54: The next tip and trick that I have for you in the form Builder is how to resize your columns or your layouts that are built within your form. I have an example below here of a column that has a name and date of birth section. You can see this is a two column layout. I'm going to show you how to edit this to create a three column layout. 03:15: You can start editing the sizing of your column layout by clicking the gear icon on your layout section or drag and drop a column layout from the component section from the left into the right designer section. 03:30: There are four different sizing options within the columns component width offset push or pull. The width total should always be 12. So we suggest to decide how many columns you'd like and make sure that total is 12. Offset will move the column element to the left or the right and it does affect other content. Push moves the column element to the right without affecting other content and pull will move the column element to the left without affecting other content. 04:06: Moving on to show you how to move from a two column layout to a three column layout The width here you can see the columns are set to 6 and 6. This is typical for a two column sizing. So this is what you will want to use if you have two columns. 04:26: To create a three column layout or just to shorten your two column layout you will change the width sizing to 4 and add another column you can see where I've highlighted here that I've created the width sizing on the two columns to 4 and 4 and at the below you will see a preview of the name and date of birth columns have shortened to add your third column. You will just click add column and you will now have a three column layout 04:58: Once you are finished editing your column sizes click save. 05:04: Here my last tips and trick for this video is how to copy and paste components. Sometimes you have many different text Fields or select boxes select menus and instead of creating each one individually. You can just copy and paste the component. You will start by clicking this icon on the text field element. And please note that every element you drag into the designer field will have this option. So click this copying option here. 05:36: It and after you have clicked the copy icon a paste icon will appear to the left of that click this button and you will now have a copied and pasted element and duplicated to your field to make your form building a little bit more efficient. 05:54: You now know some tips and tricks of the healthy roster 2.0 form Builder. Please see the rest of this help docs for further details and even more tricks on how you can make your form building more efficient and time-saving if you have any questions or need to reach our support staff, please reach out to help at healthy roster.com.