So we’ll do that for the 2 column: Īnd you can see how then you would do the same for the 3 column layout.
Otherwise you’ll get a lot of empty divs. If you’re going to use it for all forms, you will probably want to wrap your columns in some logic so that the markup is only printed out if these Field Keys are being used. However, I think it’s nice for it to be available for all webforms since it’s a handy way to build forms using the Bootstrap layout through the Webform UI. There are two ways you can go with this - if you just want to use it for just one webform, rename it. Right now this will also be applied to ALL webforms on the site. This is because anything not explicitly declared in the tpl.php is being printed at the bottom in the section that reads: If you’re following along, you may notice that any fields you haven’t placed in these fieldsets or given these pre-defined Field Keys are getting pushed to the bottom of the webform, regardless of how they are arranged in the Webform UI. Alternatively, if you aren't going to add more fields to these fieldsets, you can just give the fields 1-3 the field keys field_lower_third_1 through field_lower_third_3. For example in our, we can use this code: įollowing the pattern above, we can create 3 fieldsets with Field Keys of field_lower_third_1, field_lower_third_2, and field_lower_third_3, and then nest Fields 1-3 in these fieldsets. We can follow this same pattern for the three column layout. So the is picking up the form's Field Keys from the Webform UI that match what is in the template file, and then wrapping them with the necessary Bootstrap markup. Save and view your webform and bam your fields are now in 2 columns.
I’ve left the fieldset names to display so it’s more clear what’s going on here. Nest the First name and Last name fields in Field Top Left fieldset and the Email and Company fields in the Field Top Right fieldset. Make sure to set the Field Key to the field name you used in the As the tpl.php says: Īnd then in the webform, create two new fieldsets, Field Top Left and Field Top Right. Copy and paste this file into your theme’s directory at /templates/. If you check out the webform directory, you’ll see the default in the templates directory (at something like sites/all/modules/contrib/webform/templates/). Using the file, we will make the form look like this: However, we want the First name, Last name, Email, and Company to be in a two column layout, and Fields 1-3 to be in a three column layout below the body. Let’s say we’ve built a webform like this: I came up with a quick solution to this that, with a little setup, allows the user to leverage Bootstrap through the Webform UI. One place where you can’t easily throw a row and col class around your divs through the admin UI is if you are creating a Webform. On the next screen, click the Edit tab.If you are sub-theming Drupal Bootstrap, you are probably spoiled by all of the awesome functionality that comes with the Bootstrap framework and the Drupal Bootstrap theme.On the next screen, click the view link.Fill in your Web form as an anonymous user.Now publish your form exactly the way you would publish any other content item on your site.You can manage advanced settings according to your requirements.You can control the submission rights in this Webform from the admin panel.If you wish, you can add multiple e-mail addresses. Step-4) Create a form using Webform ModuleĬhoose the types with which you would like to associate Webform components:Īfter creating the form (Form name is Webform 2), Create custom fields for this formĮmail setting for this form: You just need to set the email address to receive an email when the form is submitted. Click the checkbox of the Webform module.Go to the Modules and enable the Webform module.Step-3) Enable the Webform Modules from Module Section in Admin Panel
0 kommentar(er)
