Home Forums Arnold WordPress Theme Problems with Contact Form 7, scrolling, Accordion/Toggle module & tables

This topic contains 13 replies, has 2 voices, and was last updated by  BWSM 10 months, 3 weeks ago.

Viewing 14 posts - 1 through 14 (of 14 total)
  • Author
    Posts
  • #13797

    burmanni
    Participant

    Hi,

    at first a huge thank you for your gorgeous work. I really appreciate the awesome minimalistic design of Arnold.

    I have four problems with my site:

    1.
    As your contact form has not so many options to customize it, I installed the plugin Contact Form 7, build a contact form with it and additionally modified it with a code, which I found on the web, in the Custom CSS segment. When I post the shortcode from Contact Form 7 in the Classic Editor on the page I want to use it, everything is fine and the contact form looks exactly as I want it (first picture). My problem: I want this page to have two columns. So I used your Page Builder to place a Text Block on the left side and a contact form on the right side. But when I select Contact Form 7 in your contact form widget the space between the fields looks very weird (second picture; if I paste the plugin shortcode in a Text Block instead it looks exactly the same).

    First picture:
    https://1drv.ms/i/s!An8xRCvMtFiHiDSBWAToxK2Qcmd0

    Second picture:
    https://1drv.ms/i/s!An8xRCvMtFiHiDVukWMLsskMSmam

    How can I make the contact form on the second picture look exactly like the one in the first picture?

    2.
    On two of my pages on which I used a featured image, whose are shown right from the top of the pages, when I scroll down fast the site stops under the featured image where the title is. When I want to scroll further sometimes nothing happens so that I have to scroll for a second time or especially click on some space of the site as the scrolling does not move on. Antoher problem with the scolling is when I reach the end of the page, everytime I scroll up in the moment the scrollbar reaches the upper end it immediately goes back down to the page title.

    This scolling behaviour is really strange. I only want a normal scrolling on every page, so that I can scroll down (slow or fast) without any interruptions and scroll up with stopping by the logo and menu.

    Can you please help me to fix this actual scrolling behaviour?

    3.
    By using the Accordion/Toggle module the titles of the items are not exacty in the middle of the fields. Maybe I am a little bit small-minded but for me this does not look good (if the title has two lines, they are exacty in the middle, why not when it has just one line?). Also if a title is longer than one line the make-up of the text begins not from the same starting point as the line above.

    Picture:
    https://1drv.ms/i/s!An8xRCvMtFiHiDa4o0vh_Kd9l2CV

    Is their a way to fix both?

    4.
    On two pages I have a table. I want this two tables to have the same distances as the text and to have no or invisible lines.

    How can I do this?

    #13802

    BWSM
    Keymaster

    Hi, thank you for purchasing our theme.

    1. Do you use other plugins, try to stop them to check again.
    If not, please leave the page url with contact form in 2cols.

    2. It needs to change the /js/custom.theme.js, line1995, remove:
    themeData.CoverScroll();

    3. Please try to paste the custom css code to “Appearance > Customize : Additional CSS”:

    .accordion-heading .accordion-toggle { 
        display: block;
    }

    4. I don’t understand this question. The text in all tables should be same included distances, because they use one style.

    If you want to hide the table line, paste the custom css code to “Appearance > Customize : Additional CSS”

    .entry th, .entry td, .text_block th, .text_block td, .icon_text th, .icon_text td, .tab-pane th, .tab-pane td, .accordion-group th, .accordion-group td {
        border-width: 0;
    }
    .entry table, .entry th, .entry td, .text_block table, .text_block th, .text_block td, .icon_text table, .icon_text th, .icon_text td, .tab-pane table, .tab-pane th, .tab-pane td, .accordion-group table, .accordion-group th, .accordion-group td {
        border: 0;
    }

    Regards!
    Bwsm – uiueux.comTwitterFacebook

    #13807

    burmanni
    Participant
    This reply has been marked as private.
    #13810

    BWSM
    Keymaster

    Welcome!

    1. use the Additional CSS to remove the bottom spacing of input box:

    .moudle input[type="text"], .moudle textarea {
        margin-bottom: 0;
    }

    2. Yes, it needs table to create. please send your wp-admin(url/user/pass) via <br>my profile contact form (you need login on ThemeForest), I’ll create a sample on your site

    #13812

    burmanni
    Participant

    Hi!

    1. This does not really work. The distances between the fields are now equally but they are still quite big. Is there no way to make this contact form look exactly like the one on the first picture I posted here in my first message? It would be nice if you could check this too when you have access to my wp-admin.

    2. That is great! I have send you my wp-admin a few minutes ago. The two pages where I want to use the tables are called “Angebot” and “Kontakt”.

    Thanks again for your support!

    #13814

    BWSM
    Keymaster

    HI,

    1. Removed the spacing.

    2. Please check: https://www.ingmarburmann.de/demo/

    Regards!

    #13821

    burmanni
    Participant

    Hi!

    Thank you so much, the two parts where I am using the tables are looking perfect now.

    I am very sorry for being so picky but the contact form still has some small problematic details for me. The distance between the text and the line below is in all fields 14px which is perfect. But the distance between the text and the line above is in the fields with „E-Mail-Adresse (erforderlich)“ and „Betreff“ 19px and in the field with „Ihre Nachricht“ only 10px. I want to have all distances to the lines above and below to have 14px so that the texts are exactly in the middle of the fields and everyting looks consistent.

    As I do not want you to have further work with that, I used the Firefox Inspector on the page with the contact form and changed the part of the code till the contact form looked exacalty like I want it.

    This is the code with the contact form exactly as I want it:

    <div class="col-md-6 col-sm-6 moudle  bottom-space-40" style="">
    <div role="form" class="wpcf7" id="wpcf7-f1346-p21-o1" dir="ltr" lang="de-DE">
    <div class="screen-reader-response"></div>
    <form action="/kontakt/#wpcf7-f1346-p21-o1" method="post" class="wpcf7-form" enctype="multipart/form-data" novalidate="novalidate">
    <div style="display: none;">
    <input name="_wpcf7" value="1346" type="hidden">
    <input name="_wpcf7_version" value="4.9.1" type="hidden">
    <input name="_wpcf7_locale" value="de_DE" type="hidden">
    <input name="_wpcf7_unit_tag" value="wpcf7-f1346-p21-o1" type="hidden">
    <input name="_wpcf7_container_post" value="21" type="hidden">
    </div>
    <p><span class="wpcf7-form-control-wrap your-name" style="margin-top: 0px;"><input name="your-name" value="" size="40" class="wpcf7-form-control wpcf7-text wpcf7-validates-as-required" aria-required="true" aria-invalid="false" placeholder="Name (erforderlich)" type="text"></span><br>
    <span class="wpcf7-form-control-wrap your-email" style="margin-top: 0px;"><input name="your-email" value="" size="40" class="wpcf7-form-control wpcf7-text wpcf7-email wpcf7-validates-as-required wpcf7-validates-as-email" aria-required="true" aria-invalid="false" placeholder="E-Mail-Adresse (erforderlich)" type="email"></span><br>
    <span class="wpcf7-form-control-wrap your-subject" style="margin-top: 0px;"><input name="your-subject" value="" size="40" class="wpcf7-form-control wpcf7-text" aria-invalid="false" placeholder="Betreff" type="text"></span><br>
    <span class="wpcf7-form-control-wrap your-message" style="margin-top: 9px;"><textarea name="your-message" cols="40" rows="10" class="wpcf7-form-control wpcf7-textarea" aria-invalid="false" placeholder="Ihre Nachricht"></textarea></span><br>
    <span class="wpcf7-form-control-wrap your-multifile" style="margin-top: 20px;"><input name="your-multifile[]" size="40" class="wpcf7-form-control wpcf7-multifile" multiple="multiple" aria-invalid="false" type="file"></span><br>
    <input value="Senden" class="wpcf7-form-control wpcf7-submit" style="margin-top: 20px;" type="submit"><span class="ajax-loader"></span></p>
    <div class="wpcf7-response-output wpcf7-display-none"></div>
    </form>
    </div>
    </div>
    

    Sadly I have absolutely no idea where the original code of this page is and if I could simply replace the old code with this new one without causing any problems in the functionality of the contact form.

    Can you tell me 1. where the file with the original code is and 2. if replacing the code could cause any problems with the functionality of contact form?

    Thank you and best regards!

    #13830

    BWSM
    Keymaster

    Hi,

    The HTML code is create by “contact form 7” plugin, you can google it to find how to change the generated HTML code. I have no idea for the plugin. If you don’t find the way. I’ll try to use the css to change the distance. Please let me know.

    Regards!

    #13832

    burmanni
    Participant

    Hi!

    Thank you for this tip. After I googled I have tried to change the style of the contact form within the plugin but this has not worked very well. Furthermore I have tried to change the Custom CSS but this didn’t work at all (maybe there were some conflicts with your code or changings before, I don’t know…).

    I think the decisive part is to adjust the margin-top of every field so that the following fields of the contact form have the following margin-tops.

    Name (erforderlich) – margin-top: 0px
    E-Mail-Adresse (erforderlich) – margin-top: 0px
    Betreff – margin-top: 0px
    Ihre Nachricht – margin-top: 9px
    Durchsuchen – margin-top: 20px
    Senden – margin-top: 20px

    If you could change the distances in that way (or in any other so that the contact form looks as I want it to) by using the css that would be really helpful.

    Best regards!

    #13833

    BWSM
    Keymaster

    Hi,

    Could you paste a screenshot to explain what you want, I am not very sure where the margin-top you talked. Thanks!

    Regards!

    #13836

    burmanni
    Participant

    Hi!

    Sure, I made some screenshots. Please check this gallery:
    https://1drv.ms/f/s!An8xRCvMtFiHiDj2hw9JhRR3q7eQ

    In the first picture is the contact form how it looks at the moment. In the second picture is the contact form how I want it to look. The six pictures after that are explanations of what I mean with the margin-top.

    When I experimented with the Firefox Inspector I discovered that I have simply to add style=”margin-top: 0px;” in the <span> tags of the six fields/parts of the contact form. When I changed the px-numbers in every of the six fields to the numbers I wrote above (and again on the pictures) the contact form looked exactly as I want it.

    Because of that I assume when you change this six margin-tops via the css the contact form will look perfect.

    Best regards!

    #13840

    BWSM
    Keymaster

    Thanks for the screenshots, it is more clear. I have added the margin-top, please check:

    span.wpcf7-form-control-wrap { margin-top: 0;}
    span.wpcf7-form-control-wrap.your-message {margin-top: 9px;}
    span.wpcf7-form-control-wrap.your-multifile {margin-top: 20px;}
    input[type="submit"].wpcf7-form-control {margin-top: 20px;}
    #13847

    burmanni
    Participant

    You are awesome! Now everything is perfect.

    Thank you so much for your patience with my issues. This is a really incredible support!

    Best regards!

    #13851

    BWSM
    Keymaster

    Welcome. Should you need further assistance, please contact use again and we’ll be happy to help.

    If you like the theme, please rate it on Themeforest. I would greatly appreciate :).

    Regards!

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

You must be logged in to reply to this topic.