Horizontal Mail chimp form

Hi,

Thanks for the update.

Are you using the theme’s mailchimp signup element? That css code is for the mailchimp embed code, so it’s not going work for the default mailchimp signup element. If you want to follow the documentation, you have to use this plugin.

// https://wordpress.org/plugins/mailchimp-for-wp/

Docs: https://kriesi.at/documentation/enfold/mailchimp-signup/#mailchimp-4-wordpress-plugin-integration > Playing with columns

Best regards,
Ismael

Hi,

You can’t use that particular css code because the html or structure of the theme’s mailchimp signup element is different from the embedded ones. You have to use the embed version of the form because that is where the css code is intended for. Would you mind providing a screenshot of the layout that you want to have? You can upload the screenshot to imgur or dropbox.

Best regards,
Ismael

Hi,

You can use the theme’s mailchimp signup element instead. Insert two 1/2 columns, place the signup form in the second one and the add a text/code block on the first. Use that text/code block to create the text beside the form.

Best regards,
Ismael

Hi,

The following custom css code hides the subscription button.

#av_section_6 > div > div > div > div > div.flex_column.av_one_half.flex_column_div.av-zero-column-padding.avia-builder-el-29.el_after_av_one_half.avia-builder-el-last.horizontal-mailchimp > form > fieldset > p.form_element.first_form.form_element.form_fullwidth.av-last-visible-form-element.modified_width {
    display: none !important;
}

You have to remove it or replace it with this css code to align the fields.

.avia-mailchimp-form fieldset p {
    display: block;
    float: left;
    clear: none !important;
}

Best regards,
Ismael

Hi,

Thanks for the update.

Sorry for the confusion. The first css code above was added somewhere in the Quick CSS field or the style.css file. You have to remove it because it’s hiding the signup fields. After removing the first css code, add the second one to align the mailchimp fields.

Best regards,
Ismael

Hi,

Thanks for the update.

1.) You have to modify the \config-templatebuilder\avia-template-builder\php\html-helper.class.php file directly. Look for this code around line 1743 inside the “mailchimp_list” function.

'label' 	=> __( "Subscribe" , "avia_framework" ),

2.) The subscribe form input fields don’t contain placeholder attributes by default, but you can use a script to manually add the attribute. Try this script in the functions.php file:

add_action('wp_footer', 'ava_add_mailchimp_input_placeholder');
function ava_add_mailchimp_input_placeholder(){
	?>
	<script type="text/javascript">
            $(function() {
                var email = $('.avia-mailchimp-form #avia_0_1');
                var label = email.prev().text();
                email.attr('placeholder', label);
            })(jQuery);
	</script>
	<?php
}

Best regards,
Ismael

Hi,

Thanks for the update.

You can add that code in the functions.php file. The actual script will be added in the frontend before the closing body tag.

Best regards,
Ismael

Hi,

Thanks for the update.

Find this line:

email.attr('placeholder', label);

Change label to a string or a custom text.

Example:

email.attr('placeholder', 'My text');

Best regards,
Ismael

Hi,

Thanks for the update.

You can add this css code to push the fieldset to the right of the container.

.chimpy.avia-mailchimp-form fieldset {
    position: relative;
    left: 145px;
}

Adjust the value as needed. You may need to add a few css media queries to adjust the left position on smaller screens.

Best regards,
Ismael

Hi,

Thanks for the update.

Did you try the css code above?

thanks. So, there is no way to float or flex them to the right?

There is, but it will alter the space between the input fields. Try this css code.

.chimpy fieldset {
    text-align: right;
}

.chimpy fieldset p {
    display: inline-block;
    float: none;
}

Best regards,
Ismael