Styling and HTML Replacement

  • Resolved Rhand

    (@rhand)


    5 years, 4 months ago

    Do you have any guidelines for styling the subscription form with CSS? Is there a way to change the title html and not use H3 but other html tags or do I need to replace the widget code with the recommended:

    /**
 * Replace default Mailjet widget form file with your own
 * @param string $templatePath - the path of the default Mailjet widget form file
 * @return string
 */

add_filter( 'mailjet_widget_form_filename', 'useMailjetCustomWidgetFormTemplate' );
function useMailjetCustomWidgetFormTemplate($templatePath) {
    return './custom_mailjet_widget_template.php';
}
Viewing 9 replies - 1 through 9 (of 9 total)
  • Thread Starter Rhand

    (@rhand)

    We are using before_title and after_title for the header and that helps. On general stying I would still appreciate your feedback.

    Plugin Author Mailjet

    (@mailjet)

    Hello Rhand,

    The whole widget is in a div with class mailjet_widget_front_container, so you can style separately any of its elements. For example to change the color of its title you can use something like that:

    .mailjet_widget_front_container h2 
{
	color: red;
}
    Thread Starter Rhand

    (@rhand)

    We want to use a Fontawesome icon as the submit button. So we normally use code like this

    
<button type="submit" class="btn btn-default">
    <i class="fa fa-circle"></i> Text
</button>

    Any ideas how we can best achieve this with the widget?

    Plugin Author Mailjet

    (@mailjet)

    Frankly I’m not familiar with these icons. But if it can’t be done by pure css then probably the best thing would be to replace the widget HTML altogether.

    Thread Starter Rhand

    (@rhand)

    Yeah, I worked that out with a custom widget for the form display. Allowed me to adjust some html and move a few tags around. Works.

    Only now I see

    “Subscription confirmation email sent. Please check your inbox and confirm the subscription.
    “

    below the email field once email was sent.

    And I wonder how I can style this best. But also how to load this on a separate page. How can that be done?

    Thread Starter Rhand

    (@rhand)

    Styling I have taken care of with CSS and the custom widget. Only the confirmation message loaded with

    
<?php
  if (!empty($form_message[$widget_id])){
     echo '<span class="mailjet_widget_form_message">'. $form_message[$widget_id] .'</span>';
   }
?>

    I want to show on a separate page, not below the subscription field. How can that be managed?

    • This reply was modified 5 years, 4 months ago by Rhand.
    Thread Starter Rhand

    (@rhand)

    Does seem that there is no filter to redirect on sending email address to a page where we want to display “Subscription confirmation email sent. Please check your inbox and confirm “. I guess we could perhaps so something with jQuery and on submission. But I must say I am surprised there is no option to show confirmation on a separate page instead of below the form.

    Plugin Author Mailjet

    (@mailjet)

    Hi, sorry for the delay. Indeed the message is shown on the original page where the user subscribed and there is no native way to redirect the user to another page after subscribing.

    I’ll take a note about this feature request and possibly it can be added in a next plugin release.

    Thread Starter Rhand

    (@rhand)

    Thanks for the feedback. Added a redirect with 

    
if (!empty($form_message[$widget_id])) {
   // echo '<span class="mailjet_widget_form_message">'. $form_message[$widget_id] .'</span>';
   $page = get_page_by_title('confirmation');
   wp_redirect(get_permalink($page->ID));
   exit;
}

    Will keep an eye for updates.

Viewing 9 replies - 1 through 9 (of 9 total)
  • The topic ‘Styling and HTML Replacement’ is closed to new replies.