Adding CUSTOM styling code to the default FORM -> Lists/Lists/Form code.

PeterSGT

PeterSGT

New Member
Hello

I want to add in Mailwizz, an additional code to the default form.
In such a way that the newly created list, after going to this form, will have this code attached automatically, for example, above the original code.

How do I make this functionality so that it does not disappear after an update?

As in the example below the code was added between the <style> tags.

<style>
.list-subscribe-form {
border: 1px solid #000;
border-radius: 15px;
margin: 10px;
padding: 10px;
}

.form-control {
border-radius: 10px;
}

.btn-primary {
border: 2px solid navy;
background-color: white;
color: navy;
}
</style>

<form class="list-subscribe-form" action="https://yourdomain.coml/lists/1234567891234/subscribe" method="post">
<div class="box box-primary borderless">
<div class="box-header">
<h3 class="box-title">
l7
</h3>
</div>
<div class="box-body">
<div class="callout callout-info">
<strong><span style="font-size:18px;">Sign UP</span></strong>
</div>
<div class="form-group field-text wrap-fname" style="display: block">
<label for="FNAME" class="required">First name <span class="required">*</span></label> <input class="form-control field-fname field-type-text" placeholder="First name" type="text" value="" name="FNAME" id="FNAME" />
</div>
<div class="form-group field-text wrap-email" style="display: block">
<label for="EMAIL" class="required">Email <span class="required">*</span></label> <input class="form-control field-email field-type-text" placeholder="Email" type="text" value="" name="EMAIL" id="EMAIL" />
</div>
<div style="position: absolute; left: -5000px;" aria-hidden="true">
<input type="text" name="2d4acbc8752ad9c7812e91899cfa7969c5510aae" tabindex="-1" autocomplete="2d4acbc8752ad9c7812e91899cfa7969c5510aae" value="" />
</div>
</div>
<div class="box-footer">
<div class="pull-right">
<input type="submit" class="btn btn-primary btn-flat" name="yt0" value="Sign UP" />
</div>
<div class="clearfix">
&nbsp;
</div>
</div>
</div>
</form>
 
@PeterSGT - in apps/ directory, create a new file called appsinit-custom.php and place this code inside:
Code: 
<?php

hooks()->addAction('frontend_list_page_display_content_before_content', function($collection) {
?>
<style>
.list-subscribe-form {
border: 1px solid #000;
border-radius: 15px;
margin: 10px;
padding: 10px;
}

.form-control {
border-radius: 10px;
}

.btn-primary {
border: 2px solid navy;
background-color: white;
color: navy;
}
</style>
<?php
});

This should inject those styles in the form itself, before the fields, for all forms.
 
Last edited:
Unfortunately it did not work, I added the below from myself, but nothing changed.
Yii::app()->

Should the code you provided work, without changes?

I checked on the current lists and created new ones and the injected code was not there either.
 
PeterSGT said:
Unfortunately it did not work, I added the below from myself, but nothing changed.
Yii::app()->

Should the code you provided work, without changes?

I checked on the current lists and created new ones and the injected code was not there either.
Click to expand...
Rename file in: init-custom.php and try again, with this change should be work correctly.
 
OH Mammamija... :)

It's working now, but I think I mischaracterized my need.
Because this code is added, during the generation of the form from the link.
It is run and styles the form.
thispoint.jpg


And I wanted this code to be pasted into the form code that is used for copying.
In such a way that the user, could copy it.

In this way, the user will be able to easily style any form, having ready-made elements to change the style.
 
@PeterSGT - Okay, so we do have some filters to remove unwanted content from that form.
What I did, and it seems to work just fine, I pasted the style in a .css file in /assets/css/custom-subscribe-form.css and in the hook I did:
PHP: 
<?php
    
hooks()->addAction('frontend_list_page_display_content_before_content', function($collection) {
?>
    <link rel="stylesheet" type="text/css" href="<?php echo apps()->getAppUrl('frontend', '/assets/css/custom-subscribe-form.css', true, true);?>" />
    <?php
});
Which created this form:

HTML: 
<form class="list-subscribe-form" action="http://mailwizz.test/index.php/lists/lj162bcbl3cf2/subscribe" method="post">
      <link rel="stylesheet" type="text/css" href="http://mailwizz.test/assets/css/custom-subscribe-form.css" />
      <div class="box box-primary borderless">
        <div class="box-header">
          <h3 class="box-title">
            Aperiam aliquid optio quo.
          </h3>
        </div>
        <div class="box-body">
          <div class="callout callout-info">
            We're happy you decided to subscribe to our email list.<br />
            Please take a few seconds and fill in the list details in order to subscribe to our list.<br />
            You will receive an email to confirm your subscription, just to be sure this is your email address.
          </div>
          <div class="form-group field-text wrap-email" style="display: block">
            <label for="EMAIL" class="required">Email <span class="required">*</span></label> <input class="form-control field-email field-type-text" placeholder="Email" type="text" value="" name=
            "EMAIL" id="EMAIL" />
          </div>
          <div class="form-group field-text wrap-name" style="display: block">
            <label for="NAME" class="required">name <span class="required">*</span></label> <input class="form-control field-name field-type-text" placeholder="name" type="text" value="" name="NAME"
            id="NAME" />
          </div>
          <div style="position: absolute; left: -5000px;" aria-hidden="true">
            <input type="text" name="54c47d84ba996aa1696d5cffa13ebc9176dbce86" tabindex="-1" autocomplete="54c47d84ba996aa1696d5cffa13ebc9176dbce86" value="" />
          </div>
        </div>
        <div class="box-footer">
          <div class="pull-right">
            <input type="submit" class="btn btn-primary btn-flat" name="yt0" value="Subscribe" />
          </div>
          <div class="clearfix"></div>
        </div>
      </div>
    </form>
 
It works, but adds this code in the form that appears when you click the form link.

And I wanted this code to be added to the form content, which is used to copy the HTML code.
This is where I showed in the picture.
Form.jpg
 
MailWizz just fetches the public form and shows it in your embed box, so it's basically just same form.
 
You must log in or register to reply here.
Back
Top