Using shortcodes within HTML in Wordpress

Question

I'm trying to create a part to my website http://176.32.230.43/testdigitalmarketingmentor.co.uk/ (at the bottom!)

Where the contact form/information appears inside of the screen of an iPad. I have done this already where a video appears inside the screen of a laptop, but I can't figure out how to change this to my contact form.

So far I have created the contact section as a builder layout part in Themify Builder. This generates the shortcode: [themify_layout_part id=103] to be placed around the website.

I have just put it below the iPad for now. However, how can I implement a shortcode as part of HTML? This is the code and css I have so far for the iPad with video in the screen. Any help would be much appreciated!

#ipad-panel {
    position: relative;
    padding-bottom: 75%;
    padding-left: 64%;
    height: 0;
}

#ipad-panel iframe {
    box-sizing: border-box;
    background: url(http://176.32.230.43/testdigitalmarketingmentor.co.uk/wp-content/uploads/2016/07/ipad-750x531.png) center center no-repeat;
    background-size: contain;
    padding: 11.3% 14.8% 11%;
    position: absolute;
    left: 20%;
    width: 60%;
    height: 60%;
}


<div id="ipad-panel">
    <iframe src="https://www.youtube.com/embed/BhEWkcyXYwg?rel=0&amp;controls=0&amp;showinfo=0" frameborder="0" allowfullscreen></iframe>
</div>

Answer 1

You need to find the php template file with this HTML area and implement the short code there, you can use this plugin what the file to easily find out which file is it.

after you have found the template file insert <?php echo do_shortcode('[themify_layout_part id=103]'); ?>