To create a more seamless UI on data form extensions it would be nice to move the custom fields into OOB html. To start with we need to create our data form extension and have it show up on the OOB form.
I want to move the “Date sent” row above the “Correspondence code” drop down list. No we need to get the ID of that row using the developer tools in Google Chrome. Hit F12 on your keyboard and the developer tools will pop-up. You can then click on the button on the far left side, it’s highlighted in the screenshot below.
Click on the row you want to select and then find the “*_container” tr of the element you want to inject your html row before. As you can see it’s called “ctrl_9a80131c_4f12_462b_9367_b460ec0b2c5a_CORRESPONDENCECODEID_container”.
The finished product is below.