{"id":1697,"date":"2019-09-03T18:20:20","date_gmt":"2019-09-03T18:20:20","guid":{"rendered":"https:\/\/mooi.hu\/?p=1697"},"modified":"2021-01-23T08:32:05","modified_gmt":"2021-01-23T08:32:05","slug":"contact-form-7-inline-fields","status":"publish","type":"post","link":"https:\/\/mooi.hu\/en\/contact-form-7-inline-fields\/","title":{"rendered":"Contact Form 7 Inline Fields"},"content":{"rendered":"
\n

Display Contact Form 7 Fields on 2 or More Columns<\/h1>\n<\/header>\n
\n

I get this question a lot. \u201cHow can I display my contact form on 2 or 3 columns?\u201d or \u201cWhat are my options to have a contact form with fields side by side?\u201d You get it! The main idea is how to get those text fields like Name or Email Address displayed\u00a0on the same line<\/strong>\u00a0and not one under another. Why? Because it looks good, therefore it increases the user experience. Let`s see what options you have!<\/p>\n

<\/div>\n

I will take the\u00a0Contact Form 7 plugin<\/a>\u00a0as an example for this tutorial. I\u2019ve been working with Contact Form 7 since ever, and it\u2019s my first choice when it comes to using a free contact form plugin for a WordPress website.<\/p>\n

Learn More:\u00a0How to Save Contact Form 7 Submissions to Database<\/a><\/div>\n

By default, the markup of a contact form created with CF7 looks like this<\/p>\n

and the output on the website would be:<\/p>\n

Contact Form 7 default form on TwentySeventeen Wp Theme<\/figcaption><\/figure>\n

This is the default and you don\u2019t want it. You want custom, tailored to your website\u2019s look and feel. Good news is that\u00a0the CF7 form builder allows HTML markup<\/strong>\u00a0and we\u2019ll use this to our advantage.<\/p>\n

Next, I`m going to show you 2 ways to display those fields on multiple columns.<\/p>\n

 <\/p>\n

Display Contact Form 7 Fields side by side with Column Shortcodes<\/h2>\n

By default, CF7 allows only HTML markup inside its editor. To use shortcodes, we need to tell WordPress that we want to enable shortcodes for CF7. There`s a plugin for doing it, called\u00a0Contact Form 7 Shortcode Enabler<\/a>. To use the plugin, go to Plugins->Add New, search for Contact Form 7 Shortcode Installer, install and activate the plugin.<\/p>\n

Alternatively, you could do this by adding a filter via the functions.php of your WordPress child theme:<\/p>\n

\n
\n\n\n\n
\n
1<\/div>\n
2<\/div>\n
3<\/div>\n
4<\/div>\n
5<\/div>\n
6<\/div>\n<\/td>\n
\n
\n
add_filter( <\/code>'wpcf7_form_elements'<\/code>, <\/code>'delicious_wpcf7_form_elements'<\/code> );<\/code><\/div>\n
<\/div>\n
function<\/code> delicious_wpcf7_form_elements( <\/code>$form<\/code> ) {<\/code><\/div>\n
$form<\/code> = do_shortcode( <\/code>$form<\/code> );<\/code><\/div>\n
return<\/code> $form<\/code>;<\/code><\/div>\n
}<\/code><\/div>\n<\/div>\n<\/td>\n<\/tr>\n<\/tbody>\n<\/table>\n<\/div>\n<\/div>\n

Column Shortcodes<\/a>\u00a0is a plugin which adds shortcodes to your WordPress website functionality for displaying content on multiple columns.\u00a0You can use it<\/strong>\u00a0not only for splitting contact form fields on single columns but\u00a0for any other content on your website<\/strong>. That`s two rabbits hit with one shot!<\/p>\n

There are big chances that\u00a0your theme comes with shortcodes for columns built into it already<\/strong>.\u00a0My themes<\/a>\u00a0do. So before installing the plugin, make sure you\u2019re checking out or asking the developer of your theme if such shortcodes are available for use with the theme.<\/div>\n

To use the plugin, go to Plugins->Add New, search for Column Shortcodes, install and activate the plugin.<\/p>\n

 <\/p>\n

Once installed, you\u2019ll find a new button on your WordPress editor from which you can generate a column shortcode. Let\u2019s put the plugin to the test. I went to my contact page, generated shortcodes for a two-columns line and placed some content inside the shortcodes:<\/p>\n

 <\/p>\n

Notice that to create a 2-columns line, you need to generate a shortcode for the first half and another shortcode for the last half. The output should be similar to this:<\/p>\n

 <\/p>\n

This is how you\u00a0split the content<\/strong>\u00a0of a page on two columns. Now that you got those shortcodes, let`s go back to the Contact Form 7 editor(Wp Dashboard>Contact->Contact Forms: Your contact form<\/em>) and use them with the fields.<\/p>\n

The markup of my contact form becomes:<\/p>\n

\n
\n\n\n\n
\n
1<\/div>\n
2<\/div>\n
3<\/div>\n
4<\/div>\n
5<\/div>\n
6<\/div>\n
7<\/div>\n
8<\/div>\n
9<\/div>\n
10<\/div>\n<\/td>\n
\n
\n
<div class=<\/code>\"content-column one_half\"<\/code>><div style=<\/code>\"padding:\"0;\"<\/code>><label> Your Name (required)<\/code><\/div>\n
\u00a0\u00a0\u00a0\u00a0<\/code>[text* your-name] <\/label><\/div><\/div><\/code><\/div>\n
<\/div>\n
<div class=<\/code>\"content-column one_half last_column\"<\/code>><label> Your Email (required)<\/code><\/div>\n
\u00a0\u00a0\u00a0\u00a0<\/code>[email* your-email] <\/label><\/div><div class=<\/code>\"clear_column\"<\/code>><\/div><\/code><\/div>\n
<\/div>\n
<label> Your Message<\/code><\/div>\n
\u00a0\u00a0\u00a0\u00a0<\/code>[textarea your-message] <\/label><\/code><\/div>\n
<\/div>\n
[submit <\/code>\"Send\"<\/code>]<\/code><\/div>\n<\/div>\n<\/td>\n<\/tr>\n<\/tbody>\n<\/table>\n<\/div>\n<\/div>\n

And the output becomes:<\/p>\n

Pretty neat! For having the fields displayed on 3 columns, you will adjust the Contact Form 7 markup to:<\/p>\n

\n
\n\n\n\n
\n
1<\/div>\n
2<\/div>\n
3<\/div>\n
4<\/div>\n
5<\/div>\n
6<\/div>\n
7<\/div>\n
8<\/div>\n
9<\/div>\n
10<\/div>\n
11<\/div>\n
12<\/div>\n
13<\/div>\n<\/td>\n
\n
\n
<<\/code>div<\/code> class<\/code>=<\/code>\"content-column one_third\"<\/code>><<\/code>div<\/code> style<\/code>=<\/code>\"padding:\"0;\"<\/code>><<\/code>label<\/code>> Your Name (required)<\/code><\/div>\n
\u00a0\u00a0\u00a0\u00a0<\/code>[text* your-name] <\/<\/code>label<\/code>><\/<\/code>div<\/code>><\/<\/code>div<\/code>><\/code><\/div>\n
<\/div>\n
<<\/code>div<\/code> class<\/code>=<\/code>\"content-column one_third\"<\/code>><<\/code>div<\/code> style<\/code>=<\/code>\"padding:\"0;\"<\/code>><<\/code>label<\/code>> Your Email (required)<\/code><\/div>\n
\u00a0\u00a0\u00a0\u00a0<\/code>[email* your-email] <\/<\/code>label<\/code>><\/<\/code>div<\/code>><\/<\/code>div<\/code>><\/code><\/div>\n
<\/div>\n
<<\/code>div<\/code> class<\/code>=<\/code>\"content-column one_third last_column\"<\/code>><<\/code>label<\/code>> Your Subject<\/code><\/div>\n
\u00a0\u00a0\u00a0\u00a0\u00a0<\/code><\/<\/code>label<\/code>><\/<\/code>div<\/code>><<\/code>div<\/code> class<\/code>=<\/code>\"clear_column\"<\/code>><\/<\/code>div<\/code>><\/code><\/div>\n
<\/div>\n
<<\/code>label<\/code>> Your Message<\/code><\/div>\n
\u00a0\u00a0\u00a0\u00a0<\/code>[textarea your-message] <\/<\/code>label<\/code>><\/code><\/div>\n
<\/div>\n
[submit \"Send\"]<\/code><\/div>\n<\/div>\n<\/td>\n<\/tr>\n<\/tbody>\n<\/table>\n<\/div>\n<\/div>\n

\u2026and the output will become:<\/p>\n

So the takeaway for this method is:<\/p>\n

    \n
  1. Install Column Shortcodes plugin to enable shortcodes for splitting content on multiple columns<\/li>\n
  2. Install Contact Form 7 Shortcode Enabler plugin to allow the use of shortcodes in the CF7 editor<\/li>\n
  3. Wrap Contact Form 7 fields with shortcodes like so\u00a0<\/code>\n
    \n
    …cf7 field …<\/div>\n<\/div>\n

    and<\/code><\/p>\n

    …cf7 field …<\/div>\n

    <\/code><\/p>\n

    <\/div>\n

    .<\/li>\n<\/ol>\n

    Did you know you can create your own shortcodes? Check out my\u00a0tutorial for shortcodes<\/a>.<\/div>\n

    Display Contact Form 7 fields on columns with HTML markup<\/h2>\n

    Above, I show you how to use plugins to extend WordPress default functionality. The next method is about using default\/basic HTML markup(like divs) and a bit of CSS to split content into columns. Let`s do this.<\/p>\n

    I`m going to create a series of classes for the columns:\u00a0one-half, one-third, last<\/code>. The CSS code for them is:<\/p>\n

    \n
    \n\n\n\n
    \n
    1<\/div>\n
    2<\/div>\n
    3<\/div>\n
    4<\/div>\n
    5<\/div>\n
    6<\/div>\n
    7<\/div>\n
    8<\/div>\n
    9<\/div>\n
    10<\/div>\n
    11<\/div>\n
    12<\/div>\n
    13<\/div>\n
    14<\/div>\n
    15<\/div>\n
    16<\/div>\n
    17<\/div>\n
    18<\/div>\n
    19<\/div>\n
    20<\/div>\n
    21<\/div>\n
    22<\/div>\n
    23<\/div>\n<\/td>\n
    		\n
    \n
    .one-half,<\/code><\/div>\n
    .one-third {<\/code><\/div>\n
    \u00a0\u00a0\u00a0\u00a0<\/code>position<\/code>: <\/code>relative<\/code>;<\/code><\/div>\n
    \u00a0\u00a0\u00a0\u00a0<\/code>margin-right<\/code>: <\/code>4%<\/code>;<\/code><\/div>\n
    \u00a0\u00a0\u00a0\u00a0<\/code>float<\/code>: <\/code>left<\/code>;<\/code><\/div>\n
    \u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0<\/code>margin-bottom<\/code>: <\/code>20px<\/code>;<\/code><\/div>\n
    <\/div>\n
    }<\/code><\/div>\n
    <\/div>\n
    .one-half { <\/code>width<\/code>: <\/code>48%<\/code>; }<\/code><\/div>\n
    .one-third { <\/code>width<\/code>: <\/code>30.66%<\/code>; }<\/code><\/div>\n
    <\/div>\n
    .last {<\/code><\/div>\n
    \u00a0\u00a0\u00a0\u00a0<\/code>margin-right<\/code>: <\/code>0<\/code> !important<\/code>;<\/code><\/div>\n
    \u00a0\u00a0\u00a0\u00a0<\/code>clear<\/code>: <\/code>right<\/code>;<\/code><\/div>\n
    }<\/code><\/div>\n
    <\/div>\n
    @media only <\/code>screen<\/code> and (<\/code>max-width<\/code>: <\/code>767px<\/code>) {<\/code><\/div>\n
    \u00a0\u00a0\u00a0\u00a0<\/code>.one-half, .one-third {<\/code><\/div>\n
    \u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0<\/code>width<\/code>: <\/code>100%<\/code>;<\/code><\/div>\n
    \u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0<\/code>margin-right<\/code>: <\/code>0<\/code>;<\/code><\/div>\n
    \u00a0\u00a0\u00a0\u00a0<\/code>}<\/code><\/div>\n
    }<\/code><\/div>\n<\/div>\n<\/td>\n<\/tr>\n<\/tbody>\n<\/table>\n<\/div>\n<\/div>\n

    You should insert this code in your child theme(learn more about child themes\u00a0here<\/a>) or you could use a plugin for code injection like the\u00a0Simple Custom CSS plugin<\/a>.<\/p>\n

    The\u00a0.last<\/code>\u00a0class removes the margin-right value from the columns for perfect alignment to the container. Also, a media query specifies that if the screen is smaller than 768px(the width of a tablet screen), display columns one under another. In other words, the code creates responsive columns for Contact Form 7.<\/p>\n

    Edit the CF7 form and wrap it with divs like\u00a0<div class=\"one-half\"> ... <\/div><\/code>.<\/p>\n

    \n
    \n\n\n\n
    \n
    1<\/div>\n
    2<\/div>\n
    3<\/div>\n
    4<\/div>\n
    5<\/div>\n
    6<\/div>\n
    7<\/div>\n
    8<\/div>\n
    9<\/div>\n
    10<\/div>\n
    11<\/div>\n
    12<\/div>\n
    13<\/div>\n
    14<\/div>\n<\/td>\n
    		\n
    \n
    <<\/code>div<\/code> class<\/code>=<\/code>\"one-half\"<\/code>><\/code><\/div>\n
    <<\/code>label<\/code>> Your Name (required) <\/code><\/div>\n
    \u00a0\u00a0\u00a0\u00a0\u00a0<\/code><\/<\/code>label<\/code>><\/code><\/div>\n
    <\/<\/code>div<\/code>><\/code><\/div>\n
    <\/div>\n
    <<\/code>div<\/code> class<\/code>=<\/code>\"one-half last\"<\/code>><\/code><\/div>\n
    <<\/code>label<\/code>> Your Email (required)<\/code><\/div>\n
    \u00a0\u00a0\u00a0\u00a0<\/code>[email* your-email] <\/<\/code>label<\/code>><\/code><\/div>\n
    <\/<\/code>div<\/code>><\/code><\/div>\n
    <\/div>\n
    <<\/code>label<\/code>> Your Message<\/code><\/div>\n
    \u00a0\u00a0\u00a0\u00a0<\/code>[textarea your-message] <\/<\/code>label<\/code>><\/code><\/div>\n
    <\/div>\n
    [submit \"Send\"]<\/code><\/div>\n<\/div>\n<\/td>\n<\/tr>\n<\/tbody>\n<\/table>\n<\/div>\n<\/div>\n

     <\/p>\n

    Awesome!<\/p>\n<\/div>\n","protected":false},"excerpt":{"rendered":"

    Display Contact Form 7 Fields on 2 or More Columns I get this question a lot. \u201cHow can I display my contact form on 2 or 3 columns?\u201d or \u201cWhat are my options to have a contact form with fields side by side?\u201d You get it! The main idea is how to get those text…<\/p>\n","protected":false},"author":1,"featured_media":1635,"comment_status":"closed","ping_status":"closed","sticky":false,"template":"","format":"standard","meta":{"inline_featured_image":false,"_monsterinsights_skip_tracking":false,"footnotes":""},"categories":[3],"tags":[],"class_list":["post-1697","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-ideas"],"yoast_head":"\nContact Form 7 Inline Fields - MOOI<\/title>\n<meta name=\"robots\" content=\"index, follow, max-snippet:-1, max-image-preview:large, max-video-preview:-1\" \/>\n<link rel=\"canonical\" href=\"https:\/\/mooi.hu\/en\/contact-form-7-inline-fields\/\" \/>\n<meta property=\"og:locale\" content=\"en_US\" \/>\n<meta property=\"og:type\" content=\"article\" \/>\n<meta property=\"og:title\" content=\"Contact Form 7 Inline Fields - MOOI\" \/>\n<meta property=\"og:description\" content=\"Display Contact Form 7 Fields on 2 or More Columns I get this question a lot. \u201cHow can I display my contact form on 2 or 3 columns?\u201d or \u201cWhat are my options to have a contact form with fields side by side?\u201d You get it! The main idea is how to get those text…\" \/>\n<meta property=\"og:url\" content=\"https:\/\/mooi.hu\/en\/contact-form-7-inline-fields\/\" \/>\n<meta property=\"og:site_name\" content=\"MOOI\" \/>\n<meta property=\"article:published_time\" content=\"2019-09-03T18:20:20+00:00\" \/>\n<meta property=\"article:modified_time\" content=\"2021-01-23T08:32:05+00:00\" \/>\n<meta property=\"og:image\" content=\"https:\/\/mooi.hu\/wp-content\/uploads\/2018\/01\/mooi-webdesign_af4338bfd510781a21667cec5a684a77.jpg\" \/>\n\t<meta property=\"og:image:width\" content=\"640\" \/>\n\t<meta property=\"og:image:height\" content=\"480\" \/>\n\t<meta property=\"og:image:type\" content=\"image\/jpeg\" \/>\n<meta name=\"author\" content=\"mooi\" \/>\n<meta name=\"twitter:card\" content=\"summary_large_image\" \/>\n<meta name=\"twitter:label1\" content=\"Written by\" \/>\n\t<meta name=\"twitter:data1\" content=\"mooi\" \/>\n\t<meta name=\"twitter:label2\" content=\"Est. reading time\" \/>\n\t<meta name=\"twitter:data2\" content=\"5 minutes\" \/>\n<script type=\"application\/ld+json\" class=\"yoast-schema-graph\">{\"@context\":\"https:\/\/schema.org\",\"@graph\":[{\"@type\":\"Article\",\"@id\":\"https:\/\/mooi.hu\/en\/contact-form-7-inline-fields\/#article\",\"isPartOf\":{\"@id\":\"https:\/\/mooi.hu\/en\/contact-form-7-inline-fields\/\"},\"author\":{\"name\":\"mooi\",\"@id\":\"https:\/\/mooi.hu\/en\/#\/schema\/person\/6b3a9e82722971ccbbaa052409b0215f\"},\"headline\":\"Contact Form 7 Inline Fields\",\"datePublished\":\"2019-09-03T18:20:20+00:00\",\"dateModified\":\"2021-01-23T08:32:05+00:00\",\"mainEntityOfPage\":{\"@id\":\"https:\/\/mooi.hu\/en\/contact-form-7-inline-fields\/\"},\"wordCount\":809,\"image\":{\"@id\":\"https:\/\/mooi.hu\/en\/contact-form-7-inline-fields\/#primaryimage\"},\"thumbnailUrl\":\"https:\/\/mooi.hu\/wp-content\/uploads\/2018\/01\/mooi-webdesign_af4338bfd510781a21667cec5a684a77.jpg\",\"articleSection\":[\"Ideas\"],\"inLanguage\":\"en-US\"},{\"@type\":\"WebPage\",\"@id\":\"https:\/\/mooi.hu\/en\/contact-form-7-inline-fields\/\",\"url\":\"https:\/\/mooi.hu\/en\/contact-form-7-inline-fields\/\",\"name\":\"Contact Form 7 Inline Fields - MOOI\",\"isPartOf\":{\"@id\":\"https:\/\/mooi.hu\/en\/#website\"},\"primaryImageOfPage\":{\"@id\":\"https:\/\/mooi.hu\/en\/contact-form-7-inline-fields\/#primaryimage\"},\"image\":{\"@id\":\"https:\/\/mooi.hu\/en\/contact-form-7-inline-fields\/#primaryimage\"},\"thumbnailUrl\":\"https:\/\/mooi.hu\/wp-content\/uploads\/2018\/01\/mooi-webdesign_af4338bfd510781a21667cec5a684a77.jpg\",\"datePublished\":\"2019-09-03T18:20:20+00:00\",\"dateModified\":\"2021-01-23T08:32:05+00:00\",\"author\":{\"@id\":\"https:\/\/mooi.hu\/en\/#\/schema\/person\/6b3a9e82722971ccbbaa052409b0215f\"},\"breadcrumb\":{\"@id\":\"https:\/\/mooi.hu\/en\/contact-form-7-inline-fields\/#breadcrumb\"},\"inLanguage\":\"en-US\",\"potentialAction\":[{\"@type\":\"ReadAction\",\"target\":[\"https:\/\/mooi.hu\/en\/contact-form-7-inline-fields\/\"]}]},{\"@type\":\"ImageObject\",\"inLanguage\":\"en-US\",\"@id\":\"https:\/\/mooi.hu\/en\/contact-form-7-inline-fields\/#primaryimage\",\"url\":\"https:\/\/mooi.hu\/wp-content\/uploads\/2018\/01\/mooi-webdesign_af4338bfd510781a21667cec5a684a77.jpg\",\"contentUrl\":\"https:\/\/mooi.hu\/wp-content\/uploads\/2018\/01\/mooi-webdesign_af4338bfd510781a21667cec5a684a77.jpg\",\"width\":640,\"height\":480},{\"@type\":\"BreadcrumbList\",\"@id\":\"https:\/\/mooi.hu\/en\/contact-form-7-inline-fields\/#breadcrumb\",\"itemListElement\":[{\"@type\":\"ListItem\",\"position\":1,\"name\":\"Home\",\"item\":\"https:\/\/mooi.hu\/en\/\"},{\"@type\":\"ListItem\",\"position\":2,\"name\":\"Contact Form 7 Inline Fields\"}]},{\"@type\":\"WebSite\",\"@id\":\"https:\/\/mooi.hu\/en\/#website\",\"url\":\"https:\/\/mooi.hu\/en\/\",\"name\":\"MOOI\",\"description\":\"webdesign & development : WordPress - HTML \/ CSS\",\"potentialAction\":[{\"@type\":\"SearchAction\",\"target\":{\"@type\":\"EntryPoint\",\"urlTemplate\":\"https:\/\/mooi.hu\/en\/?s={search_term_string}\"},\"query-input\":{\"@type\":\"PropertyValueSpecification\",\"valueRequired\":true,\"valueName\":\"search_term_string\"}}],\"inLanguage\":\"en-US\"},{\"@type\":\"Person\",\"@id\":\"https:\/\/mooi.hu\/en\/#\/schema\/person\/6b3a9e82722971ccbbaa052409b0215f\",\"name\":\"mooi\",\"image\":{\"@type\":\"ImageObject\",\"inLanguage\":\"en-US\",\"@id\":\"https:\/\/mooi.hu\/en\/#\/schema\/person\/image\/\",\"url\":\"https:\/\/secure.gravatar.com\/avatar\/7359072901f7dc3e83492b6815e750a1?s=96&d=mm&r=g\",\"contentUrl\":\"https:\/\/secure.gravatar.com\/avatar\/7359072901f7dc3e83492b6815e750a1?s=96&d=mm&r=g\",\"caption\":\"mooi\"},\"url\":\"https:\/\/mooi.hu\/en\/author\/mooi\/\"}]}<\/script>\n<!-- \/ Yoast SEO plugin. -->","yoast_head_json":{"title":"Contact Form 7 Inline Fields - MOOI","robots":{"index":"index","follow":"follow","max-snippet":"max-snippet:-1","max-image-preview":"max-image-preview:large","max-video-preview":"max-video-preview:-1"},"canonical":"https:\/\/mooi.hu\/en\/contact-form-7-inline-fields\/","og_locale":"en_US","og_type":"article","og_title":"Contact Form 7 Inline Fields - MOOI","og_description":"Display Contact Form 7 Fields on 2 or More Columns I get this question a lot. \u201cHow can I display my contact form on 2 or 3 columns?\u201d or \u201cWhat are my options to have a contact form with fields side by side?\u201d You get it! The main idea is how to get those text…","og_url":"https:\/\/mooi.hu\/en\/contact-form-7-inline-fields\/","og_site_name":"MOOI","article_published_time":"2019-09-03T18:20:20+00:00","article_modified_time":"2021-01-23T08:32:05+00:00","og_image":[{"width":640,"height":480,"url":"https:\/\/mooi.hu\/wp-content\/uploads\/2018\/01\/mooi-webdesign_af4338bfd510781a21667cec5a684a77.jpg","type":"image\/jpeg"}],"author":"mooi","twitter_card":"summary_large_image","twitter_misc":{"Written by":"mooi","Est. reading time":"5 minutes"},"schema":{"@context":"https:\/\/schema.org","@graph":[{"@type":"Article","@id":"https:\/\/mooi.hu\/en\/contact-form-7-inline-fields\/#article","isPartOf":{"@id":"https:\/\/mooi.hu\/en\/contact-form-7-inline-fields\/"},"author":{"name":"mooi","@id":"https:\/\/mooi.hu\/en\/#\/schema\/person\/6b3a9e82722971ccbbaa052409b0215f"},"headline":"Contact Form 7 Inline Fields","datePublished":"2019-09-03T18:20:20+00:00","dateModified":"2021-01-23T08:32:05+00:00","mainEntityOfPage":{"@id":"https:\/\/mooi.hu\/en\/contact-form-7-inline-fields\/"},"wordCount":809,"image":{"@id":"https:\/\/mooi.hu\/en\/contact-form-7-inline-fields\/#primaryimage"},"thumbnailUrl":"https:\/\/mooi.hu\/wp-content\/uploads\/2018\/01\/mooi-webdesign_af4338bfd510781a21667cec5a684a77.jpg","articleSection":["Ideas"],"inLanguage":"en-US"},{"@type":"WebPage","@id":"https:\/\/mooi.hu\/en\/contact-form-7-inline-fields\/","url":"https:\/\/mooi.hu\/en\/contact-form-7-inline-fields\/","name":"Contact Form 7 Inline Fields - MOOI","isPartOf":{"@id":"https:\/\/mooi.hu\/en\/#website"},"primaryImageOfPage":{"@id":"https:\/\/mooi.hu\/en\/contact-form-7-inline-fields\/#primaryimage"},"image":{"@id":"https:\/\/mooi.hu\/en\/contact-form-7-inline-fields\/#primaryimage"},"thumbnailUrl":"https:\/\/mooi.hu\/wp-content\/uploads\/2018\/01\/mooi-webdesign_af4338bfd510781a21667cec5a684a77.jpg","datePublished":"2019-09-03T18:20:20+00:00","dateModified":"2021-01-23T08:32:05+00:00","author":{"@id":"https:\/\/mooi.hu\/en\/#\/schema\/person\/6b3a9e82722971ccbbaa052409b0215f"},"breadcrumb":{"@id":"https:\/\/mooi.hu\/en\/contact-form-7-inline-fields\/#breadcrumb"},"inLanguage":"en-US","potentialAction":[{"@type":"ReadAction","target":["https:\/\/mooi.hu\/en\/contact-form-7-inline-fields\/"]}]},{"@type":"ImageObject","inLanguage":"en-US","@id":"https:\/\/mooi.hu\/en\/contact-form-7-inline-fields\/#primaryimage","url":"https:\/\/mooi.hu\/wp-content\/uploads\/2018\/01\/mooi-webdesign_af4338bfd510781a21667cec5a684a77.jpg","contentUrl":"https:\/\/mooi.hu\/wp-content\/uploads\/2018\/01\/mooi-webdesign_af4338bfd510781a21667cec5a684a77.jpg","width":640,"height":480},{"@type":"BreadcrumbList","@id":"https:\/\/mooi.hu\/en\/contact-form-7-inline-fields\/#breadcrumb","itemListElement":[{"@type":"ListItem","position":1,"name":"Home","item":"https:\/\/mooi.hu\/en\/"},{"@type":"ListItem","position":2,"name":"Contact Form 7 Inline Fields"}]},{"@type":"WebSite","@id":"https:\/\/mooi.hu\/en\/#website","url":"https:\/\/mooi.hu\/en\/","name":"MOOI","description":"webdesign & development : WordPress - HTML \/ CSS","potentialAction":[{"@type":"SearchAction","target":{"@type":"EntryPoint","urlTemplate":"https:\/\/mooi.hu\/en\/?s={search_term_string}"},"query-input":{"@type":"PropertyValueSpecification","valueRequired":true,"valueName":"search_term_string"}}],"inLanguage":"en-US"},{"@type":"Person","@id":"https:\/\/mooi.hu\/en\/#\/schema\/person\/6b3a9e82722971ccbbaa052409b0215f","name":"mooi","image":{"@type":"ImageObject","inLanguage":"en-US","@id":"https:\/\/mooi.hu\/en\/#\/schema\/person\/image\/","url":"https:\/\/secure.gravatar.com\/avatar\/7359072901f7dc3e83492b6815e750a1?s=96&d=mm&r=g","contentUrl":"https:\/\/secure.gravatar.com\/avatar\/7359072901f7dc3e83492b6815e750a1?s=96&d=mm&r=g","caption":"mooi"},"url":"https:\/\/mooi.hu\/en\/author\/mooi\/"}]}},"_links":{"self":[{"href":"https:\/\/mooi.hu\/en\/wp-json\/wp\/v2\/posts\/1697","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/mooi.hu\/en\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/mooi.hu\/en\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/mooi.hu\/en\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/mooi.hu\/en\/wp-json\/wp\/v2\/comments?post=1697"}],"version-history":[{"count":6,"href":"https:\/\/mooi.hu\/en\/wp-json\/wp\/v2\/posts\/1697\/revisions"}],"predecessor-version":[{"id":2558,"href":"https:\/\/mooi.hu\/en\/wp-json\/wp\/v2\/posts\/1697\/revisions\/2558"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/mooi.hu\/en\/wp-json\/wp\/v2\/media\/1635"}],"wp:attachment":[{"href":"https:\/\/mooi.hu\/en\/wp-json\/wp\/v2\/media?parent=1697"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/mooi.hu\/en\/wp-json\/wp\/v2\/categories?post=1697"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/mooi.hu\/en\/wp-json\/wp\/v2\/tags?post=1697"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}