externes Formular inkl. Javascript in einen Artikel einbinden (Newsletter-Funktion)

  • Folgendes Problem:

    1. Ich möchte ein externes Formular mit dem folgendem Code (siehe unten) in einen Newsbereich oder auch Artikel einfügen:

    Wenn ich das im ZP in einem Artikel einfüge und speichere, ist die ganze Seite nicht mehr ansprechbar und ein weiterarbeiten ist nur möglich, wenn man die Seite komplett löscht.

    Gibt es eine Möglichkeit dass es trotzdem funktioniert?

    2. Wenn ich die Anmeldung ausführe möchte ich, dass die (externen) Confirm-Seiten im gleichen Artikel angezeigt werden.

    Wie mache ich das?

    Hier der Code:


    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
    <html xmlns="http://www.w3.org/1999/xhtml">
    <head>
    <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
    <title>CleverReach</title>
    <script type="text/javascript" src="/js/jquery-1.3.2.min.js"></script>

    <style>
    body {
    font-family:Arial, Helvetica, sans-serif;
    font-size:12px;
    background:#f8f8f8;}
    a{color:#0066CC;}
    .login {width: 450px; margin: 9em auto; }
    .loginform {margin-left: 8px;
    padding: 16px 35px 16px 30px;
    font-weight: normal;

    background:#fff;
    border:1px solid #ddd;
    box-shadow: 0 1px 2px rgba(0, 0, 0, 0.1);}
    #login_logo {
    display:block;
    max-width:325px;
    text-indent:-3000px;
    margin-bottom:30px;
    }

    .ssl{ float:left; font-size:0.9em; margin-top:-10px; color:#999; }
    .forgotten{ float:right; font-size:0.9em; margin-top: -10px; }
    .forgotten a{ color:#666;}


    h1{ font-size:1.2em;
    }
    .button{ margin-top:10px; font-size:1.2em; font-weight:bold; font-family:Arial, Helvetica, sans-serif; background:#ddd; border:1px solid #ddd; -moz-border-radius:6px; border-radius:6px; -webkit-border-radius:6px; padding:8px 35px 8px 35px; color:#000000; text-decoration:none; cursor:pointer; }
    .button:hover{ background:#ccc;border:1px solid #ccc;}

    .button a{text-decoration:none; border:none; color:#000000;}
    .button img{border:0px;}
    .button_deactivated{color:#ccc;}
    .button_deactivated:hover{background-image:url(buttonsave2.gif);}


    label {color:#666;;font-size:1.2em;}

    #password, #login, #email, #client_id {
    font-size: 1.4em;
    width: 100%;
    padding: 3px;
    margin-top: 4px;
    margin-right: 6px;
    margin-bottom: 10px;
    border: 2px solid #ccc;
    background: #fbfbfb;
    color: #444444;
    }

    .notice_flat {padding:10px 8px 10px 8px; margin:1em 0; background:#fffee9; color:#333; }
    .notice_round {padding:8px 8px 8px 8px; margin:1em 0; -moz-border-radius:4px; border-radius:4px; -webkit-border-radius:4px; background:#fffee9; color:#333; border:1px solid #c4c28e;}

    .notice_warning {background:#FBE3E4; color:#D12F19; font-size:1.2em;-moz-border-radius:4px; border-radius:4px; -webkit-border-radius:4px}
    .notice_warning h4{color:#FFFFFF;}
    .notice_warning a{ color:#FFFFFF;}

    .social ul{ margin:35px 0; padding:0; }
    .social li{ font-size:12px; color:#666; margin-top:30px; list-style:none; display:inline; margin-right:20px;}
    .social li img{ border:none; }
    .social li a{ text-decoration:none; color:#666; }
    .social li a:hover{ color:#000; }

    </style>
    <script>
    <!--
    function setfocus()
    {
    document.loginform.login.focus();
    }
    -->
    </script>
    </head>
    <body onload="">
    <div class="login">
    <div class="loginform">

    <img src="https://s3-eu-west-1.amazonaws.com/files.crsend.c…/logo_clean.png" id="login_logo" alt="CleverReach" />


    <form name="loginform" action="https://eu1.cleverreach.com/admin/login.php" method="post">


    <p>
    <label>Kundennummer<br />
    <input type="text" name="client_id" id="client_id" class="input" value="" size="20" tabindex="10" /></label>
    </p>

    <p>
    <label>Benutzername<br />
    <input type="text" name="login" id="login" class="input" value="" size="20" tabindex="10" /></label>
    </p>

    <label >Passwort<br />
    <input style="margin-bottom:15px;" type="password" name="password" id="password" class="input" value="" size="20" tabindex="20" /></label><br />

    <div class="forgotten"><a href="login_password.php?lang=">Zugangsdaten vergessen</a></div>

    <br />
    <div align="center">
    <button type="submit" class="button" type="submit">Login</button></div>
    <input type="hidden" name="ref" value="/admin/ajax/forms_get_embed_code.php?id=122656&amp;colors=all&amp;popup=0&amp;duration=2&amp;ssl=true&amp;no_js=false&amp;layout=unsubscribe&amp;badge=0&amp;full_v=0" />
    </form>
    <script>
    setfocus();
    </script>

    <br />


    </div>

    </div>


    <span id="cr_login_check_cr"></span>
    <!-- -->
    </body>
    </html>

  • Hallo,

    dieser Code kann so nicht funktionieren, da er eine Komplette HTML Seite inkl. <head> und <body> etc. enthält, was ja in allen ZP Seiten generell auch bereits enthalten ist. Ich bin sicher, da bietet der Newsletter-Beetreiber bessere Methoden zur Integration.

    Etwa wie hier beschrieben:
    http://support.cleverreach.de/entries/21671483-Wie-können-sich-neue-Newsletter-Empfänger-über-meine-Webseite-anmelden-

    Falls dieser Code auch Probleme macht, die Zeile im Quellcode mit jquery.min.js bitte löschen, da ZP jquery bereits selbst lädt.

    Freundliche Grüße
    Stefan S. (Zeta Producer-Support)

  • Hier der Code von cleverreach ohne JS:

    Das funktioniert. Wie aber bekomme ich die Antwortseiten beim Absenden wieder im gleichen Artikel angezeigt?


    <style>
    .cr_site { background:#FFFFFF; text-align:left;}
    .cr_header { background-color:#ccc; }
    .cr_body {background-color:#efefef;}
    .cr_page {border-width:1px;border-color:#000000;border-style:solid; width:640px;}
    .cr_page {border-width:1px;border-color:#000000;border-style:solid;}
    .cr_font {font: normal 12px Arial, Helvetica, sans-serif;}

    .cr_header .logo {min-height:20px; }
    .cr_header_text p {display:block;margin:5;padding:5px;}

    .cr_ipe_item{ padding:1px 10px; margin:1px 10px; }
    .cr_ipe_item.inactive { display:none; }
    .cr_hr {border:0;background-color: #ccc;height: 1px;}

    .cr_button {display:inline-block;width:auto;white-space:nowrap;margin:5px;padding:4px 18px;text-decoration:none;text-align:center;font-weight:bold;font-style:normal;font-size:14px;cursor:pointer;border:0;border-radius:4px;}

    .imprint {font-size:0.8em;}
    .cr_captcha {padding-left: 130px;}
    .cr_ipe_item .itemname{display:block;float:left;width:120px;text-align:left;margin:5px 0px 0px 0px;}
    .cr_ipe_item input[type="text"]{width:300px;}
    .cr_ipe_item textarea{width:300px;}
    .cr_ipe_item select{width:300px;}
    .cr_ipe_item p {margin:0;}

    .cr_ipe_item select {padding:5px 4px; border:1px solid #ccc; color:#333; background:#FFFFFF; margin:0px; padding:2px;}
    .cr_ipe_item textarea:focus, input[type="text"]:focus {border:1px solid #ababab;}
    .cr_ipe_item input, textarea{ padding:3px 3px; margin:2px; border:1px solid #ccc;}
    .cr_ipe_item input.cr_ipe_checkbox, input.cr_ipe_radio { border:none; width:15px; }

    .cr_error {font-size:1.1em;padding:10px;}
    .clever_form_error { background-color: #f99; color:#fff; border:1px solid #f22 !important}
    .clever_form_note {margin:26px 0 0 3px;position:absolute;display:inline; padding: 2px 4px; font-weight:bold;background-color:#f2ecb5; color:#000; font-size:12px !important; }

    .cr_site {background-color:#ffffff;}
    .cr_header {background-color:#8c8c8c;color:#000000;}
    .cr_body {background-color:#f0f0f0;font-size:12px;color:#000000;}
    .cr_page {border-width:0px;border-style:solid;border-color:#000000;}
    .cr_hr {background-color:#ccc;}
    .cr_site a {color:#0084ff;}
    </style>


    <style id="style">
    .cr_site {background-color:#336899;}
    .cr_header {color:#000000;background-color:#e8ebee;}
    .cr_body {background-color:#e8ebee;font-size:12px;color:#000000;}
    .cr_hr {background-color:#ccc;}
    .cr_site a {color:#0084ff;}
    .imprint {color:;}
    .cr_page {width:500px;border-style:none;border-width:0px;border-color:#ffffff;}
    title {:brunert2;}
    .cr_font {font-size:12px;}
    .cr_button {background-color:#336899;color:#ffffff;}

    </style>


    <form class="layout_form cr_form cr_font" action="https://eu1.cleverreach.com/f/59604-122656/wcs/" method="post" target="_blank">
    <div class="cr_body cr_page cr_font formbox">
    <div class='non_sortable' style='text-align:left;'>

    </div>

    <div class='editable_content' style='text-align:left;'>
    <div id="2490968" rel="select" class="cr_ipe_item ui-sortable" style=" margin-bottom:5px;">
    <label for="select_2490968" class="itemname">Anrede</label> <select id="select_2490968" class="cr_font" name="1034697" style="width:50%;" >

    <option value="Herr" selected checked>Herr</option>

    <option value="Frau" >Frau</option>
    </select>
    </div><div id="2490970" rel="text" class="cr_ipe_item ui-sortable" style=" margin-bottom:5px;">
    <label for="text2490970" class="itemname">Vorname</label> <input id="text2490970" name="1034698" type="text" value="" style="width:100%;" />
    </div><div id="2490971" rel="text" class="cr_ipe_item ui-sortable" style=" margin-bottom:5px;">
    <label for="text2490971" class="itemname">Nachname</label> <input id="text2490971" name="1034699" type="text" value="" style="width:100%;" />
    </div><div id="2490946" rel="email" class="cr_ipe_item ui-sortable musthave" style="margin-bottom:5px;">
    <label for="text2490946" class="itemname">E-Mail*</label> <input id="text2490946" name="email" value="" type="text" style="width:100%;" />
    </div><div id="2490948" rel="button" class="cr_ipe_item ui-sortable submit_container" style="text-align:center; margin-bottom:px;">
    <button type="submit" class="cr_button">Anmelden</button>
    </div>
    </div>

    <noscript><a href="http://www.cleverreach.de">https://community.zeta-producer.com/www.CleverReach.de</a></noscript>
    </div>

    </form>

  • Hallo,

    durch die Technik bedingt, kann die Antwortseite nicht von Ihrem Server kommen, da dieser das Formular ja nicht verarbeitet. Ausser, cleverreach macht das in seinem Skript per AJAX. Dies wäre mehr ein Thema für die Support-Kanäle des Skript-Anbieters.

    Freundliche Grüße
    Stefan S. (Zeta Producer-Support)

Jetzt mitmachen!

Sie haben noch kein Benutzerkonto auf unserer Seite? Registrieren Sie sich kostenlos und nehmen Sie an unserer Community teil!