Viewing 10 posts - 1 through 10 (of 10 total)
  • Author
    Posts
  • #26777

    Hi – Please see http://thecaloriemythbook.com. In the promo box “GET YOUR FREE 28 DAY PROGRAM” we have the following HTML form code. Two things:

    1. If we wrap the code below in <p> tags everything works fine, however, after saving, the <p> tags are automatically stripped and the problem I’m about to describe happens

    2. Including that HTML causes the following Quotes and all subsequent pictures not to display on the page. Again, these problems do not happen if the form HTML is wrapped in <p> tags, but this isn’t a viable work around as these tags are removed automatically when the page is updated.

    How can we leverage this form HTML while not compromising the rest of the page? Thank you.

    <link href=”//www1.moon-ray.com/formeditor/formeditor/css/form.default.css” rel=”stylesheet” type=”text/css” /> <link href=”//www1.moon-ray.com/formeditor/formeditor/css/form.publish.css” rel=”stylesheet” type=”text/css” /> <link href=”//forms.moon-ray.com/v2.4/include/minify/?g=moonrayCSS” rel=”stylesheet” type=”text/css” /> <link href=”//ajax.googleapis.com/ajax/libs/jqueryui/1.8.10/themes/smoothness/jquery-ui.css” rel=”stylesheet” type=”text/css” /> <link href=”//www1.moon-ray.com/v2.4/include/formEditor/gencss.php?uid=p2c10469f14″ rel=”stylesheet” type=”text/css” />

    <script type=”text/javascript” src=”//www1.moon-ray.com/v2.4/include/formEditor/genjs-v2.php?html=false&uid=p2c10469f14″></script> 

    <div class=”moonray-form-p2c10469f14″>

    <div class=”moonray-form moonray-form-label-pos-stacked”><form class=”moonray-form-clearfix” accept-charset=”UTF-8″ action=”https://forms.moon-ray.com/v2.4/form_processor.php?” method=”post”>

    <div class=”moonray-form-element-wrapper moonray-form-element-wrapper-contracted moonray-form-element-wrapper-alignment-left moonray-form-input-type-text”><label class=”moonray-form-label” for=”mr-field-element-93054418079″>First Name</label><input class=”moonray-form-input” id=”mr-field-element-93054418079″ type=”text” name=”firstname” placeholder=”" required=”" value=”" /></div>

    <div class=”moonray-form-element-wrapper moonray-form-element-wrapper-contracted moonray-form-element-wrapper-alignment-left moonray-form-input-type-email”><label class=”moonray-form-label” for=”mr-field-element-512036076431″>Email</label><input class=”moonray-form-input” id=”mr-field-element-512036076431″ type=”email” name=”email” placeholder=”" required=”" value=”" /></div>

    <div class=”moonray-form-element-wrapper moonray-form-element-wrapper-alignment-center moonray-form-input-type-submit”><input class=”moonray-form-input” id=”mr-field-element-222251169937″ type=”submit” name=”submit-button” value=”Click Here To Get Your Free Program and Start Living Better Today” data-lastdisplayval=”Click Here To Get Your Free Progam and To Live Better Today” /></div>

    <div class=”moonray-form-element-wrapper moonray-form-input-type-hidden”><input type=”hidden” name=”afft_” value=”" /></div>

    <div class=”moonray-form-element-wrapper moonray-form-input-type-hidden”><input type=”hidden” name=”aff_” value=”" /></div>

    <div class=”moonray-form-element-wrapper moonray-form-input-type-hidden”><input type=”hidden” name=”sess_” value=”" /></div>

    <div class=”moonray-form-element-wrapper moonray-form-input-type-hidden”><input type=”hidden” name=”ref_” value=”" /></div>

    <div class=”moonray-form-element-wrapper moonray-form-input-type-hidden”><input type=”hidden” name=”own_” value=”" /></div>

    <div class=”moonray-form-element-wrapper moonray-form-input-type-hidden”><input type=”hidden” name=”oprid” value=”" /></div>

    <div class=”moonray-form-element-wrapper moonray-form-input-type-hidden”><input type=”hidden” name=”contact_id” value=”" /></div>

    <div class=”moonray-form-element-wrapper moonray-form-input-type-hidden”><input type=”hidden” name=”uid” value=”p2c10469f14″ /></div>

    </form></div>

    </div>

    #131569

    Hi!

    You can try this plugin: http://wordpress.org/plugins/raw-html-snippets/ – it allows you to insert raw html code snippets anywhere you want to.

    Regards,

    Peter

    #131570

    Hi Dude – Thank you for this suggestion. Please see: http://TheCalorieMythBook.com/wp-content/uploads/2013/07/7.29.13.1.png

    You’ll note that despite the activation and usage of the plugin, when I include the shortcodes in the promobox, they show up as the literal short codes vs. the HTML.

    Any suggestions are appreciated.

    #131571

    Hi Guys – Sorry to bug you. Any help here would be appreciated. Thanks for the amazing support so far :)

    #131572

    Quick update. Did a bunch of work with the recommended http://wordpress.org/plugins/raw-html-snippets. Please see http://thecaloriemythbook.com/medical-reviews/ and CTRL + F for “get your” You’ll see a color section with an HTML snippet inside of it. No matter what I try I can’t get the HTML snippet to be center aligned…the theme is ignoring all of my efforts. Any help to center this is much appreciated. You guys rock

    #131573

    Please create me a wordpress admin account and send me the login data to: (Email address hidden if logged out) – I’ll look into it and check why the shortcode doesn’t work.

    The problem is you use an iframe to embed the form. If you want to center the form you must modify the iframe content which can’t be done with the theme files (css stylesheets, etc.). You’d need to modify the iframe content directly. Another possible solution would be to to set a smaller width for the iframe itself and to center the iframe with

    margin: auto;

    #131574

    Thanks so much dude. I did this and you should have gotten an email. At this point all we really need is a way to make an iFrame form show up centered in a colored section…see the bottom of http://thecaloriemythbook.com/medical-reviews/

    #131575

    Ideally we’d be able to put the from into a promo box within a colored section to get something that looks like: http://TheCalorieMythBook.com/wp-content/uploads/2013/08/ideal.png

    #131576

    I played around with it a bit but the problem is the content source/iframe and not the theme. The css code of the iframe website limits the form to 700px and always cuts it on the right side: http://www.screenr.com/7LAH . Regardless which column structure I use I can’t expand or center the iframe because of the default css code. Please contact the form provider and ask them how to manipulate the form css code.

    #131577

    Hey Dude – Wow! Thank you so much for going over and above here. Very much appreciate the exceptional support. Have a great weekend.

Viewing 10 posts - 1 through 10 (of 10 total)

The topic ‘HTML form code in promo box breaks things’ is closed to new replies.